Skip to content

[Bug Report][3.6.6] VNavigationDrawer renders below VAppBar #19830

Closed
YoutacRandS-VA/desec-stack
#2
@karanb0

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

  1. v-app with children v-navigation-drawer and v-app-bar in that order
  2. 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

Screenshot 2024-05-16 at 3 34 19 PM

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.

Metadata

Assignees

Labels

E: layoutLayout composableT: bugFunctionality that does not work as intended/expected

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions