search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.62k stars 6.95k forks source link

[Bug Report][3.6.5] The rail attribute of the VNavigationDrawer does not take effect when the encapsulated component is introduced. #19800

Closed AndyBeat closed 3 weeks ago

AndyBeat commented 3 months ago

Environment

Vuetify Version: 3.6.5 Last working version: 3.5.18 Vue Version: 3.4.27 Browsers: Chrome 124.0.0.0 OS: Windows 10

Steps to reproduce

Click the list icon on the toolbar

Expected Behavior

The left navigation can be retracted

Actual Behavior

No change to left navigation

Reproduction Link

https://codesandbox.io/p/github/AndyBeat/vuetify-navigation-test/master?file=%2Fsrc%2FApp.vue%3A17%2C1

Other comments

The same navigation bar code, the drawer attribute takes effect normally when used externally, but it does not take effect when encapsulated into a separate interface nav-drawer. This problem was also found on the vuetify doc page of the same version.

There is no change after the first click. It shrinks after refreshing. Clicking again cannot restore the original state. After refreshing, it is normal.

1715591046536

johnleider commented 3 months ago

I really don't understand what you're trying to do and if this is an implementation issue or a bug.

AndyBeat commented 3 months ago

I think it's a bug. After all, versions before 3.5.18 don't do this. This is a dynamic diagram of the effects of the two versions. Can you understand it?

vuetify 3.6.0: nav

vuetify 3.4.3: nav-2

AndyBeat commented 3 months ago

My English is not very good, I hope you can understand me. See if this screenshot helps you understand

1715611148739

nav-3

KaelWD commented 3 months ago

@johnleider this is the same problem we were looking at last week with the drawer not hiding on mobile.

johnleider commented 2 months ago

Where we are currently at with the issue:

This watcher isn't firing correctly: https://github.com/vuetifyjs/vuetify/blob/666484ae265194dc1512cb4f84f53ab928f5482b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx#L149

When an application is resized, the isTemporary change that occurs from mobile.value isn't causing the watcher to fire: https://github.com/vuetifyjs/vuetify/blob/666484ae265194dc1512cb4f84f53ab928f5482b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx#L137

KaelWD commented 3 weeks ago

I couldn't figure out how to fix this, I'm reverting #15229 in 3.7 because suspense is clearly not ready to use yet.