From fbf8a871e17d7135902759f1d316e279aa581208 Mon Sep 17 00:00:00 2001
From: Dmitry <dk981234@gmail.com>
Date: Tue, 3 Dec 2024 11:01:01 +0400
Subject: [PATCH] Vue3: fix selected item's  loc strings conflict in dropdown
 (#9120)

* Vue3: fix selected item's  loc strings are conflicting in dropdown

* Remove test.only

* Fix functional tests

* Fix js ui functional tests
---
 packages/survey-vue3-ui/src/base.ts | 12 +++----
 testCafe/questions/dropdown.js      | 51 +++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index 0cac24c3ce..aa5bdaf5ac 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -148,21 +148,21 @@ export function useQuestion<T extends Question>(
     props.question.beforeDestroyQuestionElement(root.value);
   });
 }
-function noop() {}
 export function useLocString(
   getLocString: () => LocalizableString
 ): Ref<string> {
   const renderedHtml = ref();
+  const onStringChangedCallbck = (locString: LocalizableString) => {
+    renderedHtml.value = locString.renderedHtml;
+  };
   const setupOnChangedCallback = (locString: LocalizableString) => {
     renderedHtml.value = locString.renderedHtml;
-    locString.onChanged = () => {
-      renderedHtml.value = locString.renderedHtml;
-    };
+    locString.onStringChanged.add(onStringChangedCallbck);
   };
   const stopWatch = watch(
     getLocString,
     (newValue, oldValue) => {
-      if (oldValue) oldValue.onChanged = noop;
+      if (oldValue) oldValue.onStringChanged.remove(onStringChangedCallbck);
       setupOnChangedCallback(newValue);
     },
     { immediate: true }
@@ -170,7 +170,7 @@ export function useLocString(
   onBeforeUnmount(() => {
     const locString = getLocString();
     if (locString) {
-      locString.onChanged = noop;
+      locString.onStringChanged.remove(onStringChangedCallbck);
     }
     stopWatch();
   });
diff --git a/testCafe/questions/dropdown.js b/testCafe/questions/dropdown.js
index f1b4728b57..cfb4d1e732 100644
--- a/testCafe/questions/dropdown.js
+++ b/testCafe/questions/dropdown.js
@@ -2267,4 +2267,55 @@ frameworks.forEach((framework) => {
     let surveyResult = await getSurveyResult();
     await t.expect(surveyResult).eql({ q1: { row1: { col1: "other", "col1-Comment": "ABC" } } });
   });
+});
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}`;
+  test("Check item title changes when locale is changed", async (t) => {
+    await initSurvey(framework, {
+      locale: "de",
+      elements: [
+        {
+          defaultValue: "one",
+          choices: [
+            {
+              text: {
+                default: "english",
+                de: "notenglish",
+              },
+              value: "one",
+            },
+          ],
+          name: "q1",
+          title: {
+            default: "english",
+            de: "notenglish",
+          },
+          type: "dropdown",
+        },
+      ],
+    });
+    const changeLocale = ClientFunction((locale) => {
+      window.survey.locale = locale;
+    });
+    await t
+      .expect(Selector(".sv_q_dropdown__value span").withExactText("notenglish").exists).ok()
+      .click("input")
+      .expect(Selector("li div").withAttribute("title", "notenglish").exists).ok()
+      .expect(Selector("li div span").withExactText("notenglish").exists).ok()
+      .click("body", { offsetX: 0 });
+    await changeLocale("en");
+    await t
+      .expect(Selector(".sv_q_dropdown__value span").withExactText("english").exists).ok()
+      .click("input")
+      .expect(Selector("li div").withAttribute("title", "english").exists).ok()
+      .expect(Selector("li div span").withExactText("english").exists).ok()
+      .click("body", { offsetX: 0 });
+    await changeLocale("de");
+    await t
+      .expect(Selector(".sv_q_dropdown__value span").withExactText("notenglish").exists).ok()
+      .click("input")
+      .expect(Selector("li div").withAttribute("title", "notenglish").exists).ok()
+      .expect(Selector("li div span").withExactText("notenglish").exists).ok()
+      .click("body", { offsetX: 0 });
+  });
 });
\ No newline at end of file