fix(VMenu): do not call closeParents() when clickoutside is inside pa…

…rent fixes #17004 #19138
vuetifyjs · Feb 18, 2024 · 4a6e9b0 · 4a6e9b0
1 parent 30a18a9
commit 4a6e9b0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -15,7 +15,17 @@ import { useScopeId } from '@/composables/scopeId'
 // Utilities
 import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, watch } from 'vue'
 import { VMenuSymbol } from './shared'
-import { focusableChildren, focusChild, genericComponent, getNextElement, getUid, omit, propsFactory, useRender } from '@/util'
+import {
+  focusableChildren,
+  focusChild,
+  genericComponent,
+  getNextElement,
+  getUid,
+  isClickInsideElement,
+  omit,
+  propsFactory,
+  useRender,
+} from '@/util'
 
 // Types
 import type { Component } from 'vue'
@@ -106,8 +116,10 @@ export const VMenu = genericComponent<OverlaySlots>()({
       }
     })
 
-    function onClickOutside () {
-      parent?.closeParents()
+    function onClickOutside (e: MouseEvent) {
+      if (e && !isClickInsideElement(e, overlay.value!.contentEl!)) {
+        parent?.closeParents()
+      }
     }
 
     function onKeydown (e: KeyboardEvent) {

diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
@@ -708,3 +708,16 @@ export function defer (timeout: number, cb: () => void) {
 
   return () => window.clearTimeout(timeoutId)
 }
+
+export function isClickInsideElement (event: MouseEvent, targetDiv: HTMLElement) {
+  const mouseX = event.clientX
+  const mouseY = event.clientY
+
+  const divRect = targetDiv.getBoundingClientRect()
+  const divLeft = divRect.left
+  const divTop = divRect.top
+  const divRight = divRect.right
+  const divBottom = divRect.bottom
+
+  return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom
+}