fix(VMenu): unregister on unmount

fixes #17094
vuetifyjs · Nov 9, 2024 · 2f3163c · 2f3163c
1 parent a62a425
commit 2f3163c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -140,7 +140,7 @@ export const VAutocomplete = genericComponent<new <
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return
         _menu.value = v
       },
     })

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -144,7 +144,7 @@ export const VCombobox = genericComponent<new <
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return
         _menu.value = v
       },
     })

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -13,7 +13,18 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { useScopeId } from '@/composables/scopeId'
 
 // Utilities
-import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, watch } from 'vue'
+import {
+  computed,
+  inject,
+  mergeProps,
+  nextTick,
+  onBeforeUnmount,
+  onDeactivated,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
 import { VMenuSymbol } from './shared'
 import {
   focusableChildren,
@@ -66,17 +77,17 @@ export const VMenu = genericComponent<OverlaySlots>()({
     const overlay = ref<VOverlay>()
 
     const parent = inject(VMenuSymbol, null)
-    const openChildren = shallowRef(0)
+    const openChildren = shallowRef(new Set<number>())
     provide(VMenuSymbol, {
       register () {
-        ++openChildren.value
+        openChildren.value.add(uid)
       },
       unregister () {
-        --openChildren.value
+        openChildren.value.delete(uid)
       },
       closeParents (e) {
         setTimeout(() => {
-          if (!openChildren.value &&
+          if (!openChildren.value.size &&
             !props.persistent &&
             (e == null || (overlay.value?.contentEl && !isClickInsideElement(e, overlay.value.contentEl)))
           ) {
@@ -87,6 +98,9 @@ export const VMenu = genericComponent<OverlaySlots>()({
       },
     })
 
+    onBeforeUnmount(() => parent?.unregister())
+    onDeactivated(() => isActive.value = false)
+
     async function onFocusIn (e: FocusEvent) {
       const before = e.relatedTarget as HTMLElement | null
       const after = e.target as HTMLElement | null

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -146,7 +146,7 @@ export const VSelect = genericComponent<new <
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return
         _menu.value = v
       },
     })