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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions