fix: multi-lang toggle covering arabic text (backport #7657) (#7660)

Co-authored-by: Johannes <johannes@formbricks.com>

apps/web/lib/i18n/utils.ts

@@ -84,7 +84,9 @@ export const extractLanguageIds = (languages: TLanguage[]): string[] => {
 
 export const getLanguageCode = (surveyLanguages: TSurveyLanguage[], languageCode: string | null) => {
   if (!surveyLanguages?.length || !languageCode) return "default";
-  const language = surveyLanguages.find((surveyLanguage) => surveyLanguage.language.code === languageCode);
+  const language = surveyLanguages.find(
+    (surveyLanguage) => surveyLanguage.language.code.toLowerCase() === languageCode.toLowerCase()
+  );
   return language?.default ? "default" : language?.language.code || "default";
 };
 

apps/web/modules/survey/editor/components/multiple-choice-element-form.tsx

@@ -346,8 +346,8 @@ export const MultipleChoiceElementForm = ({
         </div>
 
         <div className="mt-2">
-          <div className="mt-2 flex items-center justify-between space-x-2">
-            <div className="flex gap-2">
+          <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+            <div className="flex flex-wrap gap-2">
               {specialChoices.map((specialChoice) => {
                 if (element.choices.some((c) => c.id === specialChoice.id)) return null;
                 return (

apps/web/modules/survey/editor/components/survey-menu-bar.tsx

@@ -72,6 +72,7 @@ export const SurveyMenuBar = ({
   const [lastAutoSaved, setLastAutoSaved] = useState<Date | null>(null);
   const isSuccessfullySavedRef = useRef(false);
   const isAutoSavingRef = useRef(false);
+  const isSurveyPublishingRef = useRef(false);
 
   // Refs for interval-based auto-save (to access current values without re-creating interval)
   const localSurveyRef = useRef(localSurvey);
@@ -269,8 +270,8 @@ export const SurveyMenuBar = ({
       // Skip if tab is not visible (no computation, no API calls for background tabs)
       if (document.hidden) return;
 
-      // Skip if already saving (manual or auto)
-      if (isAutoSavingRef.current || isSurveySavingRef.current) return;
+      // Skip if already saving, publishing, or auto-saving
+      if (isAutoSavingRef.current || isSurveySavingRef.current || isSurveyPublishingRef.current) return;
 
       // Check for changes using refs (avoids re-creating interval on every change)
       const { updatedAt: localUpdatedAt, ...localSurveyRest } = localSurveyRef.current;
@@ -289,10 +290,19 @@ export const SurveyMenuBar = ({
         } as unknown as TSurveyDraft);
 
         if (updatedSurveyResponse?.data) {
+          const savedData = updatedSurveyResponse.data;
+
+          // If the segment changed on the server (e.g., private segment was deleted when
+          // switching from app to link type), update localSurvey to prevent stale segment
+          // references when publishing
+          if (!isEqual(localSurveyRef.current.segment, savedData.segment)) {
+            setLocalSurvey({ ...localSurveyRef.current, segment: savedData.segment });
+          }
+
           // Update surveyRef (not localSurvey state) to prevent re-renders during auto-save.
           // This keeps the UI stable while still tracking that changes have been saved.
           // The comparison uses refs, so this prevents unnecessary re-saves.
-          surveyRef.current = { ...updatedSurveyResponse.data };
+          surveyRef.current = { ...savedData };
           isSuccessfullySavedRef.current = true;
           setLastAutoSaved(new Date());
         }
@@ -417,11 +427,13 @@ export const SurveyMenuBar = ({
   };
 
   const handleSurveyPublish = async () => {
+    isSurveyPublishingRef.current = true;
     setIsSurveyPublishing(true);
 
     const isSurveyValidatedWithZod = validateSurveyWithZod();
 
     if (!isSurveyValidatedWithZod) {
+      isSurveyPublishingRef.current = false;
       setIsSurveyPublishing(false);
       return;
     }
@@ -429,6 +441,7 @@ export const SurveyMenuBar = ({
     try {
       const isSurveyValidResult = isSurveyValid(localSurvey, selectedLanguageCode, t, responseCount);
       if (!isSurveyValidResult) {
+        isSurveyPublishingRef.current = false;
         setIsSurveyPublishing(false);
         return;
       }
@@ -445,10 +458,12 @@ export const SurveyMenuBar = ({
       if (!publishResult?.data) {
         const errorMessage = getFormattedErrorMessage(publishResult);
         toast.error(errorMessage);
+        isSurveyPublishingRef.current = false;
         setIsSurveyPublishing(false);
         return;
       }
 
+      isSurveyPublishingRef.current = false;
       setIsSurveyPublishing(false);
       // Set flag to prevent beforeunload warning during navigation
       isSuccessfullySavedRef.current = true;
@@ -456,6 +471,7 @@ export const SurveyMenuBar = ({
     } catch (error) {
       console.error(error);
       toast.error(t("environments.surveys.edit.error_publishing_survey"));
+      isSurveyPublishingRef.current = false;
       setIsSurveyPublishing(false);
     }
   };

apps/web/modules/survey/link/components/survey-renderer.tsx

@@ -202,7 +202,7 @@ function getLanguageCode(langParam: string | undefined, survey: TSurvey): string
 
   const selectedLanguage = survey.languages.find((surveyLanguage) => {
     return (
-      surveyLanguage.language.code === langParam.toLowerCase() ||
+      surveyLanguage.language.code.toLowerCase() === langParam.toLowerCase() ||
       surveyLanguage.language.alias?.toLowerCase() === langParam.toLowerCase()
     );
   });

apps/web/modules/survey/multi-language-surveys/components/language-indicator.tsx

@@ -48,7 +48,7 @@ export function LanguageIndicator({
       <button
         aria-expanded={showLanguageDropdown}
         aria-haspopup="true"
-        className="relative z-20 flex max-w-[120px] items-center justify-center rounded-md bg-slate-900 p-1 px-2 text-xs text-white hover:bg-slate-700"
+        className="relative z-20 flex max-w-20 items-center justify-center rounded-md bg-slate-900 p-1 px-2 text-xs text-white hover:bg-slate-700"
         onClick={toggleDropdown}
         tabIndex={-1}
         type="button">

packages/surveys/src/components/general/language-switch.tsx

@@ -59,7 +59,7 @@ export function LanguageSwitch({
     handleI18nLanguage(calculatedLanguageCode);
 
     if (setDir) {
-      const calculateDir = isRTLLanguage(survey, calculatedLanguageCode) ? "rtl" : "auto";
+      const calculateDir = isRTLLanguage(survey, calculatedLanguageCode) ? "rtl" : "ltr";
       setDir?.(calculateDir);
     }
 

packages/surveys/src/components/general/render-survey.tsx

@@ -9,12 +9,13 @@ export function RenderSurvey(props: SurveyContainerProps) {
   const onFinishedTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isRTL = isRTLLanguage(props.survey, props.languageCode);
-  const [dir, setDir] = useState<"ltr" | "rtl" | "auto">(isRTL ? "rtl" : "auto");
+  const [dir, setDir] = useState<"ltr" | "rtl" | "auto">(isRTL ? "rtl" : "ltr");
 
   useEffect(() => {
     const isRTL = isRTLLanguage(props.survey, props.languageCode);
-    setDir(isRTL ? "rtl" : "auto");
-  }, [props.languageCode, props.survey]);
+    setDir(isRTL ? "rtl" : "ltr");
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only recalculate direction when languageCode changes, not on survey auto-save
+  }, [props.languageCode]);
 
   const close = () => {
     if (onFinishedTimeoutRef.current) {

packages/surveys/src/components/i18n/provider.tsx

@@ -1,20 +1,28 @@
 import { ComponentChildren } from "preact";
-import { useEffect } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../lib/i18n.config";
 
 export const I18nProvider = ({ language, children }: { language: string; children?: ComponentChildren }) => {
+  const isFirstRender = useRef(true);
+  const prevLanguage = useRef(language);
+
   // Set language synchronously on initial render so children get the correct translations immediately.
   // This is safe because all translations are pre-loaded (bundled) in i18n.config.ts.
-  if (i18n.language !== language) {
-    i18n.changeLanguage(language);
-  }
-
-  // Handle language prop changes after initial render
-  useEffect(() => {
+  // On subsequent renders, skip this to avoid overriding language changes made by the user via LanguageSwitch.
+  if (isFirstRender.current) {
     if (i18n.language !== language) {
       i18n.changeLanguage(language);
     }
+    isFirstRender.current = false;
+  }
+
+  // Only update language when the prop itself changes, not when i18n was changed internally by user action
+  useEffect(() => {
+    if (prevLanguage.current !== language) {
+      i18n.changeLanguage(language);
+      prevLanguage.current = language;
+    }
   }, [language]);
 
   // work around for react-i18next not supporting preact