[Bug Report][3.8.0] Vdialog, VNavigationDrawer: Impossible to display a Navigation Drawer on top of a Dialog

[fabnapoli]

Environment

Vuetify Version: 3.8.0
Vue Version: 3.5.13
Browsers: Google Chrome
OS: Windows 10

Steps to reproduce

Open a Dialog which contains a button to open a Navigation Drawer.
(Ideally the Dialog should contain a list of items that whose info can be updated when opening the Drawer containing several fields/selects/controls)
Open the Drawer by clicking on a button displayed on the Dialog

Expected Behavior

When assigned a z-index prop the Dialog should be displayed with that z-index and if greater z-indexes are assigned to the Drawer with css (such is the case in this example) the Drawer should be visualized on top of the Dialog

Actual Behavior

The Dialog ignores the z-index assigned via the prop and is always displayed on top of the Drawer

Reproduction Link

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

Other comments

Please also note that if you manually modify the z-index of the Dialog on the console and set it to a lower value than the Drawer the Drawer is displayed on top of the Dialog correctly but the text fields in the Drawer are not editable.

[modos]

i tested the provided playground in chrome and drawer opens on top of the dialog

[fabnapoli]

@modos suprisingly it does now. Correct. But the text fields in the drawer are not editable

[KaelWD]

This, #16140, and #19477 can be resolved by making temporary drawers also use VOverlay.

[fabnapoli]

@KaelWD in this example the Drawer has a scrim prop and thus is already using an overlay. Can you clarify how this can be resolved?

[KaelWD]

That was a note for myself, the only thing you can do right now is disable the focus trap on the dialog with :retain-focus="false"

[modos]

@modos suprisingly it does now. Correct. But the text fields in the drawer are not editable

yes, it seems text fields in the drawer is not focusable