@multiplatform.one/forms 6.1.0 → 6.4.0

package/src/fields/DatePicker/utils.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { coerceToDate } from "./utils";
+
+describe("coerceToDate (forgiving paste normalization)", () => {
+  it("parses strict ISO date-only strings as local midnight", () => {
+    const d = coerceToDate("2024-01-15");
+    expect(d?.getFullYear()).toBe(2024);
+    expect(d?.getMonth()).toBe(0);
+    expect(d?.getDate()).toBe(15);
+    expect(d?.getHours()).toBe(0);
+  });
+
+  it("accepts `/`, `.`, and space separators (paste normalization)", () => {
+    for (const value of ["2024/01/15", "2024.01.15", "2024 01 15"]) {
+      const d = coerceToDate(value);
+      expect(d?.getFullYear(), value).toBe(2024);
+      expect(d?.getMonth(), value).toBe(0);
+      expect(d?.getDate(), value).toBe(15);
+    }
+  });
+
+  it("accepts 1-digit month/day and surrounding whitespace", () => {
+    const d = coerceToDate("  2024-1-5  ");
+    expect(d?.getMonth()).toBe(0);
+    expect(d?.getDate()).toBe(5);
+  });
+
+  it("rejects out-of-range months/days instead of rolling over", () => {
+    expect(coerceToDate("2024-13-01")).toBeNull();
+    expect(coerceToDate("2024-02-31")).toBeNull();
+  });
+
+  it("passes through Date instances and epoch numbers", () => {
+    const now = new Date();
+    expect(coerceToDate(now)).toBe(now);
+    expect(coerceToDate(now.getTime())?.getTime()).toBe(now.getTime());
+  });
+
+  it("returns null for empty / invalid inputs", () => {
+    expect(coerceToDate(null)).toBeNull();
+    expect(coerceToDate("")).toBeNull();
+    expect(coerceToDate("   ")).toBeNull();
+    expect(coerceToDate("not a date")).toBeNull();
+    expect(coerceToDate(new Date("invalid"))).toBeNull();
+  });
+
+  it("still parses full ISO datetime strings", () => {
+    const d = coerceToDate("2024-01-15T10:30:00.000Z");
+    expect(d?.toISOString()).toBe("2024-01-15T10:30:00.000Z");
+  });
+});

package/src/fields/DatePicker/utils.ts

@@ -8,18 +8,29 @@
  * `toLocaleDateString` shifts them by one day in negative-offset timezones.
  * We construct them as local midnight so the day component round-trips.
  */
-const ISO_DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+// Forgiving date-only match: accepts `-`, `/`, `.`, or spaces as separators
+// and 1–2 digit month/day (paste normalization — DG input-mask dial: parse
+// forgivingly, never reject on separator style).
+const DATE_ONLY = /^(\d{4})[-/. ](\d{1,2})[-/. ](\d{1,2})$/;
 
 export function coerceToDate(input: unknown): Date | null {
   if (input == null || input === "") return null;
   if (input instanceof Date) return Number.isNaN(input.getTime()) ? null : input;
   if (typeof input === "string") {
-    const m = ISO_DATE_ONLY.exec(input);
+    // Forgiving normalize: trim padding and collapse runs of whitespace so
+    // pasted values like " 2024-01-15 " or "2024 01 15" parse.
+    const cleaned = input.trim().replace(/\s+/g, " ");
+    if (cleaned === "") return null;
+    const m = cleaned.match(DATE_ONLY);
     if (m) {
-      const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+      const month = Number(m[2]);
+      const day = Number(m[3]);
+      const d = new Date(Number(m[1]), month - 1, day);
+      // Reject rollover (e.g. 2024-13-45) instead of silently shifting.
+      if (d.getMonth() !== month - 1 || d.getDate() !== day) return null;
       return Number.isNaN(d.getTime()) ? null : d;
     }
-    const d = new Date(input);
+    const d = new Date(cleaned);
     return Number.isNaN(d.getTime()) ? null : d;
   }
   if (typeof input === "number") {

package/src/fields/Duration/Duration.stories.tsx

@@ -184,3 +184,9 @@ export const Interactive: Story = {
     return <InteractiveExample />;
   },
 };
+
+/** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
+export const SkeletonState: Story = {
+  args: { label: "Estimated Time", skeleton: true },
+  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};

package/src/fields/Duration/index.tsx

@@ -1,4 +1,5 @@
 import type { KnobProps } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useCallback, useMemo, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
@@ -7,8 +8,9 @@ import { Button } from "../../Button";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
-import { Input as InputParts } from "../../InputParts";
+import { FocusContext, Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
 import { TimeColumn, TimeColumnSeparator, generateRange } from "../../shared/TimeColumn";
 import {
   getFieldError,
@@ -18,6 +20,14 @@ import {
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
 
+/**
+ * The knob focus ring must be CSS-driven on the focused input itself
+ * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
+ * frame after focus, which synchronous a11y probes never see. Same
+ * OTP/Stepper/Input template — Box ring suppressed, ring lives on the Area.
+ */
+const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
+
 function secondsToHms(totalSeconds: number): { hours: number; minutes: number; seconds: number } {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
@@ -74,7 +84,7 @@ function DurationPopoverContent({
     <YStack {...knobProps.gap}>
       <XStack gap="$2" alignItems="flex-start" justifyContent="center">
         <TimeColumn
-          label="Hours"
+          label={t("Hours")}
           values={hourValues}
           selected={hours}
           onChange={(newHours) => onChange(hmsToSeconds(newHours, minutes, seconds))}
@@ -82,7 +92,7 @@ function DurationPopoverContent({
         />
         <TimeColumnSeparator knobProps={knobProps} />
         <TimeColumn
-          label="Min"
+          label={t("Min")}
           values={minuteValues}
           selected={minutes}
           onChange={(newMinutes) => onChange(hmsToSeconds(hours, newMinutes, seconds))}
@@ -92,7 +102,7 @@ function DurationPopoverContent({
           <>
             <TimeColumnSeparator knobProps={knobProps} />
             <TimeColumn
-              label="Sec"
+              label={t("Sec")}
               values={secondValues}
               selected={seconds}
               onChange={(newSeconds) => onChange(hmsToSeconds(hours, minutes, newSeconds))}
@@ -168,14 +178,23 @@ export function Duration({
   readOnly,
   showSeconds = false,
   presets = defaultPresets,
-  placeholder = "Select duration",
+  placeholder = t("Select duration"),
   clockIcon,
   skeleton,
   compact,
 }: DurationProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, control, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [open, setOpen] = useState(false);
+  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
+  const areaFocusRing = ensureFocusVisibleRing({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2,
+  });
 
   const displayValue = useMemo(() => {
     if (!value && value !== 0) return "";
@@ -201,16 +220,23 @@ export function Duration({
             <InputParts.Icon adornment="leading">{clockIcon}</InputParts.Icon>
           </InputParts.Section>
         )}
-        <InputParts.Area
-          readOnly
-          value={triggerValue}
-          placeholder={placeholder}
-          disabled={disabled}
-          color={formCommonColors.text}
-          aria-readonly={readOnly || undefined}
-          aria-required={required || undefined}
-          aria-invalid={hasError || undefined}
-        />
+        <FocusContext.Provider {...suppressBoxFocusRing}>
+          <InputParts.Area
+            readOnly
+            id={id}
+            value={triggerValue}
+            placeholder={placeholder}
+            disabled={disabled}
+            color={formCommonColors.text}
+            focusStyle={areaFocusRing}
+            focusVisibleStyle={areaFocusRing}
+            aria-labelledby={label ? `${id}-label` : undefined}
+            aria-label={label ? undefined : t("Duration")}
+            aria-readonly={readOnly || undefined}
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+          />
+        </FocusContext.Provider>
       </InputParts.Box>
     </InputParts>
   );
@@ -246,6 +272,9 @@ export function Duration({
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
       >
         {readOnly ? (
           renderTrigger(displayValue, !!error)
@@ -288,6 +317,8 @@ export function Duration({
             size={size}
             knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+            // LC-40: see standalone branch — FieldLayout carries dimWhole.
+            disabled={disabled}
           >
             {readOnly ? (
               renderTrigger(fieldDisplay, !!resolvedError)

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -1,4 +1,5 @@
-import { describe, expect, it } from "vitest";
+import { act, fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { FileUpload } from "./index";
 
@@ -17,4 +18,50 @@ describe("FileUpload", () => {
     expect(result.findTextElement("Upload your file")).toBeDefined();
     expect(result.findTextElement("Pick file")).toBeDefined();
   });
+
+  it("fires canonical onChange and the deprecated onValueChange alias once when a file is chosen", async () => {
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload
+        label="Attachment"
+        name="attachment"
+        onChange={onChange}
+        onValueChange={onValueChange}
+      />,
+    );
+
+    const input = result.container.querySelector("input[type='file']") as HTMLInputElement | null;
+    expect(input).toBeTruthy();
+    const file = new File(["hello"], "hello.txt", { type: "text/plain" });
+    await act(async () => {
+      if (input) fireEvent.change(input, { target: { files: [file] } });
+    });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(file);
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+    expect(onValueChange).toHaveBeenCalledWith(file);
+  });
+
+  it("associates the label with the dropzone (htmlFor resolves, aria-labelledby names it)", () => {
+    const result = renderWithProviders(<FileUpload label="Attachment" name="attachment" />);
+
+    const label = result.container.querySelector("label[for]") as HTMLLabelElement | null;
+    expect(label?.textContent).toContain("Attachment");
+    const forId = label?.getAttribute("for") as string;
+    const dropzone = result.container.querySelector(`[id="${forId}"]`) as HTMLElement | null;
+    expect(dropzone).toBeTruthy();
+    expect(dropzone?.getAttribute("role")).toBe("button");
+    const labelledBy = dropzone?.getAttribute("aria-labelledby");
+    expect(labelledBy).toBe(`${forId}-label`);
+    expect(document.getElementById(labelledBy as string)?.textContent).toContain("Attachment");
+  });
+
+  it("keeps an aria-label fallback on the dropzone when no label is given", () => {
+    const result = renderWithProviders(<FileUpload name="attachment" />);
+    const dropzone = result.container.querySelector('[role="button"]') as HTMLElement | null;
+    expect(dropzone?.getAttribute("aria-label")).toBeTruthy();
+    expect(dropzone?.getAttribute("aria-labelledby")).toBeNull();
+  });
 });

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -166,3 +166,9 @@ export const ImageOnly: Story = {
     maxSize: 5 * 1024 * 1024,
   },
 };
+
+/** Loading placeholder — the skeleton mirrors the dropzone's anatomy (LC-20 / DG-ST-02). */
+export const SkeletonState: Story = {
+  render: (args) => <FileUpload {...args} />,
+  args: { label: "Upload File", skeleton: true },
+};

package/src/fields/FileUpload/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../shared/utils";
 import type { FormFieldProps } from "../../fieldLayout";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
 
 export type FileUploadProps<
@@ -44,6 +45,13 @@ export type FileUploadProps<
     buttonText?: string;
     onFileSelect?: (files: FileList | null) => void;
     onFileRemove?: (file: File) => void;
+    /**
+     * Canonical change handler, consistent with the rest of the field family.
+     * Fires in both standalone and form mode. Prefer this over `onValueChange`.
+     */
+    onChange?: (value: TData) => void;
+    /** @deprecated Use `onChange` instead. */
+    onValueChange?: (value: TData) => void;
     /** When true, renders a skeleton placeholder instead of the file upload */
     skeleton?: boolean;
     /** When true, uses compact sizing */
@@ -62,10 +70,6 @@ const UploadAreaFrame = styled(YStack, {
         backgroundColor: "transparent",
       },
     },
-    disabledState: {
-      true: { opacity: 0.5 },
-      false: { opacity: 1 },
-    },
   } as const,
 });
 
@@ -90,10 +94,12 @@ export function FileUpload<
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = "Drag a file into this area",
-    buttonText = "Choose File",
+    placeholder = t("Drag a file into this area"),
+    buttonText = t("Choose File"),
     onFileSelect,
     onFileRemove,
+    onChange: onChangeProp,
+    onValueChange: onValueChangeProp,
     mode,
     name,
     preserveValue,
@@ -106,7 +112,20 @@ export function FileUpload<
     ...fieldProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, disabledState, id } = useFormField({
+    form,
+    id: idProp,
+    compact,
+  });
+  // Canonical `onChange` and the alias `onValueChange` both fire once per
+  // change through the internal handler chain (same reconciliation as Switch).
+  const emitChange = useCallback(
+    (nextValue: TData) => {
+      onChangeProp?.(nextValue);
+      onValueChangeProp?.(nextValue);
+    },
+    [onChangeProp, onValueChangeProp],
+  );
   const resolvedValidators = useResolvedValidators(
     fieldProps.required,
     validators,
@@ -132,17 +151,17 @@ export function FileUpload<
   }, []);
 
   const formatFileSize = useCallback((bytes: number): string => {
-    if (bytes === 0) return "0 Bytes";
+    if (bytes === 0) return t("0 Bytes");
     const k = 1024;
     const sizes = ["Bytes", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+    return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${t(sizes[i])}`;
   }, []);
 
   const validateFile = useCallback(
     (file: File): string | null => {
       if (maxSize && file.size > maxSize) {
-        return `File size must be less than ${formatFileSize(maxSize)}`;
+        return t("File size must be less than {{size}}", { size: formatFileSize(maxSize) });
       }
       if (accept) {
         const acceptedTypes = accept.split(",").map((type) => type.trim());
@@ -153,7 +172,7 @@ export function FileUpload<
           return file.type.match(type.replace("*", ".*"));
         });
         if (!isAccepted) {
-          return `File type not accepted. Accepted types: ${accept}`;
+          return t("File type not accepted. Accepted types: {{types}}", { types: accept });
         }
       }
       return null;
@@ -194,12 +213,10 @@ export function FileUpload<
         }
       });
 
-      if (errors.length > 0) {
-        setValidationError(errors.join("\n"));
-      }
+      // Surface every rejected file (even when other files passed); clear only on a fully valid selection
+      setValidationError(errors.length > 0 ? errors.join("\n") : undefined);
 
       if (validFiles.length > 0) {
-        setValidationError(undefined);
         setSelectedFiles((prev) => {
           const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
           syncFieldValue(nextFiles, onValueChange);
@@ -232,6 +249,20 @@ export function FileUpload<
     [onFileRemove, syncFieldValue],
   );
 
+  // Depth counter so dragenter/dragleave pairs from nested children don't cancel the highlight
+  const dragDepthRef = useRef(0);
+
+  const handleDragEnter = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      if (dragDrop) {
+        dragDepthRef.current += 1;
+        setIsDragOver(true);
+      }
+    },
+    [dragDrop],
+  );
+
   const handleDragOver = useCallback(
     (e: DragEvent) => {
       e.preventDefault();
@@ -244,12 +275,16 @@ export function FileUpload<
 
   const handleDragLeave = useCallback((e: DragEvent) => {
     e.preventDefault();
-    setIsDragOver(false);
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) {
+      setIsDragOver(false);
+    }
   }, []);
 
   const handleDrop = useCallback(
     (e: DragEvent, onValueChange?: (nextValue: TData) => void) => {
       e.preventDefault();
+      dragDepthRef.current = 0;
       setIsDragOver(false);
       if (dragDrop && e.dataTransfer.files) {
         handleFileSelect(e.dataTransfer.files, onValueChange, e.dataTransfer.files);
@@ -263,6 +298,36 @@ export function FileUpload<
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
 
+  // DROPZONE-FULL-TARGET: the whole dropzone surface opens the file chooser.
+  // Interactive children (Choose File button, per-file remove buttons, links)
+  // handle their own press and are excluded here so remove never opens the chooser.
+  const isInteractiveChild = useCallback((e: { target: unknown; currentTarget: unknown }) => {
+    const target = e.target as HTMLElement | null;
+    const current = e.currentTarget as HTMLElement | null;
+    if (!target?.closest || !current) return false;
+    const interactive = target.closest('button, a, input, select, textarea, [role="button"]');
+    return !!interactive && interactive !== current;
+  }, []);
+
+  const handleZoneClick = useCallback(
+    (e: { target: unknown; currentTarget: unknown }) => {
+      if (isInteractiveChild(e)) return;
+      openFileDialog();
+    },
+    [isInteractiveChild, openFileDialog],
+  );
+
+  const handleZoneKeyDown = useCallback(
+    (e: { target: unknown; currentTarget: unknown; key?: string; preventDefault?: () => void }) => {
+      if (e.target !== e.currentTarget) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault?.();
+        openFileDialog();
+      }
+    },
+    [openFileDialog],
+  );
+
   const getFilePreview = useCallback((file: File) => {
     if (!isWeb) return null;
     if (file.type.startsWith("image/")) {
@@ -297,7 +362,9 @@ export function FileUpload<
       return (
         <UploadAreaFrame
           outlined={knobProps.outlined}
-          disabledState={!!disabled}
+          // LC-40: text-bearing chrome — surface wash, not an opacity dim
+          // (a dim here stacks with the inner Button's treatment).
+          {...(disabled ? disabledState.surfaceKnobProps : undefined)}
           borderRadius={cappedRadius}
           // Intentional: extract borderWidth from knobProps.borderRadius fragment
           // to use as a fallback value, not as a style spread.
@@ -318,7 +385,7 @@ export function FileUpload<
             {...knobProps.gap}
           >
             <Paragraph color={formCommonColors.text} textAlign="center">
-              File upload requires a native file picker.
+              {t("File upload requires a native file picker.")}
             </Paragraph>
             <Paragraph color={formCommonColors.muted} textAlign="center" fontSize="$2">
               Use expo-document-picker or expo-image-picker for native support.
@@ -330,8 +397,14 @@ export function FileUpload<
 
     return (
       <UploadAreaFrame
+        // The dropzone is this field's control: it carries the FieldLayout id
+        // so the rendered `<label htmlFor>` resolves (family pattern — see
+        // Barcode / ColorPicker for other non-native-input controls).
+        id={id}
         outlined={knobProps.outlined}
-        disabledState={!!disabled}
+        // LC-40: text-bearing chrome — surface wash, not an opacity dim
+        // (a dim here stacks with the inner Button's treatment).
+        {...(disabled ? disabledState.surfaceKnobProps : undefined)}
         borderRadius={cappedRadius}
         // Intentional: extract borderWidth from knobProps.borderRadius fragment
         // to conditionally override with drag-over state (2px) vs knob value.
@@ -343,6 +416,27 @@ export function FileUpload<
         aria-required={fieldProps.required || undefined}
         aria-invalid={!!errorProp || undefined}
         aria-readonly={readOnly || undefined}
+        {...(canInteract
+          ? ({
+              // DROPZONE-FULL-TARGET: the entire surface is the click target.
+              role: "button",
+              tabIndex: 0,
+              // Labeled fields get aria-labelledby auto-wired by the
+              // FieldLayout Label (tamagui Label htmlFor → this id); the
+              // aria-label fallback covers label-less usage.
+              ...(fieldProps.label && id
+                ? null
+                : {
+                    "aria-label":
+                      typeof fieldProps.label === "string"
+                        ? t("{{label}}: choose file", { label: fieldProps.label })
+                        : t("Choose file"),
+                  }),
+              cursor: "pointer",
+              onClick: handleZoneClick,
+              onKeyDown: handleZoneKeyDown,
+            } as any)
+          : {})}
       >
         <YStack
           {...knobProps.panelPadding}
@@ -353,6 +447,7 @@ export function FileUpload<
           {...knobProps.gap}
           {...(canInteract
             ? ({
+                onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
                 onDrop: (e: DragEvent) => {
@@ -406,10 +501,13 @@ export function FileUpload<
                     {preview ? (
                       <Image
                         borderRadius={cappedRadius}
-                        source={{ uri: preview }}
+                        // src (string), not source: the RN source object leaks
+                        // onto the DOM <img> as source="[object Object]" on web
+                        src={preview}
+                        alt={file.name}
                         width={32}
                         height={32}
-                        resizeMode="cover"
+                        objectFit="cover"
                       />
                     ) : (
                       <XStack width={20} height={20} justifyContent="center" alignItems="center">
@@ -462,8 +560,11 @@ export function FileUpload<
         required={fieldProps.required}
         size={fieldProps.size}
         knobProps={knobProps}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
       >
-        {renderUploadArea(standaloneError, undefined)}
+        {renderUploadArea(standaloneError, emitChange)}
       </FieldLayout>
     );
   }
@@ -490,10 +591,16 @@ export function FileUpload<
             required={fieldProps.required}
             size={fieldProps.size}
             knobProps={knobProps}
+            // LC-40: see standalone branch — FieldLayout carries dimWhole.
+            disabled={disabled}
           >
             {renderUploadArea(
               error,
-              (nextValue) => field.handleChange(nextValue as any),
+              (nextValue) => {
+                field.handleChange(nextValue as any);
+                // Form mode also notifies user callbacks (family norm).
+                emitChange(nextValue);
+              },
               mergeFieldHandler(field, "handleBlur", fieldProps.onBlur),
             )}
           </FieldLayout>