From 2907c5e6962f9d2a87bdd7da1520e26ac4dd23df Mon Sep 17 00:00:00 2001
From: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Date: Mon, 3 Nov 2025 21:20:34 +0530
Subject: [PATCH] fix(ui): interface language toggle (#24371)

---
 .../components/tabs/advanced/EventAdvancedTab.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
index 292ca66979..35db19416f 100644
--- a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
+++ b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
@@ -1,4 +1,4 @@
-import { useState, Suspense, useMemo } from "react";
+import { useState, Suspense, useMemo, useEffect } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { z } from "zod";
@@ -434,9 +434,14 @@ export const EventAdvancedTab = ({
     !!formMethods.getValues("multiplePrivateLinks") &&
       formMethods.getValues("multiplePrivateLinks")?.length !== 0
   );
+  const watchedInterfaceLanguage = formMethods.watch("interfaceLanguage");
   const [interfaceLanguageVisible, setInterfaceLanguageVisible] = useState(
-    !!formMethods.getValues("interfaceLanguage")
+    watchedInterfaceLanguage !== null && watchedInterfaceLanguage !== undefined
   );
+
+  useEffect(() => {
+    setInterfaceLanguageVisible(watchedInterfaceLanguage !== null && watchedInterfaceLanguage !== undefined);
+  }, [watchedInterfaceLanguage]);
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!formMethods.getValues("successRedirectUrl"));
 
   const bookingFields: Prisma.JsonObject = {};
@@ -784,7 +789,7 @@ export const EventAdvancedTab = ({
         <Controller
           name="interfaceLanguage"
           control={formMethods.control}
-          defaultValue={eventType.interfaceLanguage ?? ""}
+          defaultValue={eventType.interfaceLanguage ?? null}
           render={({ field: { value, onChange } }) => (
             <SettingsToggle
               labelClassName="text-sm"
@@ -817,7 +822,7 @@ export const EventAdvancedTab = ({
                   onChange={(option) => {
                     onChange(option?.value);
                   }}
-                  value={interfaceLanguageOptions.find((option) => option.value === value)}
+                  value={interfaceLanguageOptions.find((option) => option.value === value) || undefined}
                 />
               </div>
             </SettingsToggle>