@zeno-lib/forms 0.7.0 → 0.8.0

package/dist/create-zeno-form.mjs

@@ -2,7 +2,7 @@
 import { applyValidationError } from "./lib/apply-validation-error.mjs";
 import { fieldContext, formContext } from "./lib/contexts.mjs";
 import { withDefaultProps } from "./lib/default-props.mjs";
-import { deepMergeDefaults, extractZodDefaults } from "./lib/schema-defaults.mjs";
+import { deepMergeDefaults, extractZodDefaults, pickSchemaShape } from "./lib/schema-defaults.mjs";
 import { getRequiredPaths } from "./lib/schema-required.mjs";
 import { DEFAULT_VALIDATION_MODE, setFormZenoState } from "./lib/validation-modes.mjs";
 import { withEmptyStartValues } from "./lib/empty-value.mjs";
@@ -100,22 +100,32 @@ function createZenoForm(config) {
 			resolvedValidationLogic = mode === "blur-then-change" ? blurThenChangeLogic : void 0;
 		}
 		const wrappedOnSubmit = userOnSubmit ? (async (props) => {
-			const { submissionAttempts } = props.formApi.state;
+			const { formApi } = props;
+			const { submissionAttempts } = formApi.state;
+			let superseded = false;
+			const watch = formApi.store.subscribe(() => {
+				if (formApi.state.submissionAttempts !== submissionAttempts) superseded = true;
+			});
 			try {
 				await userOnSubmit(props);
 			} catch (error) {
 				if (error instanceof ValidationError) {
-					applyValidationError(props.formApi, error);
+					applyValidationError(formApi, error);
 					return;
 				}
-				const { state } = props.formApi;
-				if (state.values === props.value && state.submissionAttempts === submissionAttempts) setSubmitError(props.formApi, error);
+				if (!superseded) setSubmitError(formApi, error);
 				throw error;
+			} finally {
+				watch.unsubscribe();
 			}
 		}) : void 0;
 		const requiredFields = useMemo(() => schema ? getRequiredPaths(schema) : /* @__PURE__ */ new Set(), [schema]);
 		const schemaDefaults = useMemo(() => schema ? withEmptyStartValues(schema, extractZodDefaults(schema)) : void 0, [schema]);
-		const mergedDefaultValues = useMemo(() => schemaDefaults ? deepMergeDefaults(schemaDefaults, userDefaultValues) : userDefaultValues, [schemaDefaults, userDefaultValues]);
+		const mergedDefaultValues = useMemo(() => schemaDefaults ? deepMergeDefaults(schemaDefaults, pickSchemaShape(schema, userDefaultValues)) : userDefaultValues, [
+			schema,
+			schemaDefaults,
+			userDefaultValues
+		]);
 		const rebased = useRebasedDefaultValues(mergedDefaultValues);
 		const listeners = withMountListener(rest.listeners, rebased.onMount);
 		const form = useAppForm({

package/dist/lib/schema-defaults.d.mts

@@ -8,6 +8,7 @@ type SchemaDef = {
   readonly type?: string;
   readonly innerType?: SchemaNode;
   readonly shape?: Record<string, SchemaNode>;
+  readonly catchall?: SchemaNode;
   readonly in?: SchemaNode;
   readonly element?: SchemaNode;
   readonly defaultValue?: unknown;
@@ -20,6 +21,7 @@ type ExtractResult = {
 };
 declare function extractZodDefaults(schema: SchemaNode): Record<string, unknown>;
 declare function extractZodDefaultAt(schema: SchemaNode, keys: readonly PropertyKey[]): ExtractResult;
+declare function pickSchemaShape<T>(schema: SchemaNode, value: T): T;
 declare function deepMergeDefaults(schemaDefaults: Record<string, unknown>, userDefaults: Record<string, unknown> | undefined): Record<string, unknown>;
 //#endregion
-export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults };
+export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults, pickSchemaShape };

package/dist/lib/schema-defaults.mjs

@@ -92,6 +92,48 @@ function extractZodDefaultAt(schema, keys) {
 function isPlainObject(value) {
 	return typeof value === "object" && value !== null && Object.getPrototypeOf(value) === Object.prototype;
 }
+function acceptsOnlyShape(def) {
+	return def.catchall === void 0 || getDef(def.catchall)?.type === "never";
+}
+function pickShape(node, value) {
+	let current = node;
+	for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
+		const def = getDef(current);
+		switch (def?.type) {
+			case "object": {
+				const { shape } = def;
+				if (!(shape && isPlainObject(value) && acceptsOnlyShape(def))) return value;
+				const result = {};
+				for (const [key, field] of Object.entries(shape)) if (Object.hasOwn(value, key)) result[key] = pickShape(field, value[key]);
+				return result;
+			}
+			case "array": {
+				const { element } = def;
+				return element && Array.isArray(value) ? value.map((item) => pickShape(element, item)) : value;
+			}
+			case "default":
+			case "nonoptional":
+			case "nullable":
+			case "optional":
+			case "prefault":
+			case "readonly":
+				current = def.innerType;
+				continue;
+			case "pipe":
+				current = def.in;
+				continue;
+			default: return value;
+		}
+	}
+	return value;
+}
+function pickSchemaShape(schema, value) {
+	try {
+		return pickShape(schema, value);
+	} catch {
+		return value;
+	}
+}
 function deepMergeDefaults(schemaDefaults, userDefaults) {
 	if (!userDefaults) return schemaDefaults;
 	const result = { ...schemaDefaults };
@@ -104,4 +146,4 @@ function deepMergeDefaults(schemaDefaults, userDefaults) {
 	return result;
 }
 //#endregion
-export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults };
+export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults, pickSchemaShape };

package/dist/lib/submit-action.mjs

@@ -1,5 +1,6 @@
 import { applyValidationError } from "./apply-validation-error.mjs";
 import { toActionError } from "./action-result.mjs";
+import { pickSchemaShape } from "./schema-defaults.mjs";
 import { getFormSchema } from "./validation-modes.mjs";
 import { ValidationError } from "./validation-error.mjs";
 //#region src/lib/submit-action.ts
@@ -36,10 +37,14 @@ async function submitAction(props, action, options = {}) {
 		return result;
 	}
 	const { reset } = options;
-	if (reset === true) formApi.reset(result.data);
+	if (reset === true) formApi.reset(toFormValues(formApi, result.data));
 	else if (reset === "values") formApi.reset(value);
-	else if (typeof reset === "function") formApi.reset(reset(result.data));
+	else if (typeof reset === "function") formApi.reset(toFormValues(formApi, reset(result.data)));
 	return result;
 }
+function toFormValues(formApi, data) {
+	const schema = getFormSchema(formApi);
+	return schema ? pickSchemaShape(schema, data) : data;
+}
 //#endregion
 export { applyActionError, submitAction };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"
@@ -37,7 +37,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@zeno-lib/test": "^0.1.1",
-    "@zeno-lib/typescript": "^1.1.0",
+    "@zeno-lib/typescript": "^1.2.0",
     "@zeno-lib/ui": "^0.0.1",
     "lucide-react": "^1.52.0",
     "tsdown": "^0.23.0",

package/src/create-zeno-form.tsx

@@ -16,7 +16,11 @@ import { fieldContext, formContext } from "./lib/contexts"
 import { withDefaultProps } from "./lib/default-props"
 import { withEmptyStartValues } from "./lib/empty-value"
 import { useDisabledOption } from "./lib/form-disabled"
-import { deepMergeDefaults, extractZodDefaults } from "./lib/schema-defaults"
+import {
+  deepMergeDefaults,
+  extractZodDefaults,
+  pickSchemaShape,
+} from "./lib/schema-defaults"
 import {
   getRequiredPaths,
   type StandardSchemaLike,
@@ -531,7 +535,17 @@ export function createZenoForm<
 
     const wrappedOnSubmit = userOnSubmit
       ? ((async (props: { formApi: AnyFormApi; value: TFormData }) => {
-          const { submissionAttempts } = props.formApi.state
+          const { formApi } = props
+          const { submissionAttempts } = formApi.state
+          // A reset (a dialog closed meanwhile) or a newer submit while this
+          // one runs makes its failure stale, even once a later submit brings
+          // the count back. An edit doesn't: the save still didn't happen.
+          let superseded = false
+          const watch = formApi.store.subscribe(() => {
+            if (formApi.state.submissionAttempts !== submissionAttempts) {
+              superseded = true
+            }
+          })
           try {
             await (
               userOnSubmit as unknown as (
@@ -540,20 +554,15 @@ export function createZenoForm<
             )(props)
           } catch (error) {
             if (error instanceof ValidationError) {
-              applyValidationError(props.formApi, error)
+              applyValidationError(formApi, error)
               return
             }
-            // Kept for `FormError`, unless an edit, a reset (a dialog closed
-            // meanwhile) or a newer submit came first: then it is about
-            // values no longer on screen.
-            const { state } = props.formApi
-            if (
-              state.values === props.value &&
-              state.submissionAttempts === submissionAttempts
-            ) {
-              setSubmitError(props.formApi, error)
+            if (!superseded) {
+              setSubmitError(formApi, error)
             }
             throw error
+          } finally {
+            watch.unsubscribe()
           }
         }) as typeof userOnSubmit)
       : undefined
@@ -579,15 +588,21 @@ export function createZenoForm<
       [schema]
     )
 
+    // The caller's values keep only the keys the schema describes, so a
+    // record as read (`id`, `createdAt`, …) doesn't fail a `.strict()` schema
+    // on submit. The schema's own defaults then fill the keys left out.
     const mergedDefaultValues = useMemo(
       () =>
         schemaDefaults
           ? (deepMergeDefaults(
               schemaDefaults,
-              userDefaultValues as Record<string, unknown> | undefined
+              pickSchemaShape(
+                schema as Parameters<typeof pickSchemaShape>[0],
+                userDefaultValues as Record<string, unknown> | undefined
+              )
             ) as typeof userDefaultValues)
           : userDefaultValues,
-      [schemaDefaults, userDefaultValues]
+      [schema, schemaDefaults, userDefaultValues]
     )
 
     // Keep `formApi.reset(values)` from being undone by the next render; see

package/src/form-dialog.test.tsx

@@ -18,7 +18,7 @@ import {
 } from "./form-dialog"
 import type { ActionResult } from "./lib/action-result"
 import { submitAction } from "./lib/submit-action"
-import { useFormDialog } from "./lib/use-form-dialog"
+import { type FormDialogController, useFormDialog } from "./lib/use-form-dialog"
 
 const NAME = /Name/
 const EMAIL = /Email/
@@ -54,8 +54,10 @@ function Harness({
   children,
   onSubmit = vi.fn(),
   closeOnSubmit,
+  controller,
   disabled,
   discardPrompt,
+  formDisabled,
   saveFromPrompt,
   submitErrorMessage,
   submitLabel,
@@ -65,15 +67,23 @@ function Harness({
   children?: ReactNode
   onSubmit?: (values: Values) => unknown
   closeOnSubmit?: boolean
+  /** Gets the dialog's controller, to close it from outside. */
+  controller?: { current?: FormDialogController<Values> }
   disabled?: boolean
   discardPrompt?: DiscardPromptText
+  /** Disable the form through `useForm({ disabled })`. */
+  formDisabled?: boolean
   saveFromPrompt?: boolean
   submitErrorMessage?: (error: unknown) => ReactNode
   submitLabel?: ReactNode
 }) {
   const dialog = useFormDialog({ defaultValues: BLANK })
+  if (controller) {
+    controller.current = dialog
+  }
   const form = useForm({
     defaultValues: dialog.defaultValues,
+    disabled: formDisabled,
     onSubmit: (submit) =>
       action ? submitAction(submit, action) : onSubmit(submit.value),
     schema,
@@ -119,6 +129,13 @@ function dropFocus() {
   sink.remove()
 }
 
+// Whether leaving the page now would make the browser ask first.
+function warnsOnUnload(): boolean {
+  const event = new Event("beforeunload", { cancelable: true })
+  window.dispatchEvent(event)
+  return event.defaultPrevented
+}
+
 // The alerts added where assistive tech could see them. One added under an
 // `aria-hidden` ancestor (the dialog, while the leave prompt is open) is never
 // announced, not even once that ancestor is shown again.
@@ -161,6 +178,40 @@ describe("FormDialog", () => {
     expect(name.value).toBe("Ada")
   })
 
+  test("an edit opened on a record with keys the schema lacks saves to a .strict() schema", async () => {
+    const user = userEvent.setup()
+    const strictSchema = schema.strict()
+    const record = { ...ROW, createdAt: "2026-01-01", id: 7 }
+    const onSubmit = vi.fn()
+    function StrictHarness() {
+      const dialog = useFormDialog<Values>({ defaultValues: BLANK })
+      const form = useForm({
+        defaultValues: dialog.defaultValues,
+        onSubmit: ({ value }) => onSubmit(value),
+        schema: strictSchema,
+      })
+      const { InputField } = form
+      return (
+        <>
+          <button
+            onClick={() => dialog.open({ defaultValues: record })}
+            type="button"
+          >
+            Edit
+          </button>
+          <FormDialog dialog={dialog} form={form} title="Person">
+            <InputField label="Name" name="name" />
+          </FormDialog>
+        </>
+      )
+    }
+    render(<StrictHarness />)
+    await user.click(screen.getByRole("button", { name: "Edit" }))
+    await screen.findByLabelText(NAME)
+    await user.click(screen.getByRole("button", { name: "Save" }))
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledWith(ROW))
+  })
+
   test("closes without asking when nothing changed", async () => {
     const user = userEvent.setup()
     render(<Harness />)
@@ -277,6 +328,110 @@ describe("FormDialog", () => {
     expect(screen.getByRole("dialog")).toBeTruthy()
   })
 
+  for (const closeOnSubmit of [true, false]) {
+    test(`a leave asked for while a Save runs goes through once it saves (closeOnSubmit: ${closeOnSubmit})`, async () => {
+      const user = userEvent.setup()
+      let finishSave: () => void = () => undefined
+      const onSubmit = vi.fn(
+        () =>
+          new Promise<void>((resolve) => {
+            finishSave = resolve
+          })
+      )
+      render(<Harness closeOnSubmit={closeOnSubmit} onSubmit={onSubmit} />)
+      const name = await openEdit(user)
+      await user.type(name, "!")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+      await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+      await user.keyboard("{Escape}")
+      await screen.findByRole("alertdialog")
+
+      finishSave()
+      await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
+      expect(screen.queryByRole("alertdialog")).toBeNull()
+    })
+  }
+
+  test("an edit made while a Save runs keeps the leave prompt asking once it saves", async () => {
+    const user = userEvent.setup()
+    let finishSave: () => void = () => undefined
+    const onSubmit = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          finishSave = resolve
+        })
+    )
+    render(<Harness onSubmit={onSubmit} />)
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.click(screen.getByRole("button", { name: "Save" }))
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    await user.type(name, "?")
+    await user.keyboard("{Escape}")
+    const prompt = await screen.findByRole("alertdialog")
+
+    finishSave()
+    await waitFor(() =>
+      expect(screen.queryByRole("status", { hidden: true })).toBeNull()
+    )
+    expect(screen.getByRole("alertdialog")).toBe(prompt)
+    await user.click(
+      within(prompt).getByRole("button", { name: "Keep editing" })
+    )
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull())
+    expect(name.value).toBe("Ada!?")
+  })
+
+  test("a Save that fails while the leave prompt asks focuses the invalid field once it closes", async () => {
+    const user = userEvent.setup()
+    let finishSave: (result: ActionResult<never>) => void = () => undefined
+    const action = vi.fn(
+      () =>
+        new Promise<ActionResult<never>>((resolve) => {
+          finishSave = resolve
+        })
+    )
+    render(<Harness action={action} />)
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.click(screen.getByRole("button", { name: "Save" }))
+    await waitFor(() => expect(action).toHaveBeenCalled())
+    await user.keyboard("{Escape}")
+    const prompt = await screen.findByRole("alertdialog")
+    await waitFor(() =>
+      expect(prompt.contains(document.activeElement)).toBe(true)
+    )
+
+    finishSave({
+      error: { fieldErrors: { email: ["Already taken"] }, formErrors: [] },
+      ok: false,
+    })
+    const email = screen.getByLabelText(EMAIL)
+    await waitFor(() => expect(email.getAttribute("aria-invalid")).toBe("true"))
+    expect(prompt.contains(document.activeElement)).toBe(true)
+    await user.click(
+      within(prompt).getByRole("button", { name: "Keep editing" })
+    )
+    await waitFor(() => expect(document.activeElement).toBe(email))
+  })
+
+  test("closing the dialog from outside closes its leave prompt for good", async () => {
+    const user = userEvent.setup()
+    const controller: { current?: FormDialogController<Values> } = {}
+    render(<Harness controller={controller} />)
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.keyboard("{Escape}")
+    await screen.findByRole("alertdialog")
+
+    act(() => controller.current?.close())
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull())
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
+    await user.click(screen.getByRole("button", { name: "Edit" }))
+    await screen.findByRole("dialog")
+    expect(screen.queryByRole("alertdialog")).toBeNull()
+  })
+
   test("a field error from the server focuses that field", async () => {
     const user = userEvent.setup()
     const action = vi.fn(() =>
@@ -583,17 +738,46 @@ describe("FormDialog", () => {
     expect(screen.getByRole("dialog")).toBeTruthy()
   })
 
-  test("disabled also turns off Save in the leave prompt", async () => {
+  for (const via of ["disabled", "useForm({ disabled })"]) {
+    test(`with ${via}, a changed dialog still asks and warns, without offering Save`, async () => {
+      const user = userEvent.setup()
+      const { rerender } = render(<Harness saveFromPrompt />)
+      const name = await openEdit(user)
+      await user.type(name, "!")
+
+      rerender(
+        <Harness
+          disabled={via === "disabled"}
+          formDisabled={via !== "disabled"}
+          saveFromPrompt
+        />
+      )
+      expect(warnsOnUnload()).toBe(true)
+      await user.click(screen.getByRole("button", { name: "Cancel" }))
+      const prompt = await screen.findByRole("alertdialog")
+      expect(within(prompt).getByText("Discard changes?")).toBeTruthy()
+      expect(within(prompt).queryByRole("button", { name: "Save" })).toBeNull()
+      await user.click(within(prompt).getByRole("button", { name: "Discard" }))
+      await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull())
+      await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
+    })
+  }
+
+  test("disabled while the leave prompt asks keeps it, with its Save off", async () => {
     const user = userEvent.setup()
     const onSubmit = vi.fn()
     const { rerender } = render(<Harness onSubmit={onSubmit} saveFromPrompt />)
     const name = await openEdit(user)
     await user.type(name, "!")
-    rerender(<Harness disabled onSubmit={onSubmit} saveFromPrompt />)
     await user.click(screen.getByRole("button", { name: "Cancel" }))
     const prompt = await screen.findByRole("alertdialog")
+
+    rerender(<Harness disabled onSubmit={onSubmit} saveFromPrompt />)
     await user.click(within(prompt).getByRole("button", { name: "Save" }))
     expect(onSubmit).not.toHaveBeenCalled()
+    expect(screen.getByRole("alertdialog")).toBe(prompt)
+    await user.click(within(prompt).getByRole("button", { name: "Discard" }))
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
   })
 
   test("Save in the leave prompt doesn't submit again while a submit runs", async () => {

package/src/form-dialog.tsx

@@ -110,7 +110,11 @@ type FormDialogProps<TValues> = {
   cancelLabel?: ReactNode
   /** Extra footer content, rendered before Cancel / Save. */
   footer?: ReactNode
-  /** Close after a successful submit. Defaults to `true`. */
+  /**
+   * Close after a successful submit. Defaults to `true`. A close the user
+   * asked for while the submit ran goes through once it succeeds either way,
+   * unless they edited a field since.
+   */
   closeOnSubmit?: boolean
   /**
    * Shown above the footer when the submit handler throws. Defaults to the
@@ -127,13 +131,15 @@ type FormDialogProps<TValues> = {
   discardPrompt?: DiscardPromptText
   /**
    * Offer Save in the discard prompt, next to Discard: it submits, and closes
-   * the dialog if the submit succeeds. Defaults to `false`.
+   * the dialog if the submit succeeds. Not in a prompt that opens while the
+   * dialog is disabled. Defaults to `false`.
    */
   saveFromPrompt?: boolean
   /**
    * Disable every field, Save and ⌘/Ctrl+Enter, as `useForm({ disabled })`
    * does. A `<fieldset disabled>` also disables native controls of your own.
-   * Defaults to `false`.
+   * A discard prompt that opens while disabled doesn't offer Save. Defaults
+   * to `false`.
    */
   disabled?: boolean
   /** Class for the dialog popup (e.g. a wider `sm:max-w-lg`). */
@@ -257,8 +263,8 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
     useIsFormDisabled(form as unknown as AnyFormApi) || disabled
   const popupRef = useRef<HTMLDivElement>(null)
   const formRef = useRef<HTMLFormElement>(null)
-  // Set when a Save from the discard prompt fails, so the prompt hands focus
-  // to the first invalid field as it closes.
+  // Set when a submit fails while the discard prompt is open, so the prompt
+  // hands focus to the first invalid field as it closes.
   const focusInvalidOnPromptClose = useRef<boolean>(false)
   // The open prompt hides the dialog from assistive tech, so a form-level
   // error that shows up meanwhile (a Save from the prompt, or a footer Save
@@ -266,9 +272,13 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
   // the prompt has closed, which announces it.
   const announceOnPromptClosed = useRef<boolean>(false)
   const [formErrorKey, setFormErrorKey] = useState(0)
+  // Whether the discard prompt offers Save, set as it opens: a disabled
+  // dialog can't save. Kept while it's open, so the prompt doesn't change
+  // under the user; one disabled meanwhile only turns its Save off.
+  const [promptOffersSave, setPromptOffersSave] = useState(false)
   const { close, defaultValues, focus, isOpen, open, session } = dialog
   const DialogFormError = form.FormError ?? FormError
-  const promptCopy = getPromptCopy(discardPrompt, saveFromPrompt)
+  const promptCopy = getPromptCopy(discardPrompt, promptOffersSave)
   // Read after a submit's await: the dialog may have closed, or reopened on
   // another record, while a slow save was in flight.
   const latest = useRef({ isOpen, session })
@@ -313,6 +323,12 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
     }
   }, [session])
 
+  // A held leave belongs to the session it was asked in. Drop it when that
+  // session ends some other way (`dialog.close()`, a submit that closes it,
+  // `dialog.open()` on another record), so the prompt never outlives it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: on every session change.
+  useLayoutEffect(() => cancelLeave, [isOpen, session])
+
   // Every way to submit (footer Save, ⌘/Ctrl+Enter, the prompt's Save) checks
   // this first. TanStack only refuses a second `handleSubmit` while one runs on
   // the very first attempt, and `isOpen` is false through the exit animation,
@@ -342,10 +358,25 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
     }
     const node = event.currentTarget
     const focused = node.ownerDocument.activeElement
+    // The fields stay editable while the submit runs. TanStack replaces
+    // `values` on every edit, so the same object means none came after.
+    const submitted = form.state.values
     const saved = await submit()
     if (!latest.current.isOpen || latest.current.session !== session) {
       return // the session this submit belongs to is over
     }
+    if (isConfirmingRef.current) {
+      // The user asked to leave while the submit ran. If it saved every
+      // change, that leave goes through, `closeOnSubmit` or not. After a
+      // failure or a later edit, the prompt waits for the user's answer, and
+      // it traps focus, so it moves focus to an invalid field as it closes.
+      if (saved && form.state.values === submitted) {
+        confirmLeave()
+      } else {
+        focusInvalidOnPromptClose.current = !saved
+      }
+      return
+    }
     if (saved) {
       if (closeOnSubmit) {
         // Close directly, past the guard: the changes are saved. The form is
@@ -392,6 +423,7 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
         if (next) {
           open()
         } else {
+          setPromptOffersSave(saveFromPrompt && !isDisabled)
           requestLeave(close)
         }
       }}
@@ -480,21 +512,24 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
             setFormErrorKey((key) => key + 1)
           }
         }}
-        open={isConfirming}
+        // Closes in the same render as the dialog.
+        open={isConfirming && isOpen}
       >
         <AlertDialogContent
           // The prompt traps focus while open, so a failed Save's invalid
           // field gets focus as the prompt closes, not from `submit`.
           finalFocus={() => {
-            if (!focusInvalidOnPromptClose.current) {
+            const focusInvalid = focusInvalidOnPromptClose.current
+            focusInvalidOnPromptClose.current = false
+            // After Discard, the closing dialog hands focus back itself.
+            if (!(focusInvalid && latest.current.isOpen)) {
               return true
             }
-            focusInvalidOnPromptClose.current = false
             // Base UI focuses what this returns too; focusing here first
             // finds a field that takes focus, skipping disabled or hidden ones.
             return focusFirstInvalid(formRef.current) ?? true
           }}
-          size={saveFromPrompt ? "default" : "sm"}
+          size={promptOffersSave ? "default" : "sm"}
         >
           <AlertDialogHeader>
             <AlertDialogTitle>{promptCopy.title}</AlertDialogTitle>
@@ -513,7 +548,7 @@ function FormDialog<TValues>(props: FormDialogProps<TValues>) {
             >
               {discardPrompt?.confirmLabel ?? "Discard"}
             </AlertDialogAction>
-            {saveFromPrompt && (
+            {promptOffersSave && (
               <AlertDialogAction
                 disabled={isDisabled || isSaving || isSubmitting}
                 onClick={saveAndLeave}

package/src/form-error.test.tsx

@@ -136,6 +136,53 @@ describe("<FormError> with <Form>", () => {
     expect(screen.queryByRole("alert")).toBeNull()
   })
 
+  test("a submit that throws after an edit made while it ran still shows", async () => {
+    const user = userEvent.setup()
+    let rejectSubmit: (error: Error) => void = () => undefined
+    const onSubmit = vi.fn(
+      () =>
+        new Promise((_, reject) => {
+          rejectSubmit = reject
+        })
+    )
+    render(<Profile onSubmit={onSubmit} />)
+    await user.click(screen.getByRole("button", SUBMIT))
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+
+    await user.type(screen.getByLabelText(NAME), "!")
+    rejectSubmit(new Error("offline"))
+    expect(await screen.findByRole("alert")).toBeTruthy()
+
+    // The next edit clears it, as after any thrown submit.
+    await user.type(screen.getByLabelText(NAME), "?")
+    expect(screen.queryByRole("alert")).toBeNull()
+  })
+
+  test("a reset while a submit runs drops its error, even after a new submit", async () => {
+    const user = userEvent.setup()
+    let rejectFirst: (error: Error) => void = () => undefined
+    const onSubmit = vi
+      .fn<(values: Values) => unknown>()
+      .mockImplementationOnce(
+        () =>
+          new Promise((_, reject) => {
+            rejectFirst = reject
+          })
+      )
+      .mockImplementationOnce(() => new Promise(() => undefined))
+    render(<Profile onSubmit={onSubmit} />)
+    await user.click(screen.getByRole("button", SUBMIT))
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1))
+
+    await user.click(screen.getByRole("button", { name: "Reset" }))
+    // Back to the first submit's attempt count, still running.
+    await user.click(screen.getByRole("button", SUBMIT))
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(2))
+    rejectFirst(new Error("offline"))
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(screen.queryByRole("alert")).toBeNull()
+  })
+
   test("a reset drops a thrown submit's error, even when it restores the same values", async () => {
     const user = userEvent.setup()
     let resolveRetry: () => void = () => undefined

package/src/lib/schema-defaults.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, test } from "vitest"
 import { z } from "zod"
-import { deepMergeDefaults, extractZodDefaults } from "./schema-defaults"
+import {
+  deepMergeDefaults,
+  extractZodDefaults,
+  pickSchemaShape,
+} from "./schema-defaults"
 
 describe("extractZodDefaults — primitives", () => {
   test("z.string() → ''", () => {
@@ -192,3 +196,126 @@ describe("deepMergeDefaults", () => {
     expect(deepMergeDefaults({ x: { a: 1 } }, { x: null })).toEqual({ x: null })
   })
 })
+
+describe("pickSchemaShape", () => {
+  test("keeps only the keys the schema describes, at every depth", () => {
+    const schema = z
+      .object({
+        address: z.object({ city: z.string() }).strict(),
+        name: z.string(),
+      })
+      .strict()
+    const record = {
+      address: { city: "Geneva", geocodedAt: "2026-01-01" },
+      createdAt: new Date(),
+      id: 7,
+      name: "Ada",
+    }
+    expect(pickSchemaShape(schema, record)).toEqual({
+      address: { city: "Geneva" },
+      name: "Ada",
+    })
+    // The record is copied, never trimmed in place.
+    expect(record).toHaveProperty("id", 7)
+  })
+
+  test("maps an array's element over every row", () => {
+    const schema = z.object({
+      lines: z.array(z.object({ amount: z.number(), label: z.string() })),
+    })
+    expect(
+      pickSchemaShape(schema, {
+        lines: [
+          { amount: 1, id: 10, label: "Design" },
+          { amount: 2, id: 11, label: "Build" },
+        ],
+      })
+    ).toEqual({
+      lines: [
+        { amount: 1, label: "Design" },
+        { amount: 2, label: "Build" },
+      ],
+    })
+  })
+
+  test("unwraps optional, nullable and default, keeping null and absent keys", () => {
+    const address = z.object({ city: z.string() })
+    const schema = z.object({
+      billing: address.nullable(),
+      shipping: address.optional(),
+      tags: z.array(z.object({ label: z.string() })).default([]),
+      work: address.nullable(),
+    })
+    const picked = pickSchemaShape(schema, {
+      billing: null,
+      tags: [{ id: 1, label: "vip" }],
+      work: { city: "Bern", id: 3 },
+    })
+    expect(picked).toEqual({
+      billing: null,
+      tags: [{ label: "vip" }],
+      work: { city: "Bern" },
+    })
+    expect(picked).not.toHaveProperty("shipping")
+  })
+
+  test("reads a pipe or a transform through its input", () => {
+    const schema = z
+      .object({
+        amount: z.string().transform(Number),
+        period: z
+          .object({ from: z.string(), to: z.string() })
+          .transform(({ from, to }) => `${from}/${to}`),
+      })
+      .transform((invoice) => ({ ...invoice, total: invoice.amount }))
+    expect(
+      pickSchemaShape(schema, {
+        amount: "12",
+        id: 4,
+        period: { from: "2026-01", id: 9, to: "2026-02" },
+      })
+    ).toEqual({ amount: "12", period: { from: "2026-01", to: "2026-02" } })
+  })
+
+  test("keeps as is what the schema doesn't describe for certain", () => {
+    const schema = z.object({
+      contact: z.union([
+        z.object({ email: z.string() }),
+        z.object({ phone: z.string() }),
+      ]),
+      extra: z.object({ a: z.string() }).catchall(z.string()),
+      labels: z.record(z.string(), z.object({ text: z.string() })),
+      loose: z.looseObject({ a: z.string() }),
+      meta: z.unknown(),
+      profile: z.object({ nick: z.string() }),
+    })
+    const value = {
+      contact: { email: "ada@example.com", id: 1 },
+      extra: { a: "x", b: "y" },
+      labels: { en: { id: 2, text: "Hello" } },
+      loose: { a: "x", b: "y" },
+      meta: { anything: true },
+      profile: "not an object",
+    }
+    expect(pickSchemaShape(schema, value)).toEqual(value)
+  })
+
+  test("leaves a value alone without a Zod schema", () => {
+    const value = { id: 1, name: "Ada" }
+    expect(
+      pickSchemaShape({} as Parameters<typeof pickSchemaShape>[0], value)
+    ).toBe(value)
+  })
+
+  test("leaves a missing key absent, for the schema default to fill", () => {
+    const schema = z.object({
+      name: z.string(),
+      role: z.string().default("member"),
+    })
+    const picked = pickSchemaShape(schema, { id: 7, name: "Ada" })
+    expect(deepMergeDefaults(extractZodDefaults(schema), picked)).toEqual({
+      name: "Ada",
+      role: "member",
+    })
+  })
+})

package/src/lib/schema-defaults.ts

@@ -1,4 +1,5 @@
-// Extract default values from a Zod schema for `useForm`.
+// Extract default values from a Zod schema for `useForm`, and keep the values
+// a caller passes to the schema's shape (`pickSchemaShape`, below).
 //
 // Tier A+ semantics:
 //   - `.default(...)` / `.prefault(...)` values flow through.
@@ -23,6 +24,7 @@ type SchemaDef = {
   readonly type?: string
   readonly innerType?: SchemaNode
   readonly shape?: Record<string, SchemaNode>
+  readonly catchall?: SchemaNode
   readonly in?: SchemaNode
   readonly element?: SchemaNode
   readonly defaultValue?: unknown
@@ -148,6 +150,71 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   )
 }
 
+// `.strict()` sets `catchall` to `z.never()`; a plain `z.object` leaves it
+// unset. Either way the schema accepts no key outside its `shape`.
+function acceptsOnlyShape(def: SchemaDef): boolean {
+  return def.catchall === undefined || getDef(def.catchall)?.type === "never"
+}
+
+function pickShape(node: SchemaNode, value: unknown): unknown {
+  let current: SchemaNode | undefined = node
+  for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
+    const def: SchemaDef | undefined = getDef(current)
+    switch (def?.type) {
+      case "object": {
+        const { shape } = def
+        if (!(shape && isPlainObject(value) && acceptsOnlyShape(def))) {
+          return value
+        }
+        const result: Record<string, unknown> = {}
+        for (const [key, field] of Object.entries(shape)) {
+          if (Object.hasOwn(value, key)) {
+            result[key] = pickShape(field, value[key])
+          }
+        }
+        return result
+      }
+      case "array": {
+        const { element } = def
+        return element && Array.isArray(value)
+          ? value.map((item) => pickShape(element, item))
+          : value
+      }
+      case "default":
+      case "nonoptional":
+      case "nullable":
+      case "optional":
+      case "prefault":
+      case "readonly":
+        current = def.innerType
+        continue
+      case "pipe":
+        current = def.in
+        continue
+      default:
+        return value
+    }
+  }
+  return value
+}
+
+// `value` with only the keys `schema` describes, so a form can start from a
+// record as read (`{ id, createdAt, … }`) without a `.strict()` schema
+// rejecting the rest on every submit. An object keeps the keys in its
+// `shape`, an array maps its `element` over every item, and the wrappers
+// unwrap as in `extractDefaultForField`. Where the shape isn't certain (a
+// union, a record, a loose or catchall object, `any`, a non-Zod schema) or the
+// value doesn't fit it (`null`, a string where an object is expected), the
+// value is kept as is. A key the value lacks stays absent: filling it is
+// `extractZodDefaults`' job.
+function pickSchemaShape<T>(schema: SchemaNode, value: T): T {
+  try {
+    return pickShape(schema, value) as T
+  } catch {
+    return value
+  }
+}
+
 // User-supplied values always win on conflict. Plain objects on both sides
 // recurse so nested `z.object(...)` defaults aren't clobbered by partial user
 // objects. Arrays, dates, class instances are treated atomically (user value
@@ -173,4 +240,9 @@ function deepMergeDefaults(
   return result
 }
 
-export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults }
+export {
+  deepMergeDefaults,
+  extractZodDefaultAt,
+  extractZodDefaults,
+  pickSchemaShape,
+}

package/src/lib/submit-action.ts

@@ -7,6 +7,7 @@ import {
   toActionError,
 } from "./action-result"
 import { applyValidationError } from "./apply-validation-error"
+import { pickSchemaShape } from "./schema-defaults"
 import { ValidationError } from "./validation-error"
 import { getFormSchema } from "./validation-modes"
 
@@ -179,14 +180,28 @@ async function submitAction(
 
   const { reset } = options
   if (reset === true) {
-    formApi.reset(result.data)
+    formApi.reset(toFormValues(formApi, result.data))
   } else if (reset === "values") {
     formApi.reset(value)
   } else if (typeof reset === "function") {
-    formApi.reset((reset as (data: unknown) => unknown)(result.data))
+    formApi.reset(
+      toFormValues(formApi, (reset as (data: unknown) => unknown)(result.data))
+    )
   }
   return result
 }
 
+// What the action returned, kept to the keys the form's own schema describes
+// (not `options.schema`, which is the action's), so a saved record's `id` or
+// `updatedAt` doesn't become a form value that a `.strict()` schema rejects on
+// the next submit. The submitted values need none of this: they already have
+// the form's shape.
+function toFormValues(formApi: FormApiLike, data: unknown): unknown {
+  const schema = getFormSchema(formApi as AnyFormApi)
+  return schema
+    ? pickSchemaShape(schema as Parameters<typeof pickSchemaShape>[0], data)
+    : data
+}
+
 export type { FormApiLike, SubmitActionOptions, SubmitActionSchema }
 export { applyActionError, submitAction }

package/src/submit-action.test.tsx

@@ -508,6 +508,51 @@ describe("submitAction — success", () => {
     expect(form.state.isDirty).toBe(false)
   })
 
+  // An action that returns the saved row, with keys the form doesn't edit.
+  type SavedProfile = Profile & { id: number; updatedAt: string }
+  const resets = {
+    "a reset function": (saved: SavedProfile): Profile => saved,
+    "reset: true": true,
+  } as const
+
+  for (const [label, reset] of Object.entries(resets)) {
+    test(`${label} rebases on the saved row's form keys only, so the next save passes a .strict() schema`, async () => {
+      const user = userEvent.setup()
+      const save = vi.fn((input: Profile) =>
+        Promise.resolve<ActionResult<SavedProfile>>({
+          data: { ...input, id: 7, updatedAt: "2026-01-01" },
+          ok: true,
+        })
+      )
+      function Harness() {
+        const form = useForm({
+          defaultValues: { email: "ada@example.com", name: "Ada" },
+          onSubmit: (submit) => submitAction(submit, save, { reset }),
+          schema: profileSchema.strict(),
+        })
+        const { SubmitButton } = form
+        return (
+          <FormProvider form={form}>
+            <Form>
+              <SubmitButton>Submit</SubmitButton>
+            </Form>
+          </FormProvider>
+        )
+      }
+      render(<Harness />)
+
+      await user.click(screen.getByRole("button", SUBMIT))
+      await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(1))
+      await user.click(screen.getByRole("button", SUBMIT))
+
+      await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(2))
+      expect(save).toHaveBeenLastCalledWith({
+        email: "ada@example.com",
+        name: "Ada",
+      })
+    })
+  }
+
   test('reset: "values" rebases the form on the submitted values', async () => {
     const user = userEvent.setup()
     const formRef: { current: unknown } = { current: undefined }

package/src/use-form.test-d.ts

@@ -48,6 +48,29 @@ test("schema path: defaultValues is PartialFormData (deep partial for plain obje
   })
 })
 
+test("schema path: defaultValues takes a record with keys the schema lacks", () => {
+  // A row as read: `useForm` keeps the keys the schema describes at runtime,
+  // and the form stays typed from the schema.
+  const invoiceSchema = z
+    .object({
+      lines: z.array(z.object({ label: z.string() }).strict()),
+      number: z.string(),
+    })
+    .strict()
+  const row = {
+    createdAt: new Date(),
+    id: 7,
+    lines: [{ id: 1, invoiceId: 7, label: "Design" }],
+    number: "2026-001",
+  }
+  const form = useForm({
+    defaultValues: row,
+    onSubmit: () => undefined,
+    schema: invoiceSchema,
+  })
+  expectTypeOf(form.state.values).toEqualTypeOf<z.input<typeof invoiceSchema>>()
+})
+
 test("schema path: validationLogic is forbidden (type never)", () => {
   // Error lands on the overall call argument, not on `validationLogic`:
   // `validationLogic: never` makes the whole options object incompatible.

package/src/use-form.test.tsx

@@ -62,6 +62,52 @@ describe("useForm — schema-derived defaults", () => {
   })
 })
 
+describe("useForm — defaultValues from a record", () => {
+  test("an edit form opened with a record as read submits to a .strict() schema", async () => {
+    const user = userEvent.setup()
+    const schema = z
+      .object({
+        address: z.object({ city: z.string() }).strict(),
+        email: z.email(),
+        lines: z.array(z.object({ label: z.string() }).strict()),
+      })
+      .strict()
+    const record = {
+      address: { city: "Geneva", updatedAt: "2026-01-01" },
+      createdAt: new Date("2026-01-01"),
+      email: "ada@example.com",
+      id: 7,
+      lines: [{ id: 1, label: "Design" }],
+    }
+    const onSubmit = vi.fn()
+    function Harness() {
+      const form = useForm({
+        defaultValues: record,
+        onSubmit: ({ value }) => onSubmit(value),
+        schema,
+      })
+      const { EmailField, SubmitButton } = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <EmailField label="Email" name="email" />
+            <SubmitButton>Submit</SubmitButton>
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<Harness />)
+    await user.click(screen.getByRole("button", { name: "Submit" }))
+    await vi.waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        address: { city: "Geneva" },
+        email: "ada@example.com",
+        lines: [{ label: "Design" }],
+      })
+    )
+  })
+})
+
 describe("useForm — required indicator", () => {
   test("`*` rendered next to required field labels (schema-derived)", () => {
     const schema = z.object({