[Bug Report][3.1.11] VMenu - Menu closes when nested menu closes

[joel-wenzel]

Environment

Vuetify Version: 3.1.11
Last working version: 2.6.14
Vue Version: 3.2.47
Browsers: Chrome 111.0.0.0
OS: Windows 10

Steps to reproduce

• Click the button to open the menu
• Click the inner button to open the nested menu
• Click back into the first menu (it should remain open but closes).

Expected Behavior

Only the inner menu should close when clicking back into the first menu

Actual Behavior

Both menus close

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Works in vuetify 2: https://codepen.io/joel-wenzel/pen/gOdqMgQ
I tried attaching the inner menu to the parent menu just to see if that changed anything and it doesnt.

[fahmifitu]

HEy, I have the same issue. Have you found any workarounds?

[meghanmae]

We are also experiencing this issue! Has there been any movement on this?

[joel-wenzel]

@fahmifitu @mmwoodfo I havent found a work around, but I was able to fix it using https://www.npmjs.com/package/patch-package
Here is the diff in VMenu:

-      closeParents() {
+     closeParents(event) {
         setTimeout(() => {
           if (!openChildren.value) {
-            isActive.value = false;
-            parent?.closeParents();
+            if(event && !overlay.value.contentEl.contains(event.target)) {
+              isActive.value = false;
+              parent?.closeParents();
+            }
           }
         }, 40);

-    function onClickOutside() {
-      parent?.closeParents();
+    function onClickOutside(event) {
+      parent?.closeParents(event);
     }

I haven't submitted a PR for this myself because I feel its kind of a hacky solution, waiting to see what the vuetify team does.

[fahmifitu]

@mmwoodfo @joel-wenzel I used a v-overlay as follows and made it function as a menu. it doesn't have this issue

<v-overlay
    v-bind="{
      openOnFocus: false,
      openOnClick: true,
      closeOnContentClick: false,
      closeDelay: 0,
      openDelay: 0,
      locationStrategy: 'connected',
      scrim: false,
      scrollStrategy: 'reposition',
      maxWidth: '280px',
      contentProps: { style: 'min-width: unset !important;' },
    }"
  >

[vicdotexe]

@fahmifitu

I used a v-overlay as follows and made it function as a menu. it doesn't have this issue

This is also what I ended up doing earlier today and works pretty well. contentProps: { style: 'min-width: unset !important;' }, was what I was missing though, so thank you!

[sametaylak]

any updates on this? @KaelWD

[ghost]

Any adjustment predictions?

[marilgt]

Have the same problem. Any updates?

[3dyuval]

I've also tried to troubleshoot this untill I found this issue. demo

[yuwu9145]

@fahmifitu @mmwoodfo I havent found a work around, but I was able to fix it using https://www.npmjs.com/package/patch-package Here is the diff in VMenu:

-      closeParents() {
+     closeParents(event) {
         setTimeout(() => {
           if (!openChildren.value) {
-            isActive.value = false;
-            parent?.closeParents();
+            if(event && !overlay.value.contentEl.contains(event.target)) {
+              isActive.value = false;
+              parent?.closeParents();
+            }
           }
         }, 40);

-    function onClickOutside() {
-      parent?.closeParents();
+    function onClickOutside(event) {
+      parent?.closeParents(event);
     }

I haven't submitted a PR for this myself because I feel its kind of a hacky solution, waiting to see what the vuetify team does.

I have been trying to fix this issue for a pretty long time, I think your fix makes sense:

• closeParents seem to be designed to close all upstream parent menus when mouse point is outside all menus
• It makes sense to stop closing parent menus when clicking point is inside its immediate parent
• variables inside closeParents function belong to parent lexical scope

I have tested all working good and it makes good sense @joel-wenzel