search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
75.1k stars 4.69k forks source link

[bug]: Prevent back navigation when Drawer or sheet is open #5680

Open Alipourzadi opened 2 weeks ago

Alipourzadi commented 2 weeks ago

Describe the bug

When the drawer or sheet component is open the back button in browser ( or any button or gesture which leads to navigate back for ios and android devices ) makes the router navigate back which i think the expected behavior is to prevent the user from navigating back or just close the drawer/sheet which is opened.

Affected component/components

Drawer, sheet

How to reproduce

In the shadcn website , use the drawer example and just hit the browser back button.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Any browser on any device

Before submitting

justinformentin commented 6 days ago

This is expected behavior for a few reasons.

Generally, it's recommended to leave the back button alone. Preventing the user from navigating back when they click the back button is considered bad practice.

Also, since this is a UI library, it should not override browser defaults. If, for some reason, you really need to prevent the user from navigating back on back button click, you would implement that on your own, but that is unrelated to specific component default behaviors, and that's not something a UI library should implement by default anyway.

I'd suggest closing this ticket as wontfix.

Alipourzadi commented 3 days ago

It’s reasonable to not change the default behaviors of browser but it would be awesome to have a prop to control if the “back button” should navigate back (and just keep the default behavior if prop isn’t provided) because in “PWA’s” this just make a hell of a difference for user experience and make the user interactions much more similar to a “native app”, so I would appreciate to consider this as an option.

justinformentin commented 2 days ago

The use case you're talking about it totally understandable. But I believe it's still outside the scope of shadcn. If you look at the existing components, all of them (except the sidebar and carousel) are "dumb components". Stateless, straightforward forwardRefs with some styles, as they should be. Providing an optional "close on browser back button" requires logic that should not be included in UI library presentation layer components. It's logic that should be implemented on your side - it's a use case, one of many possible, but should not be a built-in option for the above reasons.