[Bug Report][3.6.6] VNavigationDrawer renders below VAppBar #19830
Description
Environment
Vuetify Version: 3.6.6
Last working version: 3.5.18
Vue Version: 3.4.27
Browsers: Chrome 124.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
v-app
with childrenv-navigation-drawer
andv-app-bar
in that order- Make the drawer render a bit slower than the app bar.
- In the repro below I used 1ms delay, but in practice this could be an async call or complex computation in the loading hooks of the component.
Expected Behavior
In the order the components are defined, the drawer should consistently open over the app bar.
Actual Behavior
Observe that when the navigation drawer opens, it's clipped below the app bar.
Reproduction Link
https://play.vuetifyjs.com/#...
Screenshot
Other comments
The issue doesn't exist in Vuetify 3.5, it's happening in versions 3.6+. If you change the Vuetify version in the repro link, you'll notice that the drawer renders correctly regardless of delay.
Workaround
Able to work around if for now by only loading the VAppBar (via v-if
) after the VNavigationDrawer is mounted. Ideally we wouldn't have to manage this though.