Merge pull request #9076 from surveyjs/bug/creator-6071

Add some fixies for creator vue3 perfomance
surveyjs · Nov 19, 2024 · 3115189 · 3115189
2 parents 6f19042 + 9a486fe
commit 3115189
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/packages/survey-core/src/dropdownListModel.ts b/packages/survey-core/src/dropdownListModel.ts
@@ -633,6 +633,7 @@ export class DropdownListModel extends Base {
     if (!!this.popupModel) {
       this.popupModel.dispose();
     }
+    this.htmlCleanerElement = undefined;
   }
 
   scrollToFocusedItem(): void {

diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
@@ -4976,6 +4976,11 @@ export class SurveyModel extends SurveyElementCore
     this.rootElement = htmlElement;
     this.addScrollEventListener();
   }
+  beforeDestroySurveyElement() {
+    this.destroyResizeObserver();
+    this.removeScrollEventListener();
+    this.rootElement = undefined;
+  }
   /**
    * An event that is raised when the survey's width or height is changed.
    */

diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue
@@ -209,7 +209,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   vueSurvey.value.stopTimer();
-  vueSurvey.value.rootElement = undefined as any;
+  vueSurvey.value.beforeDestroySurveyElement();
   vueSurvey.value.renderCallback = undefined as any;
 });
 </script>
diff --git a/packages/survey-vue3-ui/src/selectbase-item.ts b/packages/survey-vue3-ui/src/selectbase-item.ts
@@ -1,5 +1,5 @@
 import type { ItemValue, QuestionSelectBase } from "survey-core";
-import { onMounted, type Ref } from "vue";
+import { onMounted, onUnmounted, type Ref } from "vue";
 import { useBase } from "./base";
 
 export function useSelectBaseItem(
@@ -14,24 +14,19 @@ export function useSelectBaseItem(
       }
     }
   });
-  useBase(
-    getItem,
-    (newValue, oldValue) => {
-      if (!getQuestion().isDesignMode) {
-        if (newValue && root.value) {
-          newValue.setRootElement(root.value);
-        }
-        if (oldValue) {
-          oldValue.setRootElement(undefined as any);
-        }
+  onUnmounted(() => {
+    if (!getQuestion().isDesignMode) {
+      getItem().setRootElement(undefined as any);
+    }
+  });
+  useBase(getItem, (newValue, oldValue) => {
+    if (!getQuestion().isDesignMode) {
+      if (newValue && root.value) {
+        newValue.setRootElement(root.value);
       }
-    },
-    () => {
-      const item = getItem();
-      const question = getQuestion();
-      if (question && item && question.isDesignMode) {
-        item.setRootElement(undefined as any);
+      if (oldValue) {
+        oldValue.setRootElement(undefined as any);
       }
     }
-  );
+  });
 }