Vuetify: Nested dialog z-indexing issue

[amitailanciano]

Steps to reproduce

(see codepen below)

Versions

0.12.7

What is expected ?

date picker should appear on top of dialog

What is actually happening ?

date picker is hidden behind dialog

Reproduction Link

https://codepen.io/anon/pen/MobWLo

[dohomi]

@amitailanciano as a quick fix: instead of using v-dialog for the inner date picker use a v-menu and you should be good to go:
https://codepen.io/anon/pen/owYbEv

[johnleider]

Yea this is not going to be one that is really fixable. The dialog get's appended to the dom, so they are all on the same index. Opening a second dialog from within a dialog seems like a very niche case.

[amitailanciano]

Could the most recently activated dialog be moved to the end of its dialog siblings? Just thinking out loud. While using v-menu works, it's definitely not as nice, especially on mobile devices; I could see this being a somewhat common issue

[dohomi]

@amitailanciano you can also provide a class param to the inner v-dialog and then manually adjust the class of the nested dialog

[johnleider]

@dohomi 's suggestion would be mine in this case. Doing dom manipulation like that would definitely work, but it seems like a very niche case where you are opening a dialog from another dialog. This is not something that I think we should support and we do offer tools to the developer to be able to handle this custom situation with the upcoming content-class prop coming in next release.

If you disagree, let me know, and we can leave this open for more discussion.

[amitailanciano]

I think that's fair, but maybe it's worth putting a little callout/note box in the documentation about it, I can think of some other scenarios where people might not even realize something was wrong if they were using some combination of hide-overlay and fullscreen on either/both dialogs.

Other than that, I think the biggest argument to be made for it is that there's not really a good way to show a picker from a dialog (fullscreen or modal) on mobile, which I think would is a reasonably common thing. How would you approach it?

[johnleider]

I would have a similar setup to you, but I would do hide-overlay on the second dialog and then pass a custom class to the picker dialog using content-class that would define a higher z-index. The former is available now, the latter has not been released yet.

[amitailanciano]

I'll go ahead with that solution then, thanks for the feedback 👍

[amitailanciano]

Hey @johnleider, it looks like content class is now implemented (thanks for that), however it's doesn't look like it's consistent between menus and dialogs. For menus, it's implemented the way I would expect (on the outer menu__content div), whereas on dialogs, it's actually on the inner dialog within dialog__content, which does not allow me to override the outer dialog content z-index the way you suggested

Updated codepen: https://codepen.io/anon/pen/XaMKxY

https://github.com/vuetifyjs/vuetify/blob/v0.14.8/src/components/dialogs/VDialog.js#L108
VS
https://github.com/vuetifyjs/vuetify/blob/v0.14.8/src/components/menus/mixins/generators.js#L35

[amitailanciano]

Any update on this?

[johnleider]

Not really how I should approach this honestly. It's a very niche outside of spec request.

[amitailanciano]

I feel like it would be a pretty common use case, another example might be showing a generic global dialog for an ajax error loading a list view or something.. if that list view was inside a fullscreen dialog, it would be hidden behind it since we are unable to z-index it with a higher priority. I love the way the dialogs are implemented, but I feel like this is a pretty significant limitation. Would something like this work for dialogs too? https://github.com/vuetifyjs/vuetify/pull/1274

[johnleider]

Yes it would.

[amitailanciano]

I think it's going to be more of an issue than that on second thought, as even the options for components like v-select are hidden behind the initial dialog (and I'm sure other similar components are affected as well). Perhaps it should/could be a standalone mixin that components like v-select, v-menu, v-dialog, etc implement

[Heemrad]

Hi I know this issue is dead and buried but i have the exact use case that @amitailanciano made a codepen for, where we have a date picker dialog within a modal. Problem is that when the user selects the date the date picker dialog doesnt close as it does when it is not nested within a modal. When clicking outside it functions as should but not when a date is selected.

[Heemrad]

v-menu opening a v-dialog opening a v-menu - this causes the bug. It does not happen when opening v-dialog which opens a v-menu

[jacekkarczmarczyk]

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.

[Heemrad]

Sorry, won't happen again I'm new to the whole workflow. Thank you for your patience and time.

Sent from my Samsung Galaxy smartphone.
-------- Original message --------From: Jacek Karczmarczyk [e-mail] Date: 2018/11/08 09:46 (GMT+02:00) To: vuetifyjs/vuetify [e-mail] Cc: Heemrad [e-mail], Comment [e-mail] Subject: Re: [vuetifyjs/vuetify] Nested dialog z-indexing issue (#771)
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.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.
{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/vuetifyjs/vuetify","title":"vuetifyjs/vuetify","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/vuetifyjs/vuetify"}},"updates":{"snippets":[{"icon":"PERSON","message":"@jacekkarczmarczyk in #771: 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.\r\n\r\nThank you for your contribution and interest in improving Vuetify."}],"action":{"name":"View Issue","url":"https://github.com/vuetifyjs/vuetify/issues/771#issuecomment-436902555"}}}
[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/vuetifyjs/vuetify/issues/771#issuecomment-436902555",
"url": "https://github.com/vuetifyjs/vuetify/issues/771#issuecomment-436902555",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
},
{
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"hideOriginalBody": "false",
"originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB",
"title": "Re: [vuetifyjs/vuetify] Nested dialog z-indexing issue (#771)",
"sections": [
{
"text": "",
"activityTitle": "Jacek Karczmarczyk",
"activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png",
"activitySubtitle": "@jacekkarczmarczyk",
"facts": [

]
}
],
"potentialAction": [
{
"name": "Add a comment",
"@type": "ActionCard",
"inputs": [
{
"isMultiLine": true,
"@type": "TextInput",
"id": "IssueComment",
"isRequired": false
}
],
"actions": [
{
"name": "Comment",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"vuetifyjs/vuetify\",\n\"issueId\": 771,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}"
}
]
},
{
"targets": [
{
"os": "default",
"uri": "https://github.com/vuetifyjs/vuetify/issues/771#issuecomment-436902555"
}
],
"@type": "OpenUri",
"name": "View on GitHub"
},
{
"name": "Unsubscribe",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 233551691\n}"
}
],
"themeColor": "26292E"
}
]