Scroll back to top on drawer closed

[PierroCesi]

Video

Screen.Recording.2024-11-26.at.16.16.21.mov

Bug Description

When using Vaul Drawer in a Vue/Nuxt application with shadcn-ui, the page automatically scrolls to the top even when the Drawer is not displayed.

Steps to Reproduce

1. Have a page with nested components
2. One of these components includes a Drawer (even if not visible)
3. Navigate to this page
4. The page automatically scrolls to the top

Expected Behavior

The page should maintain its scroll position when navigating to a component that contains a Drawer.

Current Behavior

The page automatically scrolls to the top when mounting a component containing a Drawer, even if the Drawer is not visible/active.

Additional Context

• Adding :preventScrollRestoration="true" to the Drawer component doesn't solve the issue
• This happens specifically when the Drawer is nested in other components
• The scroll behavior occurs on component mount, not on Drawer interaction

Environment

• Vue.js version: 3.3.4
• Vaul-vue version: 0.2.0
• Radix Vue version: 1.9.1
• Browser: Arc browser

Similar bug on React Drawer

• Scroll back to top on drawer closed shadcn-ui/ui#2856

[drefrajo]

Have you tried adding :nested="true" to the Drawer component?

[Hakim-Latroch]

This worked for me :

<DrawerContent onCloseAutoFocus={(e) => e.preventDefault()}> ..</DrawerContent>

Prevent Default Focus Behavior:
Issue: Some drawer components may focus on a specific element upon closing, causing the page to scroll.
Solution: Prevent the default focus behavior when the drawer closes.

[Ishidall]

@Hakim-Latroch

<DrawerContent onCloseAutoFocus={(e) => e.preventDefault()}> ..</DrawerContent>

This fixed my problem on Mac(Intel)'s Chrome, Thank you!