Respect preventScrollReset on fetcher.Form (#9963)

* Respect preventScrollReset on fetcher.Form

* Add preventScrollReset to form docs

.changeset/chilly-stingrays-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/router": patch
+"react-router-dom": patch
+---
+
+Respect `preventScrollReset` on `fetcher.Form`

docs/components/form.md

@@ -215,6 +215,16 @@ See also:
 - [`useActionData`][useactiondata]
 - [`useSubmit`][usesubmit]
 
+## `preventScrollReset`
+
+If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you prevent the scroll position from being reset to the top of the window when the form action redirects to a new location.
+
+```tsx
+<Form method="post" preventScrollReset={true} />
+```
+
+See also: [`<Link preventScrollReset>`][link-preventscrollreset]
+
 # Examples
 
 TODO: More examples
@@ -318,3 +328,5 @@ You can access those values from the `request.url`
 [formvalidation]: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
 [indexsearchparam]: ../guides/index-search-param
 [pickingarouter]: ../routers/picking-a-router
+[scrollrestoration]: ./scroll-restoration
+[link-preventscrollreset]: ./link#preventscrollreset

docs/components/scroll-restoration.md

@@ -83,13 +83,14 @@ Or you may want to only use the pathname for some paths, and use the normal beha
 
 ## Preventing Scroll Reset
 
-When navigation creates new scroll keys, the scroll position is reset to the top of the page. You can prevent the "scroll to top" behavior from your links:
+When navigation creates new scroll keys, the scroll position is reset to the top of the page. You can prevent the "scroll to top" behavior from your links and forms:
 
 ```tsx
 <Link preventScrollReset={true} />
+<Form preventScrollReset={true} />
 ```
 
-See also: [`<Link preventScrollReset>`][preventscrollreset]
+See also: [`<Link preventScrollReset>`][preventscrollreset], [`<Form preventScrollReset>`][form-preventscrollreset]
 
 ## Scroll Flashing
 
@@ -99,4 +100,5 @@ Server Rendering frameworks can prevent scroll flashing because they can send a
 
 [remix]: https://remix.run
 [preventscrollreset]: ../components/link#preventscrollreset
+[form-preventscrollreset]: ../components/form#preventscrollreset
 [pickingarouter]: ../routers/picking-a-router

packages/router/__tests__/router-test.ts

@@ -6702,6 +6702,37 @@ describe("a router", () => {
           expect(t.router.state.restoreScrollPosition).toBe(null);
           expect(t.router.state.preventScrollReset).toBe(false);
         });
+
+        it("resets on fetch submissions that redirect", async () => {
+          let t = setup({
+            routes: SCROLL_ROUTES,
+            initialEntries: ["/tasks"],
+            hydrationData: {
+              loaderData: {
+                tasks: "TASKS",
+              },
+            },
+          });
+
+          expect(t.router.state.restoreScrollPosition).toBe(false);
+          expect(t.router.state.preventScrollReset).toBe(false);
+
+          let positions = {};
+          let activeScrollPosition = 0;
+          t.router.enableScrollRestoration(
+            positions,
+            () => activeScrollPosition
+          );
+
+          let nav1 = await t.fetch("/tasks", {
+            formMethod: "post",
+            formData: createFormData({}),
+          });
+          let nav2 = await nav1.actions.tasks.redirectReturn("/tasks");
+          await nav2.loaders.tasks.resolve("TASKS 2");
+          expect(t.router.state.restoreScrollPosition).toBe(null);
+          expect(t.router.state.preventScrollReset).toBe(false);
+        });
       });
 
       describe("user-specified flag preventScrollReset flag", () => {
@@ -6823,6 +6854,38 @@ describe("a router", () => {
           expect(t.router.state.restoreScrollPosition).toBe(null);
           expect(t.router.state.preventScrollReset).toBe(true);
         });
+
+        it("prevents scroll reset on fetch submissions that redirect", async () => {
+          let t = setup({
+            routes: SCROLL_ROUTES,
+            initialEntries: ["/tasks"],
+            hydrationData: {
+              loaderData: {
+                tasks: "TASKS",
+              },
+            },
+          });
+
+          expect(t.router.state.restoreScrollPosition).toBe(false);
+          expect(t.router.state.preventScrollReset).toBe(false);
+
+          let positions = {};
+          let activeScrollPosition = 0;
+          t.router.enableScrollRestoration(
+            positions,
+            () => activeScrollPosition
+          );
+
+          let nav1 = await t.fetch("/tasks", {
+            formMethod: "post",
+            formData: createFormData({}),
+            preventScrollReset: true,
+          });
+          let nav2 = await nav1.actions.tasks.redirectReturn("/tasks");
+          await nav2.loaders.tasks.resolve("TASKS 2");
+          expect(t.router.state.restoreScrollPosition).toBe(null);
+          expect(t.router.state.preventScrollReset).toBe(true);
+        });
       });
     });
   });

packages/router/router.ts

@@ -1507,6 +1507,8 @@ export function createRouter(init: RouterInit): Router {
     let { path, submission } = normalizeNavigateOptions(href, opts, true);
     let match = getTargetMatch(matches, path);
 
+    pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
+
     if (submission && isMutationMethod(submission.formMethod)) {
       handleFetcherAction(key, routeId, path, match, matches, submission);
       return;