Scroll to top on route change doesn't work without reloadDocument

[Maks19]

Trying to have the browser scroll to the top upon moving to next page using redirect. It is preserving the scroll position.
I added ScrollRestoration to the root.
Using 1.2.3 remix version.

You can check it in codesandbox example

1. Go to codesandbox
2. Scroll to the bottom
3. Click Submit button

Example - https://codesandbox.io/s/fast-violet-tfdcm8

reloadDocument prop in Form resolves this problem. Is it okay to use it for this?

[kiliman]

It's these lines in the <ScrollRestoration/> component that makes it not work.

remix/packages/remix-react/scroll-restoration.tsx

Lines 119 to 123 in f8857a2

	// don't do anything on submissions
	if (wasSubmissionRef.current === true) {
	wasSubmissionRef.current = false;
	return;
	}

I imagine it's there so when you're doing submit using useFetcher you typically don't want the page to scroll. However, this does break full page submits.

For now, I simply copied the code into my project and removed those lines.

NOTE: I would not use reloadDocument unless absolutely necessary, as this causes a full page load (downloads HTML, CSS, JavaScript, etc.) instead of just calling your action.

[Maks19]

Thank you for quick answer!
Unfortunately it didn't work for me.
It looks like I don't pass this conditional, so all my changes in If do anything

[matt-kinton]

I think I added a failing test for this a while ago here. I am also doing the same as @kiliman, rolling my own <ScrollRestoration /> component until it's fixed.

[kiliman]

Yeah, I think regular <Form> and <Link> should always scroll to top, since that's standard browser behavior. If you want to stay at the current position, then you should use <fetcher.Form>.

[Maks19]

okay got it
so waiting for fix :)