-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
Description
Bug report
Current Behavior
When navigating away from a page via a Link inside a Dialog, the scroll lock (overflow: hidden on body) persists. When returning to the original page, scrolling is broken.
Steps to reproduce:
On Page A, open a Dialog
Click a Link inside the Dialog to navigate to Page B
On Page B, click a Link to navigate back to Page A
Result: Page A has overflow: hidden on body and cannot be scrolled
After these steps, document.body.style.overflow returns "hidden" and body has data-scroll-locked="1" attribute.
Expected behavior
The scroll lock should be properly removed when the Dialog unmounts during navigation.
Reproducible example
// Page A - Dialog with Link
<Dialog>
<Dialog.Trigger asChild>
<Button>Open Dialog</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Close asChild>
<Button asChild>
<Link to="/page-b">Go to Page B</Link>
</Button>
</Dialog.Close>
</Dialog.Content>
</Dialog>
// Page B - Link back to Page A
<Link to="/page-a">Back to Page A</Link>
// After clicking this, Page A cannot scrollSuggested solution / Workaround
// router.tsx
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { useEffect } from "react";
const cleanupDialogScrollLock = () => {
document.body.style.overflow = "";
document.body.style.pointerEvents = "";
document.body.removeAttribute("data-scroll-locked");
};
const router = createRouter({ routeTree });
const Router = () => {
useEffect(() => {
const unsubBefore = router.subscribe("onBeforeNavigate", cleanupDialogScrollLock);
const unsubLoad = router.subscribe("onLoad", cleanupDialogScrollLock);
return () => {
unsubBefore();
unsubLoad();
};
}, []);
return <RouterProvider router={router} />;
};Your environment
| Software | Version |
|---|---|
| radix-ui | 1.1.3 |
| react | 18.2.0 |
| @tanstack/react-router | 1.132.6 |
| Browser | Chrome |
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels