Fix capability form redirect navigation

Author: JoviDeCroock

.changeset/capability-form-verification-followups.md

@@ -5,5 +5,5 @@
 
 Keep capability forms and static verification consistent across framework surfaces:
 
-- **`@pracht/core`**: enhanced `<Form capability>` submissions now honor a clicked submitter's `formaction` and navigate redirects returned by capability middleware, matching the form's no-JavaScript behavior.
+- **`@pracht/core`**: enhanced `<Form capability>` submissions now honor a clicked submitter's `formaction` and follow redirects returned by capability middleware to their final browser URL, matching the form's no-JavaScript behavior.
 - **`@pracht/cli`**: `pracht verify` rejects primitive and array `expose` values instead of reporting a complete exposed contract, and correctly describes an empty exposure object as private.

e2e/capabilities.test.ts

@@ -102,6 +102,29 @@ test("<Form capability> creates a note through the capability endpoint and auto-
   await expect(page.locator('[data-testid="notes-list"]')).toContainText("A browser note");
 });
 
+test("<Form capability> follows endpoint redirects in the browser", async ({ page }) => {
+  const endpointMethods: string[] = [];
+  page.on("request", (request) => {
+    if (new URL(request.url()).pathname === "/api/dashboard") {
+      endpointMethods.push(request.method());
+    }
+  });
+
+  await page.goto("/notes");
+  await expect(page.locator('[data-testid="create-note-form"]')).toHaveAttribute(
+    "data-hydrated",
+    "true",
+  );
+  await page
+    .locator('[data-testid="create-note-form"] button')
+    .evaluate((button) => button.setAttribute("formaction", "/api/dashboard?redirect=1"));
+  await page.fill('[data-testid="create-note-form"] input[name="title"]', "Redirect me");
+  await page.click('[data-testid="create-note-form"] button');
+
+  await expect(page).toHaveURL("/");
+  expect(endpointMethods).toEqual(["POST"]);
+});
+
 test("no-JS form posts hit the same capability contract and redirect back", async ({ request }) => {
   // The form-encoded fallback of <Form capability>: fields are coerced onto
   // the input schema and a successful document post 303s back to the page.

examples/basic/src/api/dashboard.ts

@@ -1,3 +1,8 @@
-export async function POST() {
+import type { BaseRouteArgs } from "@pracht/core";
+
+export async function POST({ request }: BaseRouteArgs) {
+  if (new URL(request.url).searchParams.has("redirect")) {
+    return Response.redirect(new URL("/", request.url), 302);
+  }
   return Response.json({ saved: true });
 }

packages/framework/src/runtime-hooks.ts

@@ -281,13 +281,9 @@ export function Form<TName extends string = string>(props: FormProps<TName>) {
             method: "POST",
             body: formData,
             credentials: "same-origin",
-            redirect: "manual",
           });
-          if (
-            response.type === "opaqueredirect" ||
-            (response.status >= 300 && response.status < 400)
-          ) {
-            const location = response.headers.get("location");
+          if (response.redirected || (response.status >= 300 && response.status < 400)) {
+            const location = response.redirected ? response.url : response.headers.get("location");
             await navigateToClientLocation(location ?? endpoint, { reloadRouteState: true });
             return;
           }

packages/framework/test/form-validation.test.ts

@@ -308,12 +308,12 @@ describe("<Form> validation", () => {
   });
 
   it("navigates capability middleware redirects", async () => {
-    fetchSpy.mockResolvedValue(
-      new Response(null, {
-        status: 302,
-        headers: { location: "/login?returnTo=%2Fnotes" },
-      }),
-    );
+    const redirectResponse = new Response("<h1>Login</h1>");
+    Object.defineProperties(redirectResponse, {
+      redirected: { value: true },
+      url: { value: `${window.location.origin}/login?returnTo=%2Fnotes` },
+    });
+    fetchSpy.mockResolvedValue(redirectResponse);
     const navigate = vi.fn(async () => undefined);
     window.__PRACHT_NAVIGATE__ = navigate;
     const results = vi.fn();
@@ -323,7 +323,7 @@ describe("<Form> validation", () => {
 
     expect(fetchSpy).toHaveBeenCalledWith(
       "/api/capabilities/items/save",
-      expect.objectContaining({ redirect: "manual" }),
+      expect.not.objectContaining({ redirect: "manual" }),
     );
     expect(navigate).toHaveBeenCalledWith("/login?returnTo=%2Fnotes", {
       _reloadRouteState: true,