From 9bd3ee86eba6814f8f5c27aad1fea3f4bba88d9d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 17 Aug 2022 22:55:10 +0200
Subject: [PATCH] chore(gui-v2): cleanup watcher on dispose in `useDialog`

---
 .../nc-gui-v2/composables/useDialog/index.ts  | 25 +++++++++----------
 .../[projectId]/index/index/index.vue         |  1 -
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useDialog/index.ts b/packages/nc-gui-v2/composables/useDialog/index.ts
index 51de9615e7..a864056d63 100644
--- a/packages/nc-gui-v2/composables/useDialog/index.ts
+++ b/packages/nc-gui-v2/composables/useDialog/index.ts
@@ -20,19 +20,13 @@ export function useDialog(
 
   const vNodeRef = ref<VNode>()
 
+  mountTarget = mountTarget ? ('$el' in mountTarget ? (mountTarget.$el as HTMLElement) : mountTarget) : document.body
+
   /** if specified, append vnode to mount target instead of document.body */
-  if (mountTarget) {
-    if ('$el' in mountTarget) {
-      mountTarget.$el.appendChild(domNode)
-    } else {
-      mountTarget.appendChild(domNode)
-    }
-  } else {
-    document.body.appendChild(domNode)
-  }
+  mountTarget.appendChild(domNode)
 
   /** When props change, we want to re-render the element with the new prop values */
-  watch(
+  const stop = watch(
     toReactive(props),
     (reactiveProps) => {
       const vNode = h(component, reactiveProps)
@@ -45,19 +39,24 @@ export function useDialog(
 
       if (!isMounted) mountedHook.trigger()
     },
-    { deep: true, immediate: true },
+    { deep: true, immediate: true, flush: 'post' },
   )
 
   /** When calling scope is disposed, destroy component */
-  tryOnScopeDispose(close)
+  tryOnScopeDispose(() => {
+    close()
+    stop()
+  })
 
   /** destroy component, can be debounced */
   function close(debounce = 0) {
     setTimeout(() => {
+      stop()
+
       render(null, domNode)
 
       setTimeout(() => {
-        document.body.removeChild(domNode)
+        ;(mountTarget as HTMLElement)!.removeChild(domNode)
       }, 100)
 
       closeHook.trigger()
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index e26ac514c4..e7a3d92c44 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -76,7 +76,6 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
 
   function closeDialog() {
     isOpen.value = false
-
     close(1000)
   }
 }