From a429afeab4a223e54c3cbe2d91ae1bb00bd541e7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Oct 2026 19:30:30 +0000
Subject: [PATCH 1/4] fix(components): date / datetime filter rows draw the
 host-registered date widget (objectui#12743)

FilterBuilder resolves `field:date` / `field:datetime` from ComponentRegistry
at render time, the way the form renderer in this package resolves
`field:<type>`. @object-ui/fields registers the platform picker there behind
its lazy loader, so this package stays fields-free and the picker stays in
its own chunk. With nothing registered the row keeps the native input.

The row's value keeps its shape (YYYY-MM-DD; the zoneless local
YYYY-MM-DDTHH:mm for datetime). A pointer press outside the editor blurs it
first, so the picker's commit-on-blur reads the typed text before a host
popover closes. Escape discards.

Co-authored-by: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
---
 ...ter-builder-date-value-seam-12743.test.tsx | 214 +++++++++++++++++
 .../components/src/custom/filter-builder.tsx  | 218 ++++++++++++++++--
 2 files changed, 411 insertions(+), 21 deletions(-)
 create mode 100644 packages/components/src/__tests__/filter-builder-date-value-seam-12743.test.tsx

diff --git a/packages/components/src/__tests__/filter-builder-date-value-seam-12743.test.tsx b/packages/components/src/__tests__/filter-builder-date-value-seam-12743.test.tsx
new file mode 100644
index 0000000000..84c8448aa4
--- /dev/null
+++ b/packages/components/src/__tests__/filter-builder-date-value-seam-12743.test.tsx
@@ -0,0 +1,214 @@
+/**
+ * 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.
+ */
+
+/**
+ * objectui#12743 — the seam: a `date` / `datetime` filter row draws the field
+ * widget the HOST registered as `field:date` / `field:datetime`.
+ *
+ * `packages/components` does not depend on `@object-ui/fields` (that package
+ * depends on this one), so the widget here is a stand-in with the platform
+ * picker's commit behaviour: it reads its text on blur and on Enter, never per
+ * keystroke, and its `datetime` face writes an ISO instant, as a field's
+ * stored shape is. The real picker, through the console's list toolbar, is
+ * pinned in `plugin-list` (`ListView.filterDatePicker-12743.test.tsx`).
+ *
+ * What is pinned:
+ * - with the widget registered, a date row (scalar and both `between` bounds)
+ *   draws it, and no `input[type=date]`;
+ * - the row's value keeps its shape: `YYYY-MM-DD` for date, the zoneless
+ *   local `YYYY-MM-DDTHH:mm` for datetime (what `datetime-local` wrote);
+ * - a typed day reaches the row on blur, on Enter, and on a pointer press
+ *   outside the row while the box holds focus (the press blurs it first, so a
+ *   popover that closes on that press cannot drop the text);
+ * - CONTROL: a text and a number row draw what they drew before, and with
+ *   nothing registered a date row keeps the native input.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, fireEvent, cleanup, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ComponentRegistry } from '@object-ui/core';
+
+import { FilterBuilder, type FilterBuilderRowGroup } from '../custom/filter-builder';
+
+/** Commit-on-blur stand-in for the platform picker. */
+function makeStandIn(withTime: boolean) {
+  const StandIn = ({ id, value, onChange }: { id?: string; value?: string; onChange: (next: string) => void }) => {
+    const [text, setText] = React.useState(value ?? '');
+    const commit = () => {
+      if (text === (value ?? '')) return;
+      onChange(withTime && text ? new Date(text).toISOString() : text);
+    };
+    return (
+      <input
+        id={id}
+        type="text"
+        data-testid="stand-in-picker"
+        placeholder="YYYY/MM/DD"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commit();
+        }}
+      />
+    );
+  };
+  return StandIn;
+}
+
+function registerStandIns() {
+  ComponentRegistry.register('date', makeStandIn(false), { namespace: 'field' });
+  ComponentRegistry.register('datetime', makeStandIn(true), { namespace: 'field' });
+}
+
+afterEach(() => {
+  cleanup();
+  ComponentRegistry.unregister('date', 'field');
+  ComponentRegistry.unregister('datetime', 'field');
+});
+
+const FIELDS = [
+  { value: 'due', label: 'Due', type: 'date' },
+  { value: 'remind_at', label: 'Remind at', type: 'datetime' },
+  { value: 'name', label: 'Name', type: 'text' },
+  { value: 'amount', label: 'Amount', type: 'number' },
+];
+
+function group(field: string, operator: string, value: unknown): FilterBuilderRowGroup {
+  return { id: 'root', logic: 'and', conditions: [{ id: 'c1', field, operator, value }] } as FilterBuilderRowGroup;
+}
+
+function mount(value: FilterBuilderRowGroup) {
+  const onChange = vi.fn();
+  const utils = render(
+    <div>
+      <button type="button" data-testid="outside">outside</button>
+      <FilterBuilder fields={FIELDS} value={value} onChange={onChange} />
+    </div>,
+  );
+  return { ...utils, onChange };
+}
+
+/** The value the last emitted group carries on its one row. */
+const lastValue = (onChange: ReturnType<typeof vi.fn>) =>
+  (onChange.mock.calls.at(-1)?.[0] as FilterBuilderRowGroup).conditions[0].value;
+
+/** The registered widget arrives through the editor's own `Suspense`. */
+const findPickers = () => screen.findAllByTestId('stand-in-picker');
+
+function typeInto(input: HTMLElement, text: string) {
+  input.focus();
+  fireEvent.change(input, { target: { value: text } });
+}
+
+describe('FilterBuilder date rows draw the host-registered date widget (objectui#12743)', () => {
+  it('a date row draws the registered widget, not input[type=date]', async () => {
+    registerStandIns();
+    const { container } = mount(group('due', 'equals', '2026-10-01'));
+    const [picker] = await findPickers();
+    expect((picker as HTMLInputElement).value).toBe('2026-10-01');
+    expect(container.querySelector('input[type="date"]')).toBeNull();
+    // Its accessible name rides on the editor's hidden label.
+    expect(screen.getByLabelText('Value')).toBe(picker);
+  });
+
+  it('typed day + blur writes YYYY-MM-DD', async () => {
+    registerStandIns();
+    const { onChange } = mount(group('due', 'equals', ''));
+    const [picker] = await findPickers();
+    typeInto(picker, '2026-10-20');
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.blur(picker);
+    expect(lastValue(onChange)).toBe('2026-10-20');
+  });
+
+  it('typed day + Enter writes YYYY-MM-DD', async () => {
+    registerStandIns();
+    const { onChange } = mount(group('due', 'equals', ''));
+    const [picker] = await findPickers();
+    typeInto(picker, '2026-10-20');
+    fireEvent.keyDown(picker, { key: 'Enter' });
+    expect(lastValue(onChange)).toBe('2026-10-20');
+  });
+
+  it('typed day + a pointer press outside: the press blurs the box first, so the day is written', async () => {
+    registerStandIns();
+    const { onChange } = mount(group('due', 'equals', ''));
+    const [picker] = await findPickers();
+    typeInto(picker, '2026-10-20');
+    // `fireEvent.pointerDown` moves no focus; only the editor's capture
+    // listener can have blurred the box.
+    fireEvent.pointerDown(screen.getByTestId('outside'));
+    expect(picker).not.toHaveFocus();
+    expect(lastValue(onChange)).toBe('2026-10-20');
+  });
+
+  it('a pointer press INSIDE the editor does not blur it', async () => {
+    registerStandIns();
+    const { onChange } = mount(group('due', 'equals', ''));
+    const [picker] = await findPickers();
+    typeInto(picker, '2026-10-20');
+    fireEvent.pointerDown(picker);
+    expect(picker).toHaveFocus();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('Escape discards: nothing is written, also after a later outside press', async () => {
+    registerStandIns();
+    const { onChange } = mount(group('due', 'equals', ''));
+    const [picker] = await findPickers();
+    typeInto(picker, '2026-10-20');
+    fireEvent.keyDown(picker, { key: 'Escape' });
+    // The host closes on Escape and the row unmounts with the text unread.
+    cleanup();
+    fireEvent.pointerDown(document.body);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('a datetime row keeps the zoneless local shape datetime-local wrote', async () => {
+    registerStandIns();
+    const { onChange } = mount(group('remind_at', 'equals', '2026-10-01T09:15'));
+    const [picker] = await findPickers();
+    expect((picker as HTMLInputElement).value).toBe('2026-10-01T09:15');
+    // The stand-in writes the ISO instant of this local wall clock.
+    typeInto(picker, '2026-10-20T14:30');
+    fireEvent.blur(picker);
+    expect(lastValue(onChange)).toBe('2026-10-20T14:30');
+  });
+
+  it('`between` on a date column draws the widget for BOTH bounds, each named', async () => {
+    registerStandIns();
+    const { container, onChange } = mount(group('due', 'between', []));
+    const pickers = await findPickers();
+    expect(pickers).toHaveLength(2);
+    expect(container.querySelector('input[type="date"]')).toBeNull();
+    expect(screen.getByLabelText('From')).toBe(pickers[0]);
+    expect(screen.getByLabelText('To')).toBe(pickers[1]);
+    typeInto(pickers[0], '2026-10-01');
+    fireEvent.blur(pickers[0]);
+    expect(lastValue(onChange)).toEqual(['2026-10-01', '']);
+  });
+
+  it('CONTROL: text and number rows draw what they drew before', async () => {
+    registerStandIns();
+    const text = mount(group('name', 'equals', 'acme'));
+    expect(text.container.querySelector('input[type="text"]')).toHaveValue('acme');
+    expect(screen.queryByTestId('stand-in-picker')).toBeNull();
+    cleanup();
+    const number = mount(group('amount', 'equals', 5));
+    expect(number.container.querySelector('input[type="number"]')).toHaveValue(5);
+    expect(screen.queryByTestId('stand-in-picker')).toBeNull();
+  });
+
+  it('CONTROL: with nothing registered, a date row keeps the native input', () => {
+    const { container } = mount(group('due', 'equals', '2026-10-01'));
+    expect(container.querySelector('input[type="date"]')).toHaveValue('2026-10-01');
+    expect(screen.queryByTestId('stand-in-picker')).toBeNull();
+  });
+});
diff --git a/packages/components/src/custom/filter-builder.tsx b/packages/components/src/custom/filter-builder.tsx
index 1fbf67bcb6..3d6f94a539 100644
--- a/packages/components/src/custom/filter-builder.tsx
+++ b/packages/components/src/custom/filter-builder.tsx
@@ -27,7 +27,13 @@ import type {
 // argued with: `@object-ui/fields` DEPENDS on this package, so importing it
 // here is a cycle. `core` re-homes the table and `fields` re-exports it, so
 // both spellings resolve to the SAME function and the SAME dedupe set.
-import { isRealCalendarDate, isRetiredFieldType, reportRetiredFieldType } from "@object-ui/core"
+import {
+  ComponentRegistry,
+  isRealCalendarDate,
+  isRetiredFieldType,
+  reportRetiredFieldType,
+  toDateTimeInputValue,
+} from "@object-ui/core"
 import { createSafeTranslation } from "@object-ui/i18n"
 
 import { cn } from "../lib/utils"
@@ -1738,6 +1744,13 @@ function FilterBuilder({
       )
     }
 
+    // The platform date picker on a `date` / `datetime` column (objectui#12743),
+    // when the host registered one; see {@link registeredTemporalWidget}.
+    const valueFamily = valueFamilyForFieldType(field?.type)
+    const temporalWidget = registeredTemporalWidget(valueFamily)
+    const temporalFamily: TemporalValueFamily | undefined =
+      valueFamily === "date" || valueFamily === "datetime" ? valueFamily : undefined
+
     // A PAIR operator (`between`) — two bounds, in order. One input could only
     // ever produce one of them, and the spec refuses an incomplete range as
     // firmly as it refuses a scalar for `in`.
@@ -1813,30 +1826,47 @@ function FilterBuilder({
           value: next[0] === "" && next[1] === "" ? [] : next,
         })
       }
+      const renderBound = (index: 0 | 1) => {
+        const boundLabel = t(index === 0 ? 'filterBuilder.rangeStart' : 'filterBuilder.rangeEnd')
+        // A `date` / `datetime` bound is the host's registered date widget
+        // (objectui#12743). Its placeholder is the display locale's pattern,
+        // so the bound's name rides on a hidden label instead. The incomplete
+        // marker reaches it as `error`, which is what drives `aria-invalid`
+        // on a field widget.
+        if (temporalWidget && temporalFamily) {
+          return (
+            <TemporalValueEditor
+              widget={temporalWidget}
+              family={temporalFamily}
+              field={field!}
+              value={bounds[index]}
+              onChange={(next) => setBound(index, next)}
+              label={boundLabel}
+              error={missingBound === index ? t('validation.required', { field: incompleteLabel }) : undefined}
+              className={missingBound === index ? "border-destructive" : undefined}
+              testId={`filter-range-${condition.field}-${index === 0 ? 'start' : 'end'}`}
+            />
+          )
+        }
+        return (
+          <Input
+            type={inputType}
+            className={cn("h-9 text-sm", missingBound === index && "border-destructive")}
+            placeholder={boundLabel}
+            aria-label={boundLabel}
+            aria-invalid={boundInvalid(index)}
+            aria-describedby={missingBound === index ? incompleteId : undefined}
+            value={displayScalarValue(bounds[index])}
+            onChange={(e) => setBound(index, e.target.value)}
+          />
+        )
+      }
       return (
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1.5" data-testid={`filter-range-${condition.field}`}>
-            <Input
-              type={inputType}
-              className={cn("h-9 text-sm", missingBound === 0 && "border-destructive")}
-              placeholder={t('filterBuilder.rangeStart')}
-              aria-label={t('filterBuilder.rangeStart')}
-              aria-invalid={boundInvalid(0)}
-              aria-describedby={missingBound === 0 ? incompleteId : undefined}
-              value={displayScalarValue(bounds[0])}
-              onChange={(e) => setBound(0, e.target.value)}
-            />
+            {renderBound(0)}
             <span className="text-xs text-muted-foreground shrink-0">-</span>
-            <Input
-              type={inputType}
-              className={cn("h-9 text-sm", missingBound === 1 && "border-destructive")}
-              placeholder={t('filterBuilder.rangeEnd')}
-              aria-label={t('filterBuilder.rangeEnd')}
-              aria-invalid={boundInvalid(1)}
-              aria-describedby={missingBound === 1 ? incompleteId : undefined}
-              value={displayScalarValue(bounds[1])}
-              onChange={(e) => setBound(1, e.target.value)}
-            />
+            {renderBound(1)}
           </div>
           {missingBound !== null && (
             // Visible, not `sr-only`: the drop this announces is invisible to a
@@ -1926,6 +1956,20 @@ function FilterBuilder({
       )
     }
 
+    if (temporalWidget && temporalFamily) {
+      return (
+        <TemporalValueEditor
+          widget={temporalWidget}
+          family={temporalFamily}
+          field={field!}
+          value={condition.value}
+          onChange={(next) => updateCondition(condition.id, { value: next })}
+          label={t('filterBuilder.value')}
+          testId={`filter-value-${condition.field}`}
+        />
+      )
+    }
+
     // Default input for text, number, date
     const inputType = getInputType(condition.field)
     
@@ -2100,6 +2144,138 @@ function FilterBuilder({
 
 FilterBuilder.displayName = "FilterBuilder"
 
+// ============================================================================
+// TemporalValueEditor — the platform date picker on a `date` / `datetime` row
+// ============================================================================
+
+/** The value families whose rows draw the host's registered date widget. */
+type TemporalValueFamily = Extract<FilterValueFamily, "date" | "datetime">
+
+/**
+ * The field widget the HOST registered for a `date` / `datetime` value
+ * (objectui#12743), or `undefined` when none is registered.
+ *
+ * Read from `ComponentRegistry` under the `field` namespace at render time,
+ * exactly as the form renderer in this package resolves `field:<type>`
+ * (`renderFieldComponent` in `renderers/form/form.tsx`). `@object-ui/fields`
+ * registers the platform picker there (`DatePickerField` /
+ * `DateTimePickerField`, behind a `React.lazy` loader, so it stays in its own
+ * `fields-date-picker` chunk), and it depends on THIS package, so importing it
+ * here would be a cycle. The registry is the seam: this package stays
+ * fields-free and the host fills it.
+ *
+ * With nothing registered (a host that does not load `@object-ui/fields`)
+ * the row keeps the native input, as the form does.
+ */
+function registeredTemporalWidget(
+  family: FilterValueFamily,
+): React.ComponentType<Record<string, unknown>> | undefined {
+  if (family !== "date" && family !== "datetime") return undefined
+  return ComponentRegistry.get(family, "field") as React.ComponentType<Record<string, unknown>> | undefined
+}
+
+interface TemporalValueEditorProps {
+  widget: React.ComponentType<Record<string, unknown>>
+  family: TemporalValueFamily
+  /** The column the row filters on: the widget's `field` carrier. */
+  field: { value: string; label: string }
+  value: FilterBuilderRow["value"] | undefined
+  /** Receives the value in the row's own shape (see the component's doc). */
+  onChange: (next: string) => void
+  /** The accessible name of the text box, on a visually hidden `<label>`. */
+  label: string
+  /** Set when the row refuses what this control holds; drives `aria-invalid`. */
+  error?: string
+  className?: string
+  testId?: string
+}
+
+/**
+ * Renders the host's registered date widget as a filter row's value editor
+ * (objectui#12743).
+ *
+ * ## The value written is the row's, unchanged
+ *
+ * - `date`: the widget writes `YYYY-MM-DD`, the value `<input type="date">`
+ *   wrote.
+ * - `datetime`: the widget writes an ISO instant (a field's stored shape);
+ *   the row has always held the zoneless local wall clock
+ *   `<input type="datetime-local">` emits (`YYYY-MM-DDTHH:mm`). The instant is
+ *   read back onto that local clock with `toDateTimeInputValue`, the adapter
+ *   the widget itself reads with, so the filter keeps the shape every reader
+ *   of it already handles.
+ *
+ * ## It commits what was typed
+ *
+ * The picker reads its typed text on blur and on Enter, not per keystroke.
+ * A pointer press outside the editor while it holds focus blurs it FIRST
+ * (a capture listener, the seam `DataTable` uses for its injected cell
+ * editors since objectui#12664), so the text is read before a popover that
+ * hosts this row closes and unmounts it. Escape does not blur: it discards.
+ *
+ * `Suspense` is this editor's own: the widget arrives lazily, and the
+ * placeholder holds no input, so nothing typed during the load can be lost.
+ */
+function TemporalValueEditor({
+  widget: Widget,
+  family,
+  field,
+  value,
+  onChange,
+  label,
+  error,
+  className,
+  testId,
+}: TemporalValueEditorProps) {
+  const rootRef = React.useRef<HTMLDivElement | null>(null)
+  const inputId = React.useId()
+
+  React.useEffect(() => {
+    if (typeof document === "undefined") return
+    const onPointerDown = (event: PointerEvent) => {
+      const root = rootRef.current
+      if (!root) return
+      const focused = document.activeElement
+      if (!(focused instanceof HTMLElement) || !root.contains(focused)) return
+      if (event.target instanceof Node && root.contains(event.target)) return
+      focused.blur()
+    }
+    document.addEventListener("pointerdown", onPointerDown, true)
+    return () => document.removeEventListener("pointerdown", onPointerDown, true)
+  }, [])
+
+  const handleChange = (next: unknown) => {
+    const text = typeof next === "string" ? next : ""
+    onChange(family === "datetime" ? toDateTimeInputValue(text) : text)
+  }
+
+  return (
+    <div ref={rootRef} className="min-w-0 flex-1" data-testid={testId}>
+      <label htmlFor={inputId} className="sr-only">
+        {label}
+      </label>
+      <React.Suspense
+        fallback={
+          <div
+            aria-busy="true"
+            data-testid="filter-value-loading"
+            className="h-9 w-full rounded-md border border-input bg-muted/40"
+          />
+        }
+      >
+        <Widget
+          id={inputId}
+          field={{ name: field.value, label: field.label, type: family }}
+          value={value === undefined ? "" : displayScalarValue(value)}
+          onChange={handleChange}
+          error={error}
+          className={cn("h-9 text-sm", className)}
+        />
+      </React.Suspense>
+    </div>
+  )
+}
+
 // ============================================================================
 // MultiValueInput — token input for the LIST operators on an optionless field
 // ============================================================================

From 6ef18d3bfcc3dd908c7ea851ffa48632e09ec7bc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Oct 2026 19:31:56 +0000
Subject: [PATCH 2/4] fix(plugin-view): filter-ui date and date-range draw the
 host-registered date widget (objectui#12743)

FilterUI resolves `field:date` from ComponentRegistry at render time, as
FilterBuilder's date rows do, so plugin-view needs no @object-ui/fields
dependency. The value stays YYYY-MM-DD; an outside pointer press blurs the
editor first so the picker's commit-on-blur reads the typed text. With
nothing registered the native input stays.

Co-authored-by: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
---
 packages/plugin-view/src/FilterUI.tsx         |  99 +++++++++++++---
 .../FilterUI.datePicker-12743.test.tsx        | 108 ++++++++++++++++++
 2 files changed, 194 insertions(+), 13 deletions(-)
 create mode 100644 packages/plugin-view/src/__tests__/FilterUI.datePicker-12743.test.tsx

diff --git a/packages/plugin-view/src/FilterUI.tsx b/packages/plugin-view/src/FilterUI.tsx
index 651baa8e19..12e4922aad 100644
--- a/packages/plugin-view/src/FilterUI.tsx
+++ b/packages/plugin-view/src/FilterUI.tsx
@@ -29,6 +29,7 @@ import {
 } from '@object-ui/components';
 import { cva } from 'class-variance-authority';
 import { SlidersHorizontal, X } from 'lucide-react';
+import { ComponentRegistry } from '@object-ui/core';
 import type { FilterUISchema } from '@object-ui/types';
 import { notifyViewHandlerChannels } from './viewHandlerChannels';
 
@@ -80,6 +81,79 @@ const getDateRangeValue = (value: any): DateRangeValue => {
   return { start: '', end: '' };
 };
 
+/**
+ * The value editor of a `date` filter and of each `date-range` bound
+ * (objectui#12743): the field widget the HOST registered as `field:date`.
+ *
+ * Resolved from `ComponentRegistry` at render time, the way the form renderer
+ * resolves `field:<type>` and `FilterBuilder`'s date rows resolve it.
+ * `@object-ui/fields` registers the platform picker there (a text box in the
+ * display locale's format with a calendar popover), behind a lazy loader that
+ * keeps it in its own chunk; this package does not depend on
+ * `@object-ui/fields`, and needs no dependency for it. With nothing registered
+ * the filter keeps the native `<input type="date">`.
+ *
+ * The value is `YYYY-MM-DD`, as the native input wrote. The picker reads its
+ * typed text on blur and on Enter; a pointer press outside the editor while it
+ * holds focus blurs it first (a capture listener, the seam `FilterBuilder`'s
+ * date rows and `DataTable`'s injected cell editors use), so the text is read
+ * before the popover or drawer layout closes on that press. Escape does not
+ * blur: it discards.
+ */
+function DateFilterInput({
+  field,
+  label,
+  value,
+  onChange,
+}: {
+  field: string;
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+}) {
+  const Widget = ComponentRegistry.get('date', 'field') as React.ComponentType<Record<string, unknown>> | undefined;
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const inputId = React.useId();
+
+  React.useEffect(() => {
+    if (!Widget || typeof document === 'undefined') return;
+    const onPointerDown = (event: PointerEvent) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const focused = document.activeElement;
+      if (!(focused instanceof HTMLElement) || !root.contains(focused)) return;
+      if (event.target instanceof Node && root.contains(event.target)) return;
+      focused.blur();
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [Widget]);
+
+  if (!Widget) {
+    return <Input type="date" value={value} onChange={(event) => onChange(event.target.value)} />;
+  }
+
+  return (
+    <div ref={rootRef} className="min-w-0 flex-1" data-testid={`filter-ui-date-${field}`}>
+      <label htmlFor={inputId} className="sr-only">
+        {label}
+      </label>
+      <React.Suspense
+        fallback={
+          <div aria-busy="true" data-testid="filter-value-loading" className="h-9 w-full rounded-md border border-input bg-muted/40" />
+        }
+      >
+        <Widget
+          id={inputId}
+          field={{ name: field, label, type: 'date' }}
+          value={value}
+          onChange={(next: unknown) => onChange(typeof next === 'string' ? next : '')}
+        />
+      </React.Suspense>
+    </div>
+  );
+}
+
 export const FilterUI: React.FC<FilterUIProps> = ({
   schema,
   className,
@@ -205,29 +279,28 @@ export const FilterUI: React.FC<FilterUIProps> = ({
       }
       case 'date':
         return (
-          <Input
-            type="date"
+          <DateFilterInput
+            field={filter.field}
+            label={label}
             value={values[filter.field] ?? ''}
-            onChange={(event) => updateValue(filter.field, event.target.value)}
+            onChange={(next) => updateValue(filter.field, next)}
           />
         );
       case 'date-range': {
         const range = getDateRangeValue(values[filter.field]);
         return (
           <div className="flex items-center gap-2">
-            <Input
-              type="date"
+            <DateFilterInput
+              field={`${filter.field}-start`}
+              label={`${label} (start)`}
               value={range.start ?? ''}
-              onChange={(event) => {
-                updateValue(filter.field, { ...range, start: event.target.value });
-              }}
+              onChange={(next) => updateValue(filter.field, { ...range, start: next })}
             />
-            <Input
-              type="date"
+            <DateFilterInput
+              field={`${filter.field}-end`}
+              label={`${label} (end)`}
               value={range.end ?? ''}
-              onChange={(event) => {
-                updateValue(filter.field, { ...range, end: event.target.value });
-              }}
+              onChange={(next) => updateValue(filter.field, { ...range, end: next })}
             />
           </div>
         );
diff --git a/packages/plugin-view/src/__tests__/FilterUI.datePicker-12743.test.tsx b/packages/plugin-view/src/__tests__/FilterUI.datePicker-12743.test.tsx
new file mode 100644
index 0000000000..004cd0becf
--- /dev/null
+++ b/packages/plugin-view/src/__tests__/FilterUI.datePicker-12743.test.tsx
@@ -0,0 +1,108 @@
+/**
+ * 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.
+ */
+
+/**
+ * objectui#12743 — `filter-ui`'s `date` and `date-range` filters draw the
+ * field widget the HOST registered as `field:date`.
+ *
+ * `plugin-view` does not depend on `@object-ui/fields`, so the widget here is
+ * a stand-in with the platform picker's commit behaviour: it reads its text
+ * on blur and on Enter, never per keystroke. The real picker is pinned
+ * through the console's list toolbar in `plugin-list`
+ * (`ListView.filterDatePicker-12743.test.tsx`).
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, fireEvent, cleanup, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ComponentRegistry } from '@object-ui/core';
+
+import { FilterUI } from '../FilterUI';
+
+function StandIn({ id, value, onChange }: { id?: string; value?: string; onChange: (next: string) => void }) {
+  const [text, setText] = React.useState(value ?? '');
+  const commit = () => {
+    if (text !== (value ?? '')) onChange(text);
+  };
+  return (
+    <input
+      id={id}
+      type="text"
+      data-testid="stand-in-picker"
+      value={text}
+      onChange={(e) => setText(e.target.value)}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') commit();
+      }}
+    />
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  ComponentRegistry.unregister('date', 'field');
+});
+
+const SCHEMA = {
+  type: 'filter-ui' as const,
+  filters: [
+    { field: 'due', label: 'Due', type: 'date' as const },
+    { field: 'period', label: 'Period', type: 'date-range' as const },
+    { field: 'name', label: 'Name', type: 'text' as const },
+  ],
+};
+
+function mount() {
+  const onChange = vi.fn();
+  const utils = render(
+    <div>
+      <button type="button" data-testid="outside">outside</button>
+      <FilterUI schema={SCHEMA} onChange={onChange} />
+    </div>,
+  );
+  return { ...utils, onChange };
+}
+
+function typeInto(input: HTMLElement, text: string) {
+  input.focus();
+  fireEvent.change(input, { target: { value: text } });
+}
+
+describe('FilterUI date filters draw the host-registered date widget (objectui#12743)', () => {
+  it('date and date-range draw the registered widget, not input[type=date]', async () => {
+    ComponentRegistry.register('date', StandIn, { namespace: 'field' });
+    const { container } = mount();
+    const pickers = await screen.findAllByTestId('stand-in-picker');
+    expect(pickers).toHaveLength(3);
+    expect(container.querySelector('input[type="date"]')).toBeNull();
+    expect(screen.getByLabelText('Due')).toBe(pickers[0]);
+  });
+
+  it('typed day + blur, and typed day + a pointer press outside, write YYYY-MM-DD', async () => {
+    ComponentRegistry.register('date', StandIn, { namespace: 'field' });
+    const { onChange } = mount();
+    const [due, start] = await screen.findAllByTestId('stand-in-picker');
+    typeInto(due, '2026-10-20');
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.blur(due);
+    expect(onChange).toHaveBeenLastCalledWith({ due: '2026-10-20' });
+
+    typeInto(start, '2026-10-01');
+    fireEvent.pointerDown(screen.getByTestId('outside'));
+    expect(start).not.toHaveFocus();
+    expect(onChange).toHaveBeenLastCalledWith({ due: '2026-10-20', period: { start: '2026-10-01', end: '' } });
+  });
+
+  it('CONTROL: the text filter is unchanged, and with nothing registered date keeps the native input', () => {
+    const { container } = mount();
+    expect(container.querySelectorAll('input[type="date"]')).toHaveLength(3);
+    expect(screen.getByPlaceholderText('Filter by Name')).toBeInTheDocument();
+    expect(screen.queryByTestId('stand-in-picker')).toBeNull();
+  });
+});

From cdae59d78679808364ba2740898e748722061c15 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Oct 2026 19:33:58 +0000
Subject: [PATCH 3/4] test(plugin-list): the list toolbar's Filter panel draws
 the platform date picker (objectui#12743)

Pins on the real ListView -> FilterBuilder path with @object-ui/fields
registered: the picker face and the zh placeholder; a typed day applied on
Enter, on blur and on a press outside the panel; a datetime row keeping the
zoneless local shape; text and number rows unchanged.

Co-authored-by: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
---
 .../ListView.filterDatePicker-12743.test.tsx  | 215 ++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 packages/plugin-list/src/__tests__/ListView.filterDatePicker-12743.test.tsx

diff --git a/packages/plugin-list/src/__tests__/ListView.filterDatePicker-12743.test.tsx b/packages/plugin-list/src/__tests__/ListView.filterDatePicker-12743.test.tsx
new file mode 100644
index 0000000000..4e3dcf39f4
--- /dev/null
+++ b/packages/plugin-list/src/__tests__/ListView.filterDatePicker-12743.test.tsx
@@ -0,0 +1,215 @@
+/**
+ * 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.
+ */
+
+/**
+ * objectui#12743 — the console list toolbar's Filter panel draws the platform
+ * date picker on a `date` / `datetime` row.
+ *
+ * Driven on the real `ListView` toolbar → `FilterBuilder` path, with
+ * `@object-ui/fields` registered as the console registers it (the data source
+ * is the only fake). `FilterBuilder` lives in `@object-ui/components`, which
+ * cannot import `@object-ui/fields`; it resolves the `field:date` /
+ * `field:datetime` widget the host registered, so the picker arrives through
+ * its own lazy chunk.
+ *
+ * Pinned:
+ * - (a) a date row draws the picker, not `input[type=date]`; in a `zh`
+ *   session its placeholder and digit order are `YYYY/MM/DD`;
+ * - (b) a typed day + Enter, + blur, and + a press outside the panel (which
+ *   closes it) each apply the filter with `YYYY-MM-DD`;
+ * - (c) a datetime row writes the zoneless local `YYYY-MM-DDTHH:mm` the
+ *   native `datetime-local` input wrote;
+ * - (d) CONTROL: a text and a number row draw the inputs they drew before.
+ */
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, waitFor, fireEvent, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import type { DataSource, ListViewSchema } from '@object-ui/types';
+import { SchemaRendererProvider } from '@object-ui/react';
+import { I18nProvider } from '@object-ui/i18n';
+import { registerAllFields } from '@object-ui/fields';
+import { ListView } from '../ListView';
+
+registerAllFields();
+
+beforeAll(() => {
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = vi.fn() as any;
+  }
+  // Radix popover uses pointer capture; the DOM test environment lacks these.
+  if (!(Element.prototype as any).hasPointerCapture) {
+    (Element.prototype as any).hasPointerCapture = () => false;
+  }
+  if (!(Element.prototype as any).setPointerCapture) {
+    (Element.prototype as any).setPointerCapture = () => {};
+  }
+  if (!(Element.prototype as any).releasePointerCapture) {
+    (Element.prototype as any).releasePointerCapture = () => {};
+  }
+});
+
+const OBJECT = 'os_task_12743';
+
+const FIELDS: Record<string, Record<string, unknown>> = {
+  name: { type: 'text', label: 'Name' },
+  amount: { type: 'number', label: 'Amount' },
+  due: { type: 'date', label: 'Due' },
+  remind_at: { type: 'datetime', label: 'Remind at' },
+};
+
+type Row = { id: string; field: string; operator: string; value: unknown };
+
+function mount(conditions: Row[], language?: string) {
+  const dataSource = {
+    find: vi.fn().mockResolvedValue({ data: [], total: 0 }),
+    findOne: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    getObjectSchema: vi.fn().mockResolvedValue({ name: OBJECT, fields: FIELDS }),
+  };
+  const onFilterChange = vi.fn();
+  const schema = {
+    type: 'list-view',
+    objectName: OBJECT,
+    viewType: 'grid',
+    columns: Object.entries(FIELDS).map(([field, def]) => ({ field, label: def.label as string })),
+    compactToolbar: false,
+  } as unknown as ListViewSchema;
+  const list = (
+    <SchemaRendererProvider dataSource={dataSource as unknown as DataSource}>
+      <div>
+        <button type="button" data-testid="outside">outside</button>
+        <ListView
+          schema={schema}
+          dataSource={dataSource as unknown as DataSource}
+          initialFilters={{ id: 'root', logic: 'and', conditions } as any}
+          onFilterChange={onFilterChange}
+        />
+      </div>
+    </SchemaRendererProvider>
+  );
+  render(
+    language ? (
+      <I18nProvider config={{ defaultLanguage: language, detectBrowserLanguage: false }} persistLanguage={false}>
+        {list}
+      </I18nProvider>
+    ) : (
+      list
+    ),
+  );
+  return { dataSource, onFilterChange };
+}
+
+/** Open the toolbar's Filter panel once the definition has loaded. */
+async function openFilterPanel(dataSource: { getObjectSchema: ReturnType<typeof vi.fn> }): Promise<HTMLElement> {
+  await waitFor(() => expect(dataSource.getObjectSchema).toHaveBeenCalled());
+  fireEvent.click(await screen.findByTestId('toolbar-filter-trigger'));
+  return screen.findByRole('dialog');
+}
+
+/** The lazily loaded picker's text box inside the panel. */
+async function findPicker(panel: HTMLElement): Promise<HTMLInputElement> {
+  return waitFor(
+    () => {
+      const input = panel.querySelector('[data-slot="date-picker"] input');
+      if (!input) throw new Error('date picker not rendered');
+      return input as HTMLInputElement;
+    },
+    { timeout: 5000 },
+  );
+}
+
+function typeInto(input: HTMLInputElement, text: string) {
+  input.focus();
+  fireEvent.change(input, { target: { value: text } });
+}
+
+const lastRows = (onFilterChange: ReturnType<typeof vi.fn>) =>
+  (onFilterChange.mock.calls.at(-1)?.[0] as { conditions: Row[] }).conditions;
+
+const DUE_ROW: Row = { id: 'c1', field: 'due', operator: 'equals', value: '' };
+
+describe('ListView Filter panel — date / datetime rows draw the platform picker (objectui#12743)', () => {
+  it('(a) a date row draws the picker, not input[type=date]', async () => {
+    const { dataSource } = mount([{ ...DUE_ROW, value: '2026-10-01' }]);
+    const panel = await openFilterPanel(dataSource);
+    const input = await findPicker(panel);
+    expect(input.type).toBe('text');
+    expect(input.placeholder).toBe('MM/DD/YYYY');
+    expect(input.value).toBe('10/01/2026');
+    expect(panel.querySelector('input[type="date"]')).toBeNull();
+  });
+
+  it('(a) zh session: placeholder and digit order come from the console locale', async () => {
+    const { dataSource } = mount([{ ...DUE_ROW, value: '2026-10-01' }], 'zh');
+    const panel = await openFilterPanel(dataSource);
+    const input = await findPicker(panel);
+    expect(input.placeholder).toBe('YYYY/MM/DD');
+    expect(input.value).toBe('2026/10/01');
+  });
+
+  it('(b) typed day + Enter applies the filter with YYYY-MM-DD', async () => {
+    const { dataSource, onFilterChange } = mount([DUE_ROW]);
+    const panel = await openFilterPanel(dataSource);
+    const input = await findPicker(panel);
+    typeInto(input, '10/20/2026');
+    expect(onFilterChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(lastRows(onFilterChange)[0].value).toBe('2026-10-20');
+  });
+
+  it('(b) typed day + blur applies the filter with YYYY-MM-DD', async () => {
+    const { dataSource, onFilterChange } = mount([DUE_ROW]);
+    const panel = await openFilterPanel(dataSource);
+    const input = await findPicker(panel);
+    typeInto(input, '10/20/2026');
+    fireEvent.blur(input);
+    expect(lastRows(onFilterChange)[0].value).toBe('2026-10-20');
+  });
+
+  it('(b) typed day + a press outside the panel: the panel closes and the day is applied', async () => {
+    const { dataSource, onFilterChange } = mount([DUE_ROW]);
+    const panel = await openFilterPanel(dataSource);
+    const input = await findPicker(panel);
+    typeInto(input, '10/20/2026');
+    // A press outside: Radix's popover dismisses on the click that follows the
+    // pointerdown. `fireEvent` moves no focus, so only the editor's capture
+    // listener (the pointerdown blur) can have read the typed text.
+    const outside = screen.getByTestId('outside');
+    fireEvent.pointerDown(outside);
+    fireEvent.click(outside);
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(lastRows(onFilterChange)[0].value).toBe('2026-10-20');
+  });
+
+  it('(c) a datetime row writes the zoneless local YYYY-MM-DDTHH:mm, as datetime-local did', async () => {
+    const { dataSource, onFilterChange } = mount([
+      { id: 'c1', field: 'remind_at', operator: 'equals', value: '2026-10-01T09:15' },
+    ]);
+    const panel = await openFilterPanel(dataSource);
+    const input = await findPicker(panel);
+    expect(input.value).toBe('10/01/2026, 09:15 AM');
+    typeInto(input, '10/20/2026 14:30');
+    fireEvent.blur(input);
+    expect(lastRows(onFilterChange)[0].value).toBe('2026-10-20T14:30');
+  });
+
+  it('(d) CONTROL: text and number rows draw the inputs they drew before', async () => {
+    const { dataSource } = mount([
+      { id: 'c1', field: 'name', operator: 'equals', value: 'acme' },
+      { id: 'c2', field: 'amount', operator: 'equals', value: 5 },
+    ]);
+    const panel = await openFilterPanel(dataSource);
+    await waitFor(() => expect(within(panel).getByDisplayValue('acme')).toBeInTheDocument());
+    expect(within(panel).getByDisplayValue('acme')).toHaveAttribute('type', 'text');
+    expect(within(panel).getByDisplayValue('5')).toHaveAttribute('type', 'number');
+    expect(panel.querySelector('[data-slot="date-picker"]')).toBeNull();
+  });
+});

From 3fc88bff0044d9ab473fd5b3cc727764b8362b6d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Oct 2026 19:36:35 +0000
Subject: [PATCH 4/4] chore(changeset): list filters on date / datetime draw
 the platform picker (objectui#12743)

Co-authored-by: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
---
 .changeset/12743-filter-date-picker.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .changeset/12743-filter-date-picker.md

diff --git a/.changeset/12743-filter-date-picker.md b/.changeset/12743-filter-date-picker.md
new file mode 100644
index 0000000000..e2a7965c04
--- /dev/null
+++ b/.changeset/12743-filter-date-picker.md
@@ -0,0 +1,12 @@
+---
+'@object-ui/components': patch
+'@object-ui/plugin-view': patch
+---
+
+List filters on `date` and `datetime` fields draw the platform date picker, the face record forms, action dialogs and grid cells already draw (objectui#12743). The native input took its placeholder and digit order from the machine's locale, not the console's.
+
+- **Where it applies.** `FilterBuilder`'s value editor for a `date` / `datetime` row, both bounds of a `between` row included (the console list toolbar's Filter panel renders it), and `filter-ui`'s `date` and `date-range` filters. `time` rows keep the native input.
+- **How it gets there, with no new dependency.** Both resolve the `field:date` / `field:datetime` widget from `ComponentRegistry` at render time, the way the form renderer resolves `field:<type>`. `@object-ui/fields` registers the picker there behind its lazy loader, so `@object-ui/components` still does not import `@object-ui/fields`, `@object-ui/plugin-view` gains no dependency, and the picker stays in its own chunk. A host that does not load `@object-ui/fields` keeps the native input.
+- **The value written is unchanged.** A `date` row writes `YYYY-MM-DD`; a `datetime` row writes the zoneless local `YYYY-MM-DDTHH:mm` the native `datetime-local` input wrote; `filter-ui` writes `YYYY-MM-DD`.
+- **A typed day is applied.** The picker reads its text on blur and on Enter. A pointer press outside the editor while it holds focus blurs it first, so the text is read before a popover or drawer that hosts the filter closes on that press. Escape discards.
+- **No public surface changes.** No type member, prop, export, dependency or language-pack key is added or removed.