Skip to content

[Dialog] Scroll lock (overflow: hidden) persists after navigating away via Link inside Dialog #3797

@debarcader

Description

@debarcader

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 scroll

Suggested 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions