fix: submissions should ignore pathless layout routes (#9455)

* fix: submissions should ignore pathless layout routes

* Add changset

* bump bundle threshold

.changeset/moody-bulldogs-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Ignore pathless layout routes when looking for proper submission action function

package.json

@@ -107,7 +107,7 @@
   },
   "filesize": {
     "packages/router/dist/router.js": {
-      "none": "100 kB"
+      "none": "101 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "12.5 kB"

packages/router/__tests__/router-test.ts

@@ -2859,6 +2859,56 @@ describe("a router", () => {
       });
     });
 
+    it("uses the proper action for pathless layout routes", async () => {
+      let t = setup({
+        routes: [
+          {
+            id: "parent",
+            path: "/parent",
+            action: true,
+            children: [
+              {
+                hasErrorBoundary: true,
+                children: [
+                  {
+                    id: "index",
+                    index: true,
+                    action: true,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+      debugger;
+      let A = await t.navigate("/parent", {
+        formMethod: "post",
+        formData: createFormData({ gosh: "dang" }),
+      });
+      await A.actions.parent.resolve("PARENT");
+      expect(t.router.state).toMatchObject({
+        location: { pathname: "/parent" },
+        actionData: {
+          parent: "PARENT",
+        },
+        errors: null,
+      });
+
+      let B = await t.navigate("/parent?index", {
+        formMethod: "post",
+        formData: createFormData({ gosh: "dang" }),
+      });
+      await B.actions.index.resolve("INDEX");
+      expect(t.router.state).toMatchObject({
+        location: { pathname: "/parent", search: "?index" },
+        actionData: {
+          index: "INDEX",
+        },
+        errors: null,
+      });
+    });
+
     it("retains the index match when submitting to a layout route", async () => {
       let t = setup({
         routes: [

packages/router/router.ts

@@ -25,6 +25,7 @@ import {
   ErrorResponse,
   ResultType,
   convertRoutesToDataRoutes,
+  getPathContributingMatches,
   invariant,
   isRouteErrorResponse,
   matchRoutes,
@@ -2838,11 +2839,15 @@ function getTargetMatch(
     typeof location === "string" ? parsePath(location).search : location.search;
   if (
     matches[matches.length - 1].route.index &&
-    !hasNakedIndexQuery(search || "")
+    hasNakedIndexQuery(search || "")
   ) {
-    return matches.slice(-2)[0];
+    // Return the leaf index route when index is present
+    return matches[matches.length - 1];
   }
-  return matches.slice(-1)[0];
+  // Otherwise grab the deepest "path contributing" match (ignoring index and
+  // pathless layout routes)
+  let pathMatches = getPathContributingMatches(matches);
+  return pathMatches[pathMatches.length - 1];
 }
 
 function createURL(location: Location | string): URL {

packages/router/utils.ts

@@ -835,6 +835,38 @@ function getInvalidPathError(
   );
 }
 
+/**
+ * When processing relative navigation we want to ignore ancestor routes that
+ * do not contribute to the path, such that index/pathless layout routes don't
+ * interfere.
+ *
+ * For example, when moving a route element into an index route and/or a
+ * pathless layout route, relative link behavior contained within should stay
+ * the same.  Both of the following examples should link back to the root:
+ *
+ *   <Route path="/">
+ *     <Route path="accounts" element={<Link to=".."}>
+ *   </Route>
+ *
+ *   <Route path="/">
+ *     <Route path="accounts">
+ *       <Route element={<AccountsLayout />}>       // <-- Does not contribute
+ *         <Route index element={<Link to=".."} />  // <-- Does not contribute
+ *       </Route
+ *     </Route>
+ *   </Route>
+ */
+export function getPathContributingMatches<
+  T extends AgnosticRouteMatch = AgnosticRouteMatch
+>(matches: T[]) {
+  return matches.filter(
+    (match, index) =>
+      index === 0 ||
+      (!match.route.index &&
+        match.pathnameBase !== matches[index - 1].pathnameBase)
+  );
+}
+
 /**
  * @private
  */