Skip to content

Using React Aria collections with React Router v7 breaks scroll restoration #9063

@polc

Description

@polc

Provide a general summary of the issue here

Using React Aria collections with React Router v7 breaks scroll restoration. Navigating to a page with a <ListBox /> component causes a brief flash before the list renders.

Everything works correctly if I remove React Aria components and use a simple <div /> with <a /> links. The flash prevent React Router scroll restoration from working correctly.

🤔 Expected Behavior?

There's no flash when the list renders and the scroll restoration of React Router works as expected.

🖥️ Steps to Reproduce

  1. Navigate to this sandbox : https://codesandbox.io/p/devbox/loving-leavitt-dyvqtf.
  2. Start the server and navigate to the home page, there is a <ListBox /> with 500 <ListBoxItem />.
  3. Scroll a bit the page, and click on one of the <ListBoxItem />.
  4. Press the back button of your browser.
  5. Observe the flash, and the scroll being reset to the top.

Version

react-router : 7.9.4
react-aria-components : 1.13.0

What browsers are you seeing the problem on?

Chrome, Firefox, Chromium.

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