Repository navigation
scrollRestoration not working the first time #3680
Description
Which project does this relate to?
Router
Describe the bug
With scrollRestoration: true, the scroll won't get reset on first page load, but after opening another page via <Link> or similar, it will work. I think the bug might not always happen.
Your Example Website or App
https://stackblitz.com/edit/github-yeosauxb?file=src%2Fmain.tsx
Steps to Reproduce the Bug or Issue
- Open stackblitz app, scroll to the bottom of the home page (which load by default)
- Click on
Click Me - It should open the bottom of the About page, even though scrollRestoration is enabled
- If the top of the About page opens, try again by going to the home page, refreshing the app, and repeating the steps above
Expected behavior
I expect the page I just navigated to to start from the top, but instead my scroll is at the bottom.
Screenshots or Videos
router-issue-recording.mp4
Platform
- OS: WSL2
- Browser: Edge, Firefox
- Version: 1.112.13
Additional context
No response
Activity
schiller-manuel commentedon Mar 6, 2025
please provide a complete minimal example by forking one of the existing examples on stackblitz
[-]resetScroll not working the first time with StrictMode[/-][+]scrollRestoration not working the first time with StrictMode[/+]anthony2261 commentedon Mar 7, 2025
@schiller-manuel added stackblitz example, reproduction steps and a video 🤝
[-]scrollRestoration not working the first time with StrictMode[/-][+]scrollRestoration not working the first time[/+]anthony2261 commentedon Mar 7, 2025
Edited the issue: also happens with strict mode off.
Krasnopir commentedon Mar 17, 2025
i have another case, when scroll restoration does not scroll to top when i trigger navigate to the same url second and more times.
I have a button with click handler, where i make some post request to get id, and then navigate to /checkout/${id}
after history.back() and trying to press that button again i see that my checkout page is not on the top.
I find that it start from 1.112.13.
In 1.112.12 it works fine
So maybe this commit broke some logic ?
https://github.com/TanStack/router/pull/3659/files
JoshuaHD commentedon Mar 20, 2025
I can confirm the issue. @Krasnopir Thank you for pointing out the working version. I rolled back to 1.112.12 after trying the entire day way the scroll behavior was so weird and random.
Downgraded tanstack router because scroll restauration did not work. …
denys-isaichenko commentedon Apr 2, 2025
It seems like there's an issue here https://github.com/TanStack/router/blob/main/packages/react-router/src/Match.tsx#L144-L157 ,
resolvedLocationis pointing to the previous location instead of the new one in some cases when ref callback executedfix(react-router): fix issue with scroll restoration (TanStack#3918)