vuetifyjs
[Bug Report] v-menu doesnt close when menu item has a dialog
Environment
Vuetify Version: 2.2.30 Vue Version: 2.6.11 Browsers: Chrome 83.0.4103.61 OS: Windows 10
Steps to reproduce
On the reproduction link click on the menu item
Expected Behavior
dialog opens and menu closes
Actual Behavior
dialog opens and menu stays open
Reproduction Link
Workaround:
<script type="text/x-template" id="app-template">
<v-app>
<v-container>
<v-menu bottom offset-y v-model="menu">
<template v-slot:activator="{ on }">
<v-btn color='primary' v-on="on">menu</v-btn>
</template>
<v-list dense>
<v-list-item @click.stop="open()">
<v-list-item-title >Open dialog</v-list-item-title>
</v-list-item>
<v-dialog v-model="dialog" width="500">
<v-card>
<v-card-title>Dialog</v-card-title>
</v-card>
</v-dialog>
</v-list>
</v-menu>
</v-container>
</v-app>
</script>
<div id="app"></div>
// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe
const App = {
template: "#app-template",
data: () => ({
dialog: false,
menu: false,
}),
methods: {
hi() {
alert("hi");
},
open() {
console.log('//')
this.dialog = true;
this.menu = false;
}
}
};
new Vue({
vuetify: new Vuetify(),
render: (h) => h(App)
}).$mount("#app");
Would love to see this fixed! I have the same issue and the workaround adds unnecessary extra components when working with a large project.
In v3 we now unmount menu content when it's closed (#6764), which would include the dialog in this example. Would you be ok with the menu scheduling itself to close after the dialog is closed instead?
Hmm its better, but still is not exactly the expected behaviour. Would it be possible to do it the other way around? closing the menu and scheduling the unmount to after closing the dialog?
I might have to play with that a bit, currently unmounting is tied directly to visibility.
There's also cases where you'd want the parent item to stay open, for example nested menus or a menu in a drawer.
Thats true.. dialog its a special case.. Maybe its a thing with the dialog design, the feeling I get is that the dialog activator should be completely detached from the actual dialog.. and it should be like clicking a link, unmounting the component that had the link doesnt close the new tab. But I guess for that we would have to do something like the workaround
So your solution is good enough for me given the design, thanks!
Would love to see this fixed! I have the same issue and the workaround adds unnecessary extra components when working with a large project.
For now, simplest and cheapest way would be to add ref in the v-menu and after closing dialog, trigger this.$refs.menu.isActive = false
Same problem, I had to use a v-model on the v-menu and manually set it to false when handling the click on the v-dialog.
This needs to be resolved as it means the components of the same library do not play fair with each others.
Auto closing of menu doesn't work even in v3 if the menu item activates a dialog (example). Manually setting menu model to false on click causes the dialog to disappear too, so the workaround that worked for v2 is not usable any more. @KaelWD This is quite a frequent use case - any chance this can be fixed please?
