vuetifyjs
[Bug Report][3.6.5] The rail attribute of the VNavigationDrawer does not take effect when the encapsulated component is introduced.
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
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.
I really don't understand what you're trying to do and if this is an implementation issue or a bug.
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:
vuetify 3.4.3:
My English is not very good, I hope you can understand me. See if this screenshot helps you understand
@johnleider this is the same problem we were looking at last week with the drawer not hiding on mobile.
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
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.