Ensure Form contains splat portion of pathname when no action is specified

.changeset/splat-form-action.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Ensure `<Form>` default action contains splat portion of pathname when no `action` is specified

package.json

@@ -119,10 +119,10 @@
       "none": "17.6 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "13.6 kB"
+      "none": "13.65 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "19.9 kB"
+      "none": "19.95 kB"
     }
   }
 }

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -2894,7 +2894,7 @@ function testDomRouter(
           let { container } = render(<RouterProvider router={router} />);
 
           expect(container.querySelector("form")?.getAttribute("action")).toBe(
-            "/foo?a=1"
+            "/foo/bar?a=1"
           );
         });
 
@@ -2937,6 +2937,44 @@ function testDomRouter(
             "/foo"
           );
         });
+
+        it("includes splat portion of path when no action is specified (inline splat)", async () => {
+          let router = createTestRouter(
+            createRoutesFromElements(
+              <Route path="/">
+                <Route path="foo">
+                  <Route path="*" element={<NoActionComponent />} />
+                </Route>
+              </Route>
+            ),
+            {
+              window: getWindow("/foo/bar/baz"),
+            }
+          );
+          let { container } = render(<RouterProvider router={router} />);
+
+          expect(container.querySelector("form")?.getAttribute("action")).toBe(
+            "/foo/bar/baz"
+          );
+        });
+
+        it("includes splat portion of path when no action is specified (nested splat)", async () => {
+          let router = createTestRouter(
+            createRoutesFromElements(
+              <Route path="/">
+                <Route path="foo/*" element={<NoActionComponent />} />
+              </Route>
+            ),
+            {
+              window: getWindow("/foo/bar/baz"),
+            }
+          );
+          let { container } = render(<RouterProvider router={router} />);
+
+          expect(container.querySelector("form")?.getAttribute("action")).toBe(
+            "/foo/bar/baz"
+          );
+        });
       });
 
       it("allows user to specify search params and hash", async () => {

packages/react-router-dom/index.tsx

@@ -1188,18 +1188,20 @@ export function useFormAction(
   let { basename } = React.useContext(NavigationContext);
   let routeContext = React.useContext(RouteContext);
   invariant(routeContext, "useFormAction must be used inside a RouteContext");
+  let location = useLocation();
 
   let [match] = routeContext.matches.slice(-1);
   // Shallow clone path so we can modify it below, otherwise we modify the
   // object referenced by useMemo inside useResolvedPath
-  let path = { ...useResolvedPath(action ? action : ".", { relative }) };
+  let path = {
+    ...useResolvedPath(action != null ? action : location.pathname, {
+      relative,
+    }),
+  };
 
-  // Previously we set the default action to ".". The problem with this is that
-  // `useResolvedPath(".")` excludes search params of the resolved URL. This is
-  // the intended behavior of when "." is specifically provided as
-  // the form action, but inconsistent w/ browsers when the action is omitted.
+  // If no action was specified, browsers will persist current search params
+  // when determining the path, so match that behavior
   // https://github.com/remix-run/remix/issues/927
-  let location = useLocation();
   if (action == null) {
     // Safe to write to this directly here since if action was undefined, we
     // would have called useResolvedPath(".") which will never include a search