ScrollRestoration doesn't go to top after GET form submission

[gaetansnl]

What version of Remix are you using?

1.2.3

Steps to Reproduce

• Go here https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/search-input
• Type "breaking" in the input
• Press Enter
• Add " bad" to the input
• Scroll to the bottom of the page
• Press "Enter"

Expected Behavior

The scroll goes to the top of the page

Actual Behavior

The scroll stays at bottom

Current workaround :

• Copy past ScrollRestoration source
• Remove the two useEffect with wasSubmissionRef.current = true;
• Replace the Remix exported ScrollRestoration with custom ScrollRestoration

I guess this workaround might break other behaviors

[niftytyro]

This isn't really a remix issue. Even if you build this app with plain react, you will find it sticking to its place. The thing is, you are using a <Form /> and it uses javascript to fetch and updates your page, its not navigating or refreshing on submission. If you still want this behavior, you can do 2 things in your app:

1. Pass a function to onSubmit in <Form /> which scrolls back to the top on submission.
2. Or, you can simply use <form /> which will make sure that user navigates to a new page everytime they search - not recommended way

[niftytyro]

Think of <Form /> as Remix's way of abstracting the logic for fetching data and updating things :)

[gaetansnl]

Thank you for your answer. I posted this example because it was minimal. But the problem also exists when navigating between different pages with different search params.

[niftytyro]

I just tried this:

1. Search a
2. scroll down to bottom
3. change url to -> http://localhost:3000/?search=b and hit enter

This worked and the scroll position was restored to 0. Are you talking about something else?

[kiliman]

I tried your repro steps on codesandbox and Remix worked correctly. Pressing enter on form while scrolled to the bottom moved to top.

[niftytyro]

I could reproduce the reported behavior though.

[gaetansnl]

The screen recording is on Firefox Windows. Here is the same problem across different pages. I'm on a page, search something new, when the route change back to the result list, it scrolls at the bottom.

[niftytyro]

Can you share a minimal example for this?

[IanWitham]

Here's the TV example with a "sticky" search bar to make the problem easier to see: CodeSandbox

Steps to reproduce:

1. Search cat.
2. Scroll to bottom of results
3. Search dog.
4. Notice the scroll has not been restored
5. Scroll to the bottom of the results
6. Change the search to "fish" in the url and press enter
7. Notice that when the page reloads the scroll has restored to the top (!)
8. Scroll to the bottom of the page and click the link (it's a Remix Link component)
9. Notice that the scroll has now been restored
10. Wonder why a get submission and a link with url parameters should behave differently.

The point of the ScrollRestoration component should be to emulate the browser behaviour exhibited in step 6, is it not?

[SleeplessByte]

This also happens with POST method.

[brophdawg11]

This should be fixed now as the underlying ScrollRestoration component in react-router-dom differentiates between <Form> GET/POST submissions and should be resetting scroll on GET submissions. I tested Remix 1.11.1 on the above CodeSandbox and it worked as expected.