fix: avoid duplicating index param on submissions (#4000)

* fix: avoid duplicating index param on submissions * change approach
remix-run · Aug 17, 2022 · 874f159 · 874f159
1 parent 5e44bf0
commit 874f159
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/integration/form-test.ts b/integration/form-test.ts
@@ -185,6 +185,9 @@ test.describe("Forms", () => {
 
         "app/routes/blog/index.jsx": js`
           import { Form } from "@remix-run/react";
+          export function action() {
+            return { ok: true };
+          }
           export default function() {
             return (
               <>
@@ -616,6 +619,27 @@ test.describe("Forms", () => {
         let el = getElement(html, `#${INDEX_ROUTE_TOO_MANY_DOTS_ACTION}`);
         expect(el.attr("action")).toMatch("/");
       });
+
+      test("does not repeatedly add index params on submissions", async ({
+        page,
+      }) => {
+        let app = new PlaywrightFixture(appFixture, page);
+        await app.goto("/blog");
+        let html = await app.getHtml();
+        let el = getElement(html, `#${INDEX_ROUTE_NO_ACTION}`);
+        expect(el.attr("action")).toBe("/blog?index");
+        expect(app.page.url()).toMatch(/\/blog$/);
+
+        await app.clickElement(`#${INDEX_ROUTE_NO_ACTION} button`);
+        el = getElement(html, `#${INDEX_ROUTE_NO_ACTION}`);
+        expect(el.attr("action")).toBe("/blog?index");
+        expect(app.page.url()).toMatch(/\/blog\?index$/);
+
+        await app.clickElement(`#${INDEX_ROUTE_NO_ACTION} button`);
+        el = getElement(html, `#${INDEX_ROUTE_NO_ACTION}`);
+        expect(el.attr("action")).toBe("/blog?index");
+        expect(app.page.url()).toMatch(/\/blog\?index$/);
+      });
     });
 
     test.describe("in a layout route", () => {

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -816,7 +816,7 @@ import * as route${index} from ${JSON.stringify(
 window.__remixRouteModules = {${matches
       .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
       .join(",")}};
-      
+
 import(${JSON.stringify(manifest.entry.module)});`;
 
     return (
@@ -1022,12 +1022,22 @@ export function useFormAction(
   // https://github.com/remix-run/remix/issues/927
   let location = useLocation();
   let { search, hash } = resolvedPath;
+  let isIndexRoute = id.endsWith("/index");
+
   if (action == null) {
     search = location.search;
     hash = location.hash;
+
+    // When grabbing search params from the URL, remove the automatically
+    // inserted ?index param so we match the useResolvedPath search behavior
+    // which would not include ?index
+    if (isIndexRoute) {
+      let params = new URLSearchParams(search);
+      params.delete("index");
+      search = params.toString() ? `?${params.toString()}` : "";
+    }
   }
 
-  let isIndexRoute = id.endsWith("/index");
   if ((action == null || action === ".") && isIndexRoute) {
     search = search ? search.replace(/^\?/, "?index&") : "?index";
   }