Vuetify: v-dialog: when putting v-dialog inside another v-dialog, on click its close the two dialogs

[shay1989]

Steps to reproduce

i build a dialog full screen and inside the full screen dialog i have a button which build another dialog for confirm (its a confirm message: yes - no).

Versions

"vue": "^2.4.4", "vuetify": "^0.15.7"

What is expected ?

on click the inside dialog (confirm dialog) buttons to close dialog, i would expect to close the confirm dialog only (of course i changed the confirm dialog with property dialog2)

What is actually happening ?

When clicking on confirm dialog, its close all dialogs (full and confirm (inside full))
Also if i click on the content of confirm dialog, and not on buttons - its close the dialogs

Reproduction Link

https://vuetifyjs.com/components/dialogs

[johnleider]

Feel free to provide me with the # of the example you are referencing when you link the entire dialogs section, otherwise, I have no idea what you are talking about.

[shay1989]

I have created an example in jsfiddle
https://jsfiddle.net/sahyalt/5sbfa20u/

dialogs:

3 Modal - inside the #4 Fullscreen

try to open the full dialog and then click on the button to open the second dialog(inside the first)

when click, both dialogs are closed

when you click just the content of your next dialog, its close the first one only(not need to close anything)

in the example the second dialog start at line 20

[Webifi]

Not positive, but I think merging PR #1932 would fix this as well.

[jacekkarczmarczyk]

It work properly on dev branch

[Webifi]

Not sure this issue is completely fixed by the latest beta.
See:
https://codepen.io/webifi/pen/oGoxre

1. Click "Open Dialog 1", then,
2. in the full screen dialog, "Open Dialog 2"
3. in dialog 2, click "Open Dialog 3"
4. Now, click somewhere on dialog 2. You'll see dialog 3 and dialog 1 close when only dialog 3 should.

Also, if you click outside of any of the non-fullscreen dialogs, all of them will close instead of the topmost. (Unless they are persistent.)

PR #1932 does fix these issues, among some others.

[jacekkarczmarczyk]

I've checked it on the dev branch which has some more fixes than beta.3, you can try by yourself to be sure

BTW. could you also check this gist with your PR? https://gist.github.com/jacekkarczmarczyk/782cbd8710c1a62d350e126ba4f1a814

[KaelWD]

I just checked on dev and it has the same behaviour as the codepen. Also the z-index is off, the new dialogs' overlays should cover the contents of the previous dialogs.

[jacekkarczmarczyk]

I swear it was working on dev (the example from jsfiddle)...
Actually when I was playing with this example and trying to change it sometimes z-indexes were correct and sometimes not, have no idea what's happening there

[Webifi]

@jacekkarczmarczyk
Here it is on my PR:
https://codepen.io/webifi/pen/MEOeyK

I had to fix one issue where you were setting inner = false in the "Open inner dialog" vBtn. Changed it to inner = true.

[toshiroakio]

Propose a such solution: https://jsfiddle.net/toshiroakio/w5fLkx9p/

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.