useFetcher().Form always scrolls to the top on submit, Form doesn't

[itsMapleLeaf]

What version of Remix are you using?

1.7.2

Steps to Reproduce

git clone https://github.com/itsMapleLeaf/remix-fetcher-scrolls-to-top
cd remix-fetcher-scrolls-to-top
pnpm install
pnpm dev

Scroll down a bit, and see the difference in behavior between <Form> and the fetcher form

Expected Behavior

The fetcher form shouldn't scroll to the top. Ideally, the behavior should be configurable

Actual Behavior

The fetcher form scrolls to the top

[emilbryggare]

Same for me, I created a repo similar to @itsMapleLeaf before I found this issue. I expanded on it a bit more submitting with either Form, useSubmit, fetcher.Form and fetcher.submit and returning either json or redirect from the action.

What version of Remix are you using?

1.7.6

Steps to Reproduce

git clone https://github.com/emilbryggare/remix-fetcher-scrolls-to-top-2
cd remix-fetcher-scrolls-to-top-2
npm install
npm dev
Scroll down a bit, and see the difference in behavior when submitting with either Form, useSubmit, fetcher.Form and fetcher.submit and returning either json or redirect from the action.

Expected Behavior

The fetcher.form and fetcher.submit shouldn't scroll to the top. Ideally, the behavior should be configurable

Actual Behavior

The fetcher.form and fetcher.submit scrolls to the top

[machour]

@itsMapleLeaf Thank you for opening this issue 🍁
I think it's the same as #3145, but I'm keeping both open for the repros here.

@emilbryggare Can you try again with #3165 applied and see if everything works as expected? 🙏🏼

[emilbryggare]

@machour Sure! After applying the patch (in version 1.7.6), all scenarios in my reproduction worked as expected. 👍

[brophdawg11]

By default scroll position will be reset on action submissions if the submission redirects, since it's sending you to a "new" location. You can disable this via the preventScrollReset prop on Form/fetcher.Form.

Related: remix-run/react-router#9886