Vue3: fix selected item's loc strings conflict in dropdown

packages/survey-vue3-ui/src/base.ts

@@ -148,29 +148,29 @@ 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 }
   );
   onBeforeUnmount(() => {
     const locString = getLocString();
     if (locString) {
-      locString.onChanged = noop;
+      locString.onStringChanged.remove(onStringChangedCallbck);
     }
     stopWatch();
   });

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 });
+  });
 });