Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to disable scrolling back to drawer trigger #512

Open
SimonVillage opened this issue Nov 19, 2024 · 3 comments
Open

Option to disable scrolling back to drawer trigger #512

SimonVillage opened this issue Nov 19, 2024 · 3 comments

Comments

@SimonVillage
Copy link

I have anchor links in my drawer which should scroll the page to a certain id / position.

On Safari the scroll does not happen if position: fixed !important! is applied to the body. A noBodyStyles={true} on the root fixes this problem but also changes the general behavior which I would like to avoid.

Another problem is that if the drawer is closed, the page will scroll back to the position where the trigger is. A preventScrollRestoration={true} does not solve the problem.

Here is an example with: <Drawer.Root preventScrollRestoration={true} noBodyStyles={true}>

Screen.Recording.2024-11-19.at.15.08.26.mov
@Janfrancisco
Copy link

Hi there.
I'm facing similar problem.
Do you could get the solution to the bug above?

@mmrxia
Copy link

mmrxia commented Jan 9, 2025

@SimonVillage @Janfrancisco

onOpenChange={(_open) => {
if (_open) {
document.documentElement.style.position = 'fixed';
document.documentElement.style.top = 100px;
document.documentElement.style.width = 100%;
} else {
document.documentElement.style.removeProperty('position');
document.documentElement.style.removeProperty('top');
document.documentElement.style.removeProperty('width');
document.documentElement.scrollTop = "100px";
}
}}

@jmbastidas
Copy link

So previous code does not work for me, instead I found another way, which is patching @radix-ui/react-dialog (usingpatch-package ) to modify the line that send the focus back to the trigger: https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/Dialog.tsx#L278C11-L278C47

So the line is modified from:

context.triggerRef.current?.focus();

To:

context.triggerRef.current?.focus({ preventScroll: true });

That solves the problem for me.

As an additional note I tested the dialog alone and the issue does not happen, only happens with the drawer, I guess it must be a combination of context.triggerRef.current?.focus(); and something else happening on the drawer that I cannot decipher yet.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants