Fix capability form submission contracts

Author: JoviDeCroock

packages/framework/src/runtime-hooks.ts

@@ -242,25 +242,43 @@ export function Form<TName extends string = string>(props: FormProps<TName>) {
         return;
       }
 
+      const submitter =
+        typeof SubmitEvent !== "undefined" && event instanceof SubmitEvent ? event.submitter : null;
+      const nativeSubmitter =
+        (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) &&
+        submitter.form === form
+          ? submitter
+          : undefined;
+
       if (capability) {
         event.preventDefault();
-        clearPrefetchCache();
         const endpoint = actionAttribute ?? form.action;
-        const formData = new FormData(form);
+        const formData = new FormData(form, nativeSubmitter);
+
+        if (schema) {
+          const result = await validateStandardSchema(schema, formDataToRecord(formData), "body");
+          if (result.issues) {
+            onValidationIssues?.(result.issues);
+            return;
+          }
+        }
+
+        clearPrefetchCache();
         // Expose the in-flight submission through useNavigation().
         const navigationToken = beginSubmittingNavigation(
           createNavigationLocation(endpoint),
           formData,
         );
         let envelope: CapabilityEnvelope;
+        let response: Response | undefined;
         try {
-          const response = await fetch(endpoint, {
+          response = await fetch(endpoint, {
             method: "POST",
             body: formData,
             credentials: "same-origin",
           });
           try {
-            envelope = (await response.json()) as CapabilityEnvelope;
+            envelope = (await response.clone().json()) as CapabilityEnvelope;
           } catch {
             envelope = {
               ok: false,
@@ -282,6 +300,9 @@ export function Form<TName extends string = string>(props: FormProps<TName>) {
           settleNavigation(navigationToken);
         }
 
+        if (response) {
+          onResponse?.(response);
+        }
         if (envelope.ok) {
           form.reset();
         }
@@ -297,13 +318,6 @@ export function Form<TName extends string = string>(props: FormProps<TName>) {
         return;
       }
 
-      const submitter =
-        typeof SubmitEvent !== "undefined" && event instanceof SubmitEvent ? event.submitter : null;
-      const nativeSubmitter =
-        (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) &&
-        submitter.form === form
-          ? submitter
-          : undefined;
       const submitterMethod = nativeSubmitter?.getAttribute("formmethod") || undefined;
       const formMethod = (submitterMethod ?? method ?? form.method ?? "post").toUpperCase();
       const isSafeMethod = SAFE_METHODS.has(formMethod);

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

@@ -176,6 +176,80 @@ describe("<Form> validation", () => {
     expect(body.get("action")).toBe("save");
   });
 
+  it("validates capability forms before submitting", async () => {
+    const issues: ApiValidationIssue[][] = [];
+
+    render(
+      h(
+        Form,
+        {
+          capability: "items.create",
+          schema: nameSchema,
+          onValidationIssues: (found) => issues.push(found),
+        },
+        h("input", { name: "name", value: "" }),
+      ),
+      root,
+    );
+
+    await submit();
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(issues).toEqual([[{ in: "body", message: "Name is required", path: ["name"] }]]);
+  });
+
+  it("includes the clicked button value in capability submissions", async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(JSON.stringify({ ok: true, data: {} }), {
+        headers: { "content-type": "application/json" },
+      }),
+    );
+
+    render(
+      h(Form, { capability: "items.save" }, h("button", { name: "action", value: "save" }, "Save")),
+      root,
+    );
+
+    const form = root.querySelector("form")!;
+    const button = root.querySelector("button")!;
+    form.dispatchEvent(
+      new SubmitEvent("submit", { bubbles: true, cancelable: true, submitter: button }),
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const body = fetchSpy.mock.calls[0][1].body as FormData;
+    expect(body.get("action")).toBe("save");
+  });
+
+  it("keeps capability response bodies readable in onResponse", async () => {
+    const responseBody = { ok: true, data: { created: "pracht" } };
+    fetchSpy.mockResolvedValue(
+      new Response(JSON.stringify(responseBody), {
+        status: 201,
+        headers: { "content-type": "application/json" },
+      }),
+    );
+    const responses: Response[] = [];
+
+    render(
+      h(
+        Form,
+        {
+          capability: "items.create",
+          onResponse: (response) => responses.push(response),
+        },
+        h("input", { name: "name", value: "pracht" }),
+      ),
+      root,
+    );
+
+    await submit();
+
+    expect(responses).toHaveLength(1);
+    expect(responses[0].status).toBe(201);
+    await expect(responses[0].json()).resolves.toEqual(responseBody);
+  });
+
   it("uses the clicked button's formaction for enhanced submissions", async () => {
     fetchSpy.mockResolvedValue(new Response(null, { status: 200 }));