vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][3.3.22] v-menu doesn't close when menu item opens a dialog

Open zub0r opened this issue 2 years ago • 1 comments

Environment

Vuetify Version: 3.3.22 Vue Version: 3.3.6 Browsers: Chrome 118.0.0.0 OS: Linux x86_64

Steps to reproduce

  • open the menu and click any menu item to open a dialog
  • close the dialog
  • the menu stays opened

Expected Behavior

the menu closes right after the dialog is opened

Actual Behavior

the menu never closes

Reproduction Link

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

Other comments

In vuetify 2 this could be handled manually by changing menu model value. (https://github.com/vuetifyjs/vuetify/issues/11521) This is not the case for vuetify 3, because changing the model value closes all nested components, including the dialog.

zub0r avatar Oct 23 '23 10:10 zub0r

I modified vuetify in the local environment and it works normally

The following are the factors that affect normal work: 1.dialog's activator (v-list-item) click event called stopPropagation , causing the click event of the menu content (v-list) not to be triggered.

2.Closing the menu will cause the dialog to disappear altogether

Solution: 1.The function of stopPropagation may be to prevent the entire menu from being closed directly after clicking instead of opening the inner menu when nesting multi-layer menus. That is to say, conditions are needed to determine whether to call stopPropagation. For dialog, my idea is to add "allow-propagation" Check props.activatorProps["allow-propagation"] when availableEvents onClick

2.menu props eager set to true

hanaTsuk1 avatar Nov 08 '23 04:11 hanaTsuk1