@cosmicdrift/kumiko-renderer-web 0.243.2 → 0.243.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.243.2",
+  "version": "0.243.3",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.243.2",
-    "@cosmicdrift/kumiko-headless": "0.243.2",
-    "@cosmicdrift/kumiko-renderer": "0.243.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.243.3",
+    "@cosmicdrift/kumiko-headless": "0.243.3",
+    "@cosmicdrift/kumiko-renderer": "0.243.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.243.2"
+    "@cosmicdrift/kumiko-locale-de": "0.243.3"
   },
   "repository": {
     "type": "git",

package/src/__tests__/projection-detail.test.tsx

@@ -8,13 +8,22 @@
 import { describe, expect, test } from "bun:test";
 import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
-import type { FeatureSchema, NavApi, NavTarget } from "@cosmicdrift/kumiko-renderer";
+import type {
+  ExtensionSectionProps,
+  FeatureSchema,
+  NavApi,
+  NavTarget,
+} from "@cosmicdrift/kumiko-renderer";
 import {
   DispatcherProvider,
   ExtensionSectionsProvider,
   KumikoScreen,
   NavProvider,
+  useDispatcher,
+  usePrimitives,
 } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { BareFormProvider } from "../primitives";
 import { act, createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
 
 const detailScreen: ProjectionDetailScreenDefinition = {
@@ -613,3 +622,211 @@ describe("KumikoScreen / projectionDetail extension section (solon#264)", () =>
     expect(screen.queryByTestId("field-userId")).toBeNull();
   });
 });
+
+// fw#2312 mounts extension sections (ExtensionSectionMount, render-edit.tsx)
+// INSIDE RenderEdit's own host <form testId="render-edit-form"> (render-edit.tsx:1059).
+// A section that renders its own <form> — the pattern ChangeEmailSection/
+// ChangePasswordSection used before fw#2703 via BareFormProvider — used to
+// produce two nested <form> elements, invalid DOM that let real browsers
+// silently degrade the inner submit into a native GET navigation of the
+// OUTER form (offlot-app e2e, currentPassword leaked into the URL). fw#2705
+// fixes the cause in DefaultForm (primitives/index.tsx): it degrades to a
+// <div> whenever InsideFormContext says it is already nested in a form, and
+// intercepts a click on its own submit button (onClickCapture +
+// preventDefault) instead of relying on the browser to associate the button
+// with a form. The tests below assert that structurally (exactly one
+// <form>) and prove the degraded section's own submit still reaches its
+// dispatcher, without depending on the button-to-form association the
+// removed nested <form> used to rely on.
+describe("KumikoScreen / projectionDetail extension section with its own <form> (fw#2312/fw#2705 nested-form regression)", () => {
+  function FormExtensionSection({ entityId }: ExtensionSectionProps): ReactNode {
+    const dispatcher = useDispatcher();
+    const { Form, Button } = usePrimitives();
+    const onSubmit = (): void => {
+      void dispatcher.write("sessions:write:user-session:update", {
+        id: entityId,
+        note: "updated",
+      });
+    };
+    return (
+      <BareFormProvider>
+        <Form
+          testId="nested-section-form"
+          onSubmit={onSubmit}
+          actions={
+            <Button type="submit" testId="nested-section-submit">
+              Save note
+            </Button>
+          }
+        >
+          <div data-testid="nested-section-marker" />
+        </Form>
+      </BareFormProvider>
+    );
+  }
+
+  test("mounted through KumikoScreen -> ProjectionDetailBody -> RenderEdit, the section's own form degrades to a <div> so only one <form> lands in the DOM", async () => {
+    const extensionScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          ...detailScreen.layout.sections,
+          {
+            kind: "extension",
+            title: "Note",
+            component: { react: { __component: "FormExtensionSection" } },
+            entityName: "user-session",
+          },
+        ],
+      },
+    };
+    const extensionSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [extensionScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const { container } = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ FormExtensionSection }}>
+          <KumikoScreen
+            schema={extensionSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("nested-section-form"));
+    // Structural proof of the fix: RenderEdit renders one
+    // <form testId="render-edit-form"> around the whole screen. The
+    // nested section's own <Form> (still wrapped in BareFormProvider) must
+    // degrade to a <div> (FormRoot, primitives/index.tsx) instead of
+    // adding a second <form>.
+    expect(container.querySelectorAll("form")).toHaveLength(1);
+  });
+
+  test("clicking the nested section's own submit button dispatches its write, even though FormRoot degraded its <Form> to a <div>", async () => {
+    const writes: Array<{ type: string; payload: unknown }> = [];
+    const extensionScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          ...detailScreen.layout.sections,
+          {
+            kind: "extension",
+            title: "Note",
+            component: { react: { __component: "FormExtensionSection" } },
+            entityName: "user-session",
+          },
+        ],
+      },
+    };
+    const extensionSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [extensionScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+      write: (async (type: string, payload: unknown) => {
+        writes.push({ type, payload });
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ FormExtensionSection }}>
+          <KumikoScreen
+            schema={extensionSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("nested-section-submit"));
+    fireEvent.click(screen.getByTestId("nested-section-submit"));
+
+    await waitFor(() => {
+      if (writes.length === 0) throw new Error("no write dispatched yet");
+    });
+    expect(writes[0]).toEqual({
+      type: "sessions:write:user-session:update",
+      payload: { id: "sess-1", note: "updated" },
+    });
+  });
+
+  // Complements the dispatch test above: with the section's own <Form>
+  // degraded to a <div>, its submit button sits inside the SAME real <form>
+  // as render-edit-form. Without FormRoot's onClickCapture + preventDefault,
+  // activating that type="submit" button would fire the OUTER form's native
+  // submit instead of routing to the section's onSubmit — the exact fw#2705
+  // hazard the nested-<form> version produced, just surfacing here as a
+  // wrong dispatch target rather than a URL GET (the dispatch test above
+  // cannot tell the two apart: RenderEdit's own handleSubmit is a no-op for
+  // this readOnly projectionDetail screen either way).
+  test("clicking the nested section's own submit button does not also fire a native submit on the outer host <form>", async () => {
+    const extensionScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          ...detailScreen.layout.sections,
+          {
+            kind: "extension",
+            title: "Note",
+            component: { react: { __component: "FormExtensionSection" } },
+            entityName: "user-session",
+          },
+        ],
+      },
+    };
+    const extensionSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [extensionScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const { container } = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ FormExtensionSection }}>
+          <KumikoScreen
+            schema={extensionSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("nested-section-submit"));
+    const outerForm = container.querySelector('[data-testid="render-edit-form"]');
+    expect(outerForm).not.toBeNull();
+    let outerSubmitFired = false;
+    outerForm?.addEventListener("submit", () => {
+      outerSubmitFired = true;
+    });
+
+    fireEvent.click(screen.getByTestId("nested-section-submit"));
+
+    expect(outerSubmitFired).toBe(false);
+  });
+});

package/src/primitives/index.tsx

@@ -2063,6 +2063,59 @@ export function ScreenWidthProvider({
   return <ScreenWidthContext.Provider value={width}>{children}</ScreenWidthContext.Provider>;
 }
 
+// Extension sections that render their own <form> via BareFormProvider
+// (legacy custom-form pattern, e.g. ChangeEmailSection before fw#2703) land
+// inside RenderEdit's host <form> (ExtensionSectionMount, render-edit.tsx) —
+// nested <form> elements are invalid DOM, and real browsers can silently
+// fall back to a native GET submit of the OUTER form, leaking field values
+// into the URL (fw#2312, fw#2705). Degrading to a <div> when already inside
+// a form avoids the nesting; the captured click still routes to THIS form's
+// onSubmit instead of activating the real ancestor <form>.
+function FormRoot({
+  onSubmit,
+  testId,
+  className,
+  children,
+}: {
+  readonly onSubmit: FormProps["onSubmit"];
+  readonly testId?: string;
+  readonly className?: string;
+  readonly children: ReactNode;
+}): ReactNode {
+  if (useContext(InsideFormContext)) {
+    return (
+      <div
+        onClickCapture={(e) => {
+          // @cast-boundary dom-event-target: closest() needs an Element, and
+          // click targets are always one in the browser/happy-dom.
+          const submitButton = (e.target as HTMLElement).closest(
+            "button[type=submit], button:not([type])",
+          );
+          if (submitButton === null) return;
+          e.preventDefault();
+          onSubmit();
+        }}
+        data-testid={testId}
+        className={className}
+      >
+        {children}
+      </div>
+    );
+  }
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit(e);
+      }}
+      data-testid={testId}
+      className={className}
+    >
+      {children}
+    </form>
+  );
+}
+
 function DefaultForm({
   onSubmit,
   children,
@@ -2079,12 +2132,9 @@ function DefaultForm({
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
   if (useContext(BareFormContext)) {
     return (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          onSubmit(e);
-        }}
-        data-testid={testId}
+      <FormRoot
+        onSubmit={onSubmit}
+        testId={testId}
         className={cn(
           "flex flex-col gap-4",
           // Bare forms stack sections without a card; without a divider a
@@ -2099,7 +2149,7 @@ function DefaultForm({
             {actions}
           </div>
         )}
-      </form>
+      </FormRoot>
     );
   }
 
@@ -2107,14 +2157,7 @@ function DefaultForm({
   // between each other, muted action footer. Shell width defaults to full
   // (same chrome as lists); pass width to narrow (auth-adjacent / dense).
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSubmit(e);
-      }}
-      data-testid={testId}
-      className="flex flex-col w-full"
-    >
+    <FormRoot onSubmit={onSubmit} testId={testId} className="flex flex-col w-full">
       <FormScreenShell {...(width !== undefined && { maxWidth: width })}>
         {headerRegion !== undefined && (
           <div className="flex flex-col gap-6 mb-8">{headerRegion}</div>
@@ -2191,7 +2234,7 @@ function DefaultForm({
           )}
         </div>
       </FormScreenShell>
-    </form>
+    </FormRoot>
   );
 }