Ability to override scroll restoration without conditionally rendering the `ScrollRestoration` component

[filipemir]

What version of Remix are you using?

1.4.0

Steps to Reproduce

Issue is reproduced here: https://codesandbox.io/s/remix-unwanted-scrolling-ljr1vb

1. Scroll down to the bottom of the page where there is a button and a link
2. Click on either the button or the link

Expected Behavior

The button and the link click is reflected in the the search param of the page's URL, and the user can continue to interact with the link or button.

Actual Behavior

The click is reflected in the page's URL but the page scrolls back tot he top, so the user has to scroll back down to continue interacting with the link or button.

This is admittedly a very contrived example, but I recently ran into this in a more realistic situation: while working on a page that has a weekly calendar as a small portion of the page. The user can change weeks by clicking on a next week or previous week button and we wanted to reflect the user's week in a search param. Each time the user changes weeks however, the page scroll back to the top.

This problem is discussed in issue #186 and several people reported being frustrated by it. The discussion resulted in a couple of suggested fixes:

• Conditionally rendering the ScrollRestoration component
• A small modification to the ScrollRestoration component suggested by @wladiston here which would allow individual links or calls to modify the page location to override/disable the scroll restoration

That issue was closed as it was only tangentially related to the actual bug. So I'd like to revive the discussion about incorporating @wladiston solution into Remix's ScrollRestoration component. There was interest from numerous people and it does seem much more workable than conditionally rendering the component.

I'm not certain whether the proposed solution is the best and clearest. I'll open a PR with it, but I welcome any suggestions about to approach this better.

[seanbruce]

Interestingly, I encountered the same unwanted scroll behavior, and I'm also building a scheduler(calendar-like, could change weeks and months) too. Moreover, at the bottom of the page, I rendered 2 levels of nested router where users can see and operate on schedule details. The problem is every time I navigate to the deeper router, the page automatically scrolls to the top, which makes me have to manually scroll to the bottom to continue my operation. To be honest, It's very inconvenient. My thought is that not only the change of search params shouldn't trigger scrolling to the top, but sometimes navigation too. I notice this issue had been around for a couple of months, has any progress on this been made?

[filipemir]

Hey @seanbruce. I think we're waiting for the new major version of react router which will, as I understand it, expose an API to handle this

[seanbruce]

@filipemir thanks 😀

[jedzej]

I also found this issue very frustrating in a scenario where I control modal visibility via search params. Every time I open the modal, the page scrolls to the top.

[megawebmaster]

In case anyone finds this issue as I did: there is an open PR that has a bit of code helping with scroll restoration issues: https://github.com/remix-run/remix/pull/2812

[machour]

@filipemir This is implemented in Remix 1.10.0, where you can use the new preventScrollReset attribute on Link: https://reactrouter.com/en/main/components/link#preventscrollreset