search

yariksav / vuetify-dialog

Easy dialogs in Vuetify.js framework
MIT License
195 stars 48 forks source link

Nesting error: Clicking on the overlay/buttons hides drawers and other dialogs #125

Closed g00fy- closed 3 years ago

g00fy- commented 3 years ago

When a dialog is opened from a drawer clicking anywhere (even on the overlay) triggers the drawer to be hidden. The issue is not reproducable when creating manual <v-dialog> component that is child of the drawer

Example issue: https://codesandbox.io/s/vuetify-2-dialog-example-forked-ffv95?file=/src/App.vue

Not sure if this is an issue with vuedl or vuetify-dialog

yariksav commented 3 years ago

Please see your example when native v-dialog not within v-navigation-drawer https://codesandbox.io/s/vuetify-2-dialog-example-forked-eykz7?file=/src/App.vue

It's not a bug, its expected behavior, because in usual case v-navigation-drawer has click-outside directive and always react on this.

https://github.com/vuetifyjs/vuetify/blob/78567e4e72973e2ff2acdcf3707c093bb9f0725c/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts#L331

In your case v-dialog is child of v-navigation-drawer, and when you click on overlay - this is not click-ouside, this is click on it child.

Therefore, if you want this behavior - please use native v-dialog within slot v-navigation-drawer like you did

g00fy- commented 3 years ago

@yariksav would it be possible to extend vuetify-dialog to allow passing additional parentElement as an option to prevent this behavior ?