From c4b7a4590372f84dfdfbdfbe20f3a3ca03cd853f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 29 Oct 2026 13:25:34 +0000
Subject: [PATCH 1/5] fix(fields,components): an unreadable typed date is a
 field error that refuses submit

The date / datetime picker never writes text that names no date, so the
form kept its old value and saved it as if nothing had been typed. The
picker now reports such text through a new onInvalidInputChange widget
prop, and the form renderer turns the report into the field's
validation error, which refuses submit the way a missing required value
does.

Claude-Session: https://claude.ai/code/session_01Utp6CXAtdK85r4832Kydbf
Co-authored-by: Claude <noreply@anthropic.com>
---
 ...nvalid-input-refuses-submit-27483.test.tsx | 110 ++++++++++++
 .../components/src/renderers/form/form.tsx    |  29 +++
 ...-invalid-text-blocks-submit-27483.test.tsx | 170 ++++++++++++++++++
 .../DatePickerField-12622.test.tsx            |  49 +++++
 .../widgets/date-picker/DatePickerField.tsx   |  28 ++-
 ui/packages/fields/src/widgets/toHostProps.ts |   3 +
 ui/packages/fields/src/widgets/types.ts       |  15 ++
 7 files changed, 401 insertions(+), 3 deletions(-)
 create mode 100644 ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx
 create mode 100644 ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx

diff --git a/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx b/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx
new file mode 100644
index 00000000000..132749aca47
--- /dev/null
+++ b/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx
@@ -0,0 +1,110 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectstack#27483 — the form renderer's half of the `onInvalidInputChange`
+ * channel: a widget's report of text it could not parse becomes the field's
+ * validation error and refuses submit; withdrawing it lets the submit through;
+ * and only the widgets that report receive the callback.
+ *
+ * The real date picker lives in `@object-ui/fields`, which components tests
+ * never load (its end-to-end pin is there); a probe stands in for it here.
+ */
+
+import React from 'react';
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ComponentRegistry } from '@object-ui/core';
+// Module scope, not `beforeAll` — the cold transform must not be billed to
+// `hookTimeout`. See object-ui/no-dynamic-import-in-test-hook (objectui#3010).
+import '../../../renderers';
+
+const MESSAGE = 'Not saved: "13/45/2026" is not a date.';
+
+function ReportingProbe(props: any) {
+  return (
+    <div data-testid={`probe-${props.field?.name}`} data-has-key={'onInvalidInputChange' in props ? 'yes' : 'no'}>
+      <button type="button" onClick={() => props.onInvalidInputChange?.(MESSAGE)}>
+        report
+      </button>
+      <button type="button" onClick={() => props.onInvalidInputChange?.(null)}>
+        withdraw
+      </button>
+    </div>
+  );
+}
+
+beforeAll(() => {
+  ComponentRegistry.register('field:date', ReportingProbe, { namespace: 'test' });
+  // A registered widget that does not report: the strip must keep the key off it.
+  ComponentRegistry.register('field:lookup', ReportingProbe, { namespace: 'test' });
+}, 30000);
+
+beforeEach(() => {
+  if (!(Element.prototype as any).scrollIntoView) {
+    (Element.prototype as any).scrollIntoView = () => {};
+  }
+});
+
+function renderForm(onSubmit: (data: Record<string, unknown>) => void) {
+  const Form = ComponentRegistry.get('form')!;
+  return render(
+    <Form
+      schema={{
+        type: 'form',
+        showSubmit: true,
+        showCancel: false,
+        submitLabel: 'Create',
+        defaultValues: { due: null },
+        fields: [
+          { name: 'due', label: 'Due Date', type: 'field:date' },
+          { name: 'account', label: 'Account', type: 'field:lookup' },
+        ],
+        onSubmit,
+      }}
+    />,
+  );
+}
+
+const dueRow = () => document.querySelector('[data-field="due"]') as HTMLElement;
+const within = (row: HTMLElement, name: string) =>
+  Array.from(row.querySelectorAll('button')).find((b) => b.textContent === name)!;
+
+describe('form renderer — unparseable widget input is a field error (objectstack#27483)', () => {
+  it('a report shows as the field message at once and refuses submit', async () => {
+    const onSubmit = vi.fn();
+    renderForm(onSubmit);
+
+    fireEvent.click(within(dueRow(), 'report'));
+    await waitFor(() => expect(dueRow().textContent).toContain(MESSAGE));
+
+    const scroll = vi.spyOn(Element.prototype as any, 'scrollIntoView');
+    fireEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => expect(scroll).toHaveBeenCalled());
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('a withdrawn report clears the error and the submit goes through', async () => {
+    const onSubmit = vi.fn();
+    renderForm(onSubmit);
+
+    fireEvent.click(within(dueRow(), 'report'));
+    await waitFor(() => expect(dueRow().textContent).toContain(MESSAGE));
+    fireEvent.click(within(dueRow(), 'withdraw'));
+    await waitFor(() => expect(dueRow().textContent).not.toContain(MESSAGE));
+
+    fireEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+  });
+
+  it('only the reporting widget types receive the callback', () => {
+    renderForm(() => {});
+    expect(screen.getByTestId('probe-due')).toHaveAttribute('data-has-key', 'yes');
+    expect(screen.getByTestId('probe-account')).toHaveAttribute('data-has-key', 'no');
+  });
+});
diff --git a/ui/packages/components/src/renderers/form/form.tsx b/ui/packages/components/src/renderers/form/form.tsx
index 88b12b82310..c3d119a7bf0 100644
--- a/ui/packages/components/src/renderers/form/form.tsx
+++ b/ui/packages/components/src/renderers/form/form.tsx
@@ -1219,6 +1219,7 @@ function stripRegisteredFieldProps(type: string, props: RenderFieldProps): Rende
     dependentValues,
     dependsOnLabels,
     emptyHint,
+    onInvalidInputChange,
     // Renderer-only, and deliberately NOT a new key in the widget contract
     // (objectui#3393). The call site started forwarding `label` for the
     // built-in fullscreen dialog; registered widgets must keep receiving
@@ -1253,9 +1254,15 @@ function stripRegisteredFieldProps(type: string, props: RenderFieldProps): Rende
     // leftover props onto a DOM node, where an unknown `emptyHint` attribute is
     // a React warning — hence an allow-list, not an unconditional pass-through.
     ...(CASCADE_OPTION_WIDGET_TYPES.has(normalizedType) ? { dependentValues, emptyHint } : {}),
+    // Only the widgets that report unparseable text read it; every other one
+    // would spread an unknown handler onto its DOM (objectstack#27483).
+    ...(INVALID_INPUT_REPORTING_WIDGET_TYPES.has(normalizedType) ? { onInvalidInputChange } : {}),
   };
 }
 
+/** The registered widgets that fire `onInvalidInputChange`: the date picker's two faces. */
+const INVALID_INPUT_REPORTING_WIDGET_TYPES: ReadonlySet<string> = new Set(['date', 'datetime']);
+
 /**
  * FullscreenTextarea — `<Textarea>` with a top-right "expand" button that
  * opens a fullscreen edit dialog. Mobile UX (round 3) — driven by the form
@@ -3216,6 +3223,11 @@ ComponentRegistry.register('form',
     // on every render — the same React footgun documented at the call site.
     const requiredMessagesRef = React.useRef<Map<string, string> | undefined>(undefined);
     const requiredMessages = (requiredMessagesRef.current ??= new Map<string, string>());
+    // Per field name, the message of text its widget could not parse
+    // (`onInvalidInputChange`, objectstack#27483); absent ⇒ none. A ref for the
+    // reasons `requiredMessages` gives: read by a validator at call time.
+    const invalidInputMessagesRef = React.useRef<Map<string, string> | undefined>(undefined);
+    const invalidInputMessages = (invalidInputMessagesRef.current ??= new Map<string, string>());
 
     // --- Field rendering ---------------------------------------------------
     // Renders ONE field row (or a virtual section divider). Hoisted out of the
@@ -3412,6 +3424,11 @@ ComponentRegistry.register('form',
       }
       const authoredValidate = rules.validate;
       rules.validate = {
+        // Text the widget could not parse was never written, so the value
+        // cannot speak for it: this verdict comes first, under its own key,
+        // and refuses submit the way a missing required value does
+        // (objectstack#27483).
+        invalidInput: () => invalidInputMessages.get(name) ?? true,
         // A field-authored `validate` keeps running, and keeps its own
         // `type: 'validate'` error key.
         ...(typeof authoredValidate === 'function'
@@ -3799,6 +3816,18 @@ ComponentRegistry.register('form',
                   // Undefined when the field is valid, so the key is simply
                   // absent from the DOM rather than rendering `error=""`.
                   error: fieldState.error?.message,
+                  // The widget's verdict on text it could not parse, turned
+                  // into this field's `invalidInput` error at once (above);
+                  // withdrawn, it clears only that error (objectstack#27483).
+                  onInvalidInputChange: (message: string | null) => {
+                    if (message === null) {
+                      if (!invalidInputMessages.delete(name)) return;
+                      if (form.getFieldState(name).error?.type === 'invalidInput') form.clearErrors(name);
+                      return;
+                    }
+                    invalidInputMessages.set(name, message);
+                    void form.trigger(name);
+                  },
                   // Required is a STATE, so it travels the state channel
                   // (objectui#3290). Until now the resolved `required` (static
                   // `required` + `requiredWhen` CEL) drove exactly one thing —
diff --git a/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx b/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx
new file mode 100644
index 00000000000..db2ab35e4d7
--- /dev/null
+++ b/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx
@@ -0,0 +1,170 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectstack#27483 — a date typed in a form the picker cannot read is a
+ * validation error, not a silent drop.
+ *
+ * The picker never writes text that names no date (`13/45/2026`), so the form
+ * value stayed what it was: the record saved with an empty Due Date and a
+ * success toast. The picker now reports such text through
+ * `onInvalidInputChange`, and the form renderer turns it into the field's
+ * error, which refuses submit the way a missing required value does.
+ *
+ * Mounted through the real `form` renderer with the production registration of
+ * the picker, because the defect lives in the hand-off between the two.
+ */
+
+import React from 'react';
+import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ComponentRegistry } from '@object-ui/core';
+// Module scope: pulls in the form renderer's registration side effect.
+import '@object-ui/components';
+
+import { withFieldCarrier } from '../withFieldCarrier';
+import { DatePickerField, DateTimePickerField } from '../widgets/date-picker/DatePickerField';
+
+beforeAll(() => {
+  ComponentRegistry.register('date', withFieldCarrier(DatePickerField) as any, {
+    namespace: 'field',
+    skipFallback: true,
+  });
+  ComponentRegistry.register('datetime', withFieldCarrier(DateTimePickerField) as any, {
+    namespace: 'field',
+    skipFallback: true,
+  });
+}, 60000);
+
+beforeEach(() => {
+  if (!(Element.prototype as any).scrollIntoView) {
+    (Element.prototype as any).scrollIntoView = () => {};
+  }
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function renderForm(type: 'date' | 'datetime', onSubmit: (data: Record<string, unknown>) => void) {
+  const Form = ComponentRegistry.get('form')!;
+  return render(
+    <Form
+      schema={{
+        type: 'form',
+        mode: 'create',
+        showSubmit: true,
+        showCancel: false,
+        submitLabel: 'Create',
+        defaultValues: { title: 'Walkthrough task', due: null },
+        fields: [
+          { name: 'title', label: 'Title', type: 'text' },
+          { name: 'due', label: 'Due Date', type: `field:${type}` },
+        ],
+        onSubmit,
+      }}
+    />,
+  );
+}
+
+async function dueBox(): Promise<HTMLInputElement> {
+  return waitFor(() => {
+    const input = document.querySelector('[data-field="due"] [data-slot="date-picker"] input');
+    if (!input) throw new Error('date picker never rendered');
+    return input as HTMLInputElement;
+  });
+}
+
+const typeAndLeave = (input: HTMLInputElement, text: string) => {
+  fireEvent.change(input, { target: { value: text } });
+  fireEvent.blur(input);
+};
+
+const dueRow = () => document.querySelector('[data-field="due"]') as HTMLElement;
+
+/** Press Create and wait for the refusal to land: the form scrolls to its first invalid field. */
+async function submitAndSeeRefusal() {
+  const scroll = vi.spyOn(Element.prototype as any, 'scrollIntoView');
+  fireEvent.click(screen.getByRole('button', { name: /create/i }));
+  await waitFor(() => expect(scroll).toHaveBeenCalled());
+}
+
+describe('an unreadable typed date refuses submit (objectstack#27483)', () => {
+  it('13/45/2026 marks the field invalid and sends nothing', async () => {
+    const onSubmit = vi.fn();
+    renderForm('date', onSubmit);
+    const input = await dueBox();
+
+    typeAndLeave(input, '13/45/2026');
+    // Shown on leaving the field, before any submit: the form's own message,
+    // naming the format, and the picker's notice is not drawn beside it.
+    await waitFor(() => expect(dueRow().textContent).toContain('MM/DD/YYYY'));
+    expect(dueRow().querySelector('[data-testid="date-picker-notice"]')).toBeNull();
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+
+    await submitAndSeeRefusal();
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(input.value).toBe('13/45/2026');
+  });
+
+  it('correcting the text clears the error and the typed day is saved', async () => {
+    const onSubmit = vi.fn();
+    renderForm('date', onSubmit);
+    const input = await dueBox();
+
+    typeAndLeave(input, '13/45/2026');
+    await waitFor(() => expect(input).toHaveAttribute('aria-invalid', 'true'));
+
+    typeAndLeave(input, '10/20/2026');
+    await waitFor(() => expect(dueRow().textContent).not.toContain('MM/DD/YYYY'));
+    expect(input).toHaveAttribute('aria-invalid', 'false');
+
+    fireEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    expect(onSubmit.mock.calls[0][0]).toMatchObject({ title: 'Walkthrough task', due: '2026-10-20' });
+  });
+
+  it('clearing the bad text withdraws the error and an empty optional date saves', async () => {
+    const onSubmit = vi.fn();
+    renderForm('date', onSubmit);
+    const input = await dueBox();
+
+    typeAndLeave(input, '13/45/2026');
+    await waitFor(() => expect(input).toHaveAttribute('aria-invalid', 'true'));
+
+    fireEvent.click(screen.getByTestId('date-picker-clear'));
+    await waitFor(() => expect(input).toHaveAttribute('aria-invalid', 'false'));
+
+    fireEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+  });
+
+  it('a valid typed date saves untouched (control)', async () => {
+    const onSubmit = vi.fn();
+    renderForm('date', onSubmit);
+    typeAndLeave(await dueBox(), '10/20/2026');
+
+    fireEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    expect(onSubmit.mock.calls[0][0]).toMatchObject({ due: '2026-10-20' });
+  });
+
+  it('datetime: an unreadable date and time refuses submit the same way', async () => {
+    const onSubmit = vi.fn();
+    renderForm('datetime', onSubmit);
+    const input = await dueBox();
+
+    typeAndLeave(input, '13/45/2026 25:99');
+    await waitFor(() => expect(input).toHaveAttribute('aria-invalid', 'true'));
+
+    await submitAndSeeRefusal();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});
diff --git a/ui/packages/fields/src/widgets/date-picker/DatePickerField-12622.test.tsx b/ui/packages/fields/src/widgets/date-picker/DatePickerField-12622.test.tsx
index b5c05d6dfa2..5f9c3b68f01 100644
--- a/ui/packages/fields/src/widgets/date-picker/DatePickerField-12622.test.tsx
+++ b/ui/packages/fields/src/widgets/date-picker/DatePickerField-12622.test.tsx
@@ -89,6 +89,44 @@ describe('DatePickerField — the picker, not the native input (objectui#12622)'
     expect(screen.getByTestId('date-picker-notice').textContent).toContain('MM/DD/YYYY');
   });
 
+  // objectstack#27483: unwritten text has to reach the host, or a form saves
+  // the old value as if nothing had been typed.
+  it('reports text naming no date to a host that takes it, and leaves the text to the host', () => {
+    const onChange = vi.fn();
+    const onInvalidInputChange = vi.fn();
+    const { container } = render(
+      <DatePickerField value="" onChange={onChange} field={FIELD} onInvalidInputChange={onInvalidInputChange} />,
+    );
+    expect(onInvalidInputChange).not.toHaveBeenCalled();
+    typeAndCommit(textBox(container), '13/45/2026');
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onInvalidInputChange).toHaveBeenCalledTimes(1);
+    expect(onInvalidInputChange.mock.calls[0][0]).toContain('13/45/2026');
+    expect(onInvalidInputChange.mock.calls[0][0]).toContain('MM/DD/YYYY');
+    expect(textBox(container).getAttribute('aria-invalid')).toBe('true');
+    expect(screen.queryByTestId('date-picker-notice')).toBeNull();
+
+    typeAndCommit(textBox(container), '10/20/2026');
+    expect(onChange).toHaveBeenCalledWith('2026-10-20');
+    expect(onInvalidInputChange).toHaveBeenLastCalledWith(null);
+    expect(onInvalidInputChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('withdraws the report on clear and on unmount', () => {
+    const onInvalidInputChange = vi.fn();
+    const { container, unmount } = render(
+      <DatePickerField value="" onChange={() => {}} field={FIELD} onInvalidInputChange={onInvalidInputChange} />,
+    );
+    typeAndCommit(textBox(container), '13/45/2026');
+    fireEvent.click(screen.getByTestId('date-picker-clear'));
+    expect(onInvalidInputChange).toHaveBeenLastCalledWith(null);
+
+    typeAndCommit(textBox(container), 'nonsense');
+    expect(onInvalidInputChange.mock.lastCall?.[0]).toContain('nonsense');
+    unmount();
+    expect(onInvalidInputChange).toHaveBeenLastCalledWith(null);
+  });
+
   it('a calendar pick writes the ISO day', async () => {
     const onChange = vi.fn();
     render(<DatePickerField value="2026-10-16" onChange={onChange} field={FIELD} />);
@@ -162,6 +200,17 @@ describe('DateTimePickerField — writes an ISO instant (objectui#12622)', () =>
     expect(written).toBe(new Date(2026, 9, 16, 14, 30).toISOString());
   });
 
+  it('reports a date and time naming no instant to a host that takes it (objectstack#27483)', () => {
+    const onChange = vi.fn();
+    const onInvalidInputChange = vi.fn();
+    const { container } = render(
+      <DateTimePickerField value="" onChange={onChange} field={DT_FIELD} onInvalidInputChange={onInvalidInputChange} />,
+    );
+    typeAndCommit(textBox(container), '13/45/2026 25:99');
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onInvalidInputChange.mock.calls[0][0]).toContain('13/45/2026 25:99');
+  });
+
   it('a calendar pick keeps the value time', async () => {
     const onChange = vi.fn();
     const iso = new Date(2026, 9, 16, 9, 15).toISOString();
diff --git a/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx b/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx
index 4589403df3b..556b44a4b73 100644
--- a/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx
+++ b/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx
@@ -79,6 +79,7 @@ function TemporalPicker({
   field,
   readonly,
   error,
+  onInvalidInputChange,
   withTime,
   ...props
 }: FieldWidgetComponentProps<string> & { withTime: boolean }) {
@@ -106,6 +107,27 @@ function TemporalPicker({
     setBadText(null);
   }
 
+  // Text that names no date is never written, so the host has to be told, or
+  // the form saves the old value as if nothing had been typed
+  // (objectstack#27483). Reported on change only, and withdrawn on unmount.
+  const pattern = localeDatePattern(locale, withTime);
+  const invalidMessage = !readonly && badText !== null
+    ? t('fields.datePicker.invalid', { value: badText, format: pattern })
+    : null;
+  const reportInvalid = React.useRef(onInvalidInputChange);
+  reportInvalid.current = onInvalidInputChange;
+  const reported = React.useRef<string | null>(null);
+  React.useEffect(() => {
+    if (reported.current === invalidMessage) return;
+    reported.current = invalidMessage;
+    reportInvalid.current?.(invalidMessage);
+  }, [invalidMessage]);
+  React.useEffect(() => () => {
+    if (reported.current === null) return;
+    reported.current = null;
+    reportInvalid.current?.(null);
+  }, []);
+
   if (readonly) {
     const ReadonlyFace = withTime ? DateTimeField : DateField;
     return <ReadonlyFace value={value} onChange={onChange} field={field} readonly error={error} {...props} />;
@@ -147,9 +169,9 @@ function TemporalPicker({
   };
 
   const selected = nativeValue ? fromLocalDay(nativeValue) : undefined;
-  const pattern = localeDatePattern(locale, withTime);
-  const notice = badText !== null
-    ? t('fields.datePicker.invalid', { value: badText, format: pattern })
+  // A host that takes the report shows its text as the field's error.
+  const notice = invalidMessage !== null && !onInvalidInputChange
+    ? invalidMessage
     : impossible
       ? t(withTime ? 'fields.dateTime.impossibleDay' : 'fields.date.impossibleDay', { value: String(value) })
       : null;
diff --git a/ui/packages/fields/src/widgets/toHostProps.ts b/ui/packages/fields/src/widgets/toHostProps.ts
index eb2b2ba8dfb..3d54a23414a 100644
--- a/ui/packages/fields/src/widgets/toHostProps.ts
+++ b/ui/packages/fields/src/widgets/toHostProps.ts
@@ -102,6 +102,9 @@ const HOST_PLUMBING_KEYS = [
   // declared key that happens to have no reader is the correct half of
   // enforce-or-remove; withholding it would leave the contract lying.
   'onUploadingChange',
+  // `onInvalidInputChange` is delivered on the same ground: no inline-edit
+  // host passes it today, so the date picker there keeps its own notice.
+  'onInvalidInputChange',
 
   /* ── The contract's own "Host plumbing" block, verbatim ────────────────── */
   //
diff --git a/ui/packages/fields/src/widgets/types.ts b/ui/packages/fields/src/widgets/types.ts
index b9b7931029a..f0cfc7524e8 100644
--- a/ui/packages/fields/src/widgets/types.ts
+++ b/ui/packages/fields/src/widgets/types.ts
@@ -159,6 +159,21 @@ export type FieldWidgetComponentProps<T = any> = {
    * widgets ignore it.
    */
   onUploadingChange?: (uploading: boolean) => void;
+  /**
+   * The free-text widgets that parse what was typed (`date` / `datetime`'s
+   * picker) fire this when the text the user committed names no value, with
+   * the message to show, and with `null` once the text is valid, cleared, or
+   * the widget unmounts. Such text is never written through `onChange`, so
+   * without this channel the value stays what it was and the form saves it as
+   * if nothing had been typed (objectstack#27483).
+   *
+   * **Producer**: `DatePickerField` / `DateTimePickerField`.
+   * **Consumer**: the form renderer, which turns the message into a field
+   * validation error that blocks submit, the way a missing required value is.
+   * A widget given this callback leaves the message TEXT to the host's
+   * `<FormMessage/>`, as for `error`; one that is not keeps its own notice.
+   */
+  onInvalidInputChange?: (message: string | null) => void;
 
   /* ── Host plumbing: what a rendering host actually forwards ─────────────── */
 

From f52054793f72d65d215238f3608d51d727122a11 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 29 Oct 2026 13:30:36 +0000
Subject: [PATCH 2/5] chore(changeset): an unreadable typed date refuses submit

Claude-Session: https://claude.ai/code/session_01Utp6CXAtdK85r4832Kydbf
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../27483-invalid-typed-date-refuses-submit.md     | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .changeset/27483-invalid-typed-date-refuses-submit.md

diff --git a/.changeset/27483-invalid-typed-date-refuses-submit.md b/.changeset/27483-invalid-typed-date-refuses-submit.md
new file mode 100644
index 00000000000..433405f2e01
--- /dev/null
+++ b/.changeset/27483-invalid-typed-date-refuses-submit.md
@@ -0,0 +1,14 @@
+---
+'@object-ui/fields': patch
+'@object-ui/components': patch
+---
+
+fix(fields, components): a date typed in a form the picker cannot read is a field error that refuses submit, not a silent drop (#27483)
+
+Clause-②: no
+Metadata-protocol: none
+
+Typing `13/45/2026` into a record form's date field and pressing Create saved the record with the date empty (or, on edit, with the old date) and a success toast. The picker never writes text that names no date, so the form value stayed what it was and nothing told the form.
+
+- **Now.** The text box is marked invalid as soon as the user leaves it, the field shows the picker's message (the typed text and the expected format) as its form error, and submit is refused the way a missing required value is: the dialog stays open and nothing is sent. Correcting or clearing the text withdraws the error. `datetime` fields behave the same.
+- **`onInvalidInputChange`** is a new optional widget prop on `FieldWidgetComponentProps` (`@object-ui/fields`): a widget that parses typed text fires it with a message when the committed text names no value, and with `null` once it is valid, cleared, or unmounted. The `form` renderer (`@object-ui/components`) turns the message into the field's `invalidInput` validation error and passes the callback to the `date` / `datetime` widgets only. A widget given the callback leaves the message text to the form; hosts that pass none (the grid's inline editor, the action-param dialog) keep the picker's own notice, unchanged.

From dc95a312ec575963755857368fe1c9bd50bfcbbe Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 29 Oct 2026 13:36:28 +0000
Subject: [PATCH 3/5] fix(fields): the date picker reads its report callback
 from a ref set in an effect, not during render

Claude-Session: https://claude.ai/code/session_01Utp6CXAtdK85r4832Kydbf
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../fields/src/widgets/date-picker/DatePickerField.tsx        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx b/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx
index 556b44a4b73..661f673717e 100644
--- a/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx
+++ b/ui/packages/fields/src/widgets/date-picker/DatePickerField.tsx
@@ -115,7 +115,9 @@ function TemporalPicker({
     ? t('fields.datePicker.invalid', { value: badText, format: pattern })
     : null;
   const reportInvalid = React.useRef(onInvalidInputChange);
-  reportInvalid.current = onInvalidInputChange;
+  React.useEffect(() => {
+    reportInvalid.current = onInvalidInputChange;
+  });
   const reported = React.useRef<string | null>(null);
   React.useEffect(() => {
     if (reported.current === invalidMessage) return;

From c4826848bdfe73d2193760a6dabcfb4596fcad95 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 29 Oct 2026 15:05:32 +0000
Subject: [PATCH 4/5] test(fields,components): the #27483 pins type their probe
 and registrations instead of casting to any

Claude-Session: https://claude.ai/code/session_01Utp6CXAtdK85r4832Kydbf
Co-authored-by: Claude <noreply@anthropic.com>
---
 ...form-invalid-input-refuses-submit-27483.test.tsx | 13 +++++++++----
 ...picker-invalid-text-blocks-submit-27483.test.tsx | 10 +++++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx b/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx
index 132749aca47..9b72523fc35 100644
--- a/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx
+++ b/ui/packages/components/src/renderers/form/__tests__/form-invalid-input-refuses-submit-27483.test.tsx
@@ -26,7 +26,12 @@ import '../../../renderers';
 
 const MESSAGE = 'Not saved: "13/45/2026" is not a date.';
 
-function ReportingProbe(props: any) {
+type ProbeProps = {
+  field?: { name?: string };
+  onInvalidInputChange?: (message: string | null) => void;
+};
+
+function ReportingProbe(props: ProbeProps) {
   return (
     <div data-testid={`probe-${props.field?.name}`} data-has-key={'onInvalidInputChange' in props ? 'yes' : 'no'}>
       <button type="button" onClick={() => props.onInvalidInputChange?.(MESSAGE)}>
@@ -46,8 +51,8 @@ beforeAll(() => {
 }, 30000);
 
 beforeEach(() => {
-  if (!(Element.prototype as any).scrollIntoView) {
-    (Element.prototype as any).scrollIntoView = () => {};
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => {};
   }
 });
 
@@ -83,7 +88,7 @@ describe('form renderer — unparseable widget input is a field error (objectsta
     fireEvent.click(within(dueRow(), 'report'));
     await waitFor(() => expect(dueRow().textContent).toContain(MESSAGE));
 
-    const scroll = vi.spyOn(Element.prototype as any, 'scrollIntoView');
+    const scroll = vi.spyOn(Element.prototype, 'scrollIntoView');
     fireEvent.click(screen.getByRole('button', { name: /create/i }));
     await waitFor(() => expect(scroll).toHaveBeenCalled());
     expect(onSubmit).not.toHaveBeenCalled();
diff --git a/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx b/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx
index db2ab35e4d7..9a134cfb441 100644
--- a/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx
+++ b/ui/packages/fields/src/__tests__/date-picker-invalid-text-blocks-submit-27483.test.tsx
@@ -32,19 +32,19 @@ import { withFieldCarrier } from '../withFieldCarrier';
 import { DatePickerField, DateTimePickerField } from '../widgets/date-picker/DatePickerField';
 
 beforeAll(() => {
-  ComponentRegistry.register('date', withFieldCarrier(DatePickerField) as any, {
+  ComponentRegistry.register('date', withFieldCarrier(DatePickerField), {
     namespace: 'field',
     skipFallback: true,
   });
-  ComponentRegistry.register('datetime', withFieldCarrier(DateTimePickerField) as any, {
+  ComponentRegistry.register('datetime', withFieldCarrier(DateTimePickerField), {
     namespace: 'field',
     skipFallback: true,
   });
 }, 60000);
 
 beforeEach(() => {
-  if (!(Element.prototype as any).scrollIntoView) {
-    (Element.prototype as any).scrollIntoView = () => {};
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => {};
   }
 });
 
@@ -91,7 +91,7 @@ const dueRow = () => document.querySelector('[data-field="due"]') as HTMLElement
 
 /** Press Create and wait for the refusal to land: the form scrolls to its first invalid field. */
 async function submitAndSeeRefusal() {
-  const scroll = vi.spyOn(Element.prototype as any, 'scrollIntoView');
+  const scroll = vi.spyOn(Element.prototype, 'scrollIntoView');
   fireEvent.click(screen.getByRole('button', { name: /create/i }));
   await waitFor(() => expect(scroll).toHaveBeenCalled());
 }

From 81611c8a5358c3956e5b8b1c19f57f7209b2ed2a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 29 Oct 2026 15:29:08 +0000
Subject: [PATCH 5/5] =?UTF-8?q?chore(changeset):=20declare=20Clause-?=
 =?UTF-8?q?=E2=91=A1=20yes=20(widening)=20for=20the=20new=20optional=20wid?=
 =?UTF-8?q?get=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FieldWidgetComponentProps is exported from @object-ui/fields, so the
optional onInvalidInputChange key widens its published surface.

Claude-Session: https://claude.ai/code/session_01Utp6CXAtdK85r4832Kydbf
Co-authored-by: Claude <noreply@anthropic.com>
---
 .changeset/27483-invalid-typed-date-refuses-submit.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/27483-invalid-typed-date-refuses-submit.md b/.changeset/27483-invalid-typed-date-refuses-submit.md
index 433405f2e01..dc69cb107b8 100644
--- a/.changeset/27483-invalid-typed-date-refuses-submit.md
+++ b/.changeset/27483-invalid-typed-date-refuses-submit.md
@@ -5,10 +5,10 @@
 
 fix(fields, components): a date typed in a form the picker cannot read is a field error that refuses submit, not a silent drop (#27483)
 
-Clause-②: no
+Clause-②: yes (widening)
 Metadata-protocol: none
 
 Typing `13/45/2026` into a record form's date field and pressing Create saved the record with the date empty (or, on edit, with the old date) and a success toast. The picker never writes text that names no date, so the form value stayed what it was and nothing told the form.
 
 - **Now.** The text box is marked invalid as soon as the user leaves it, the field shows the picker's message (the typed text and the expected format) as its form error, and submit is refused the way a missing required value is: the dialog stays open and nothing is sent. Correcting or clearing the text withdraws the error. `datetime` fields behave the same.
-- **`onInvalidInputChange`** is a new optional widget prop on `FieldWidgetComponentProps` (`@object-ui/fields`): a widget that parses typed text fires it with a message when the committed text names no value, and with `null` once it is valid, cleared, or unmounted. The `form` renderer (`@object-ui/components`) turns the message into the field's `invalidInput` validation error and passes the callback to the `date` / `datetime` widgets only. A widget given the callback leaves the message text to the form; hosts that pass none (the grid's inline editor, the action-param dialog) keep the picker's own notice, unchanged.
+- **`onInvalidInputChange`** is a new optional widget prop on `FieldWidgetComponentProps`, the widget props type `@object-ui/fields` exports. The key is optional, so every existing widget and host compiles and behaves as before; no consumer breaks. It is fired as follows: a widget that parses typed text fires it with a message when the committed text names no value, and with `null` once it is valid, cleared, or unmounted. The `form` renderer (`@object-ui/components`) turns the message into the field's `invalidInput` validation error and passes the callback to the `date` / `datetime` widgets only. A widget given the callback leaves the message text to the form; hosts that pass none (the grid's inline editor, the action-param dialog) keep the picker's own notice, unchanged.