@multiplatform.one/forms 7.71.0 → 7.72.0

package/src/fields/DatePicker/parts.tsx

@@ -27,6 +27,7 @@ import { AnimatePresence, SizableText, Text, View, isWeb } from "tamagui";
 
 import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "../../FloatingPanel";
 import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -861,11 +862,6 @@ interface DatePickerInputTriggerProps {
   "aria-describedby"?: string;
   "aria-required"?: boolean;
   "aria-invalid"?: boolean;
-  /**
-   * Touch web (LC-266): the browser's own picker input, laid over the box.
-   * The input then owns the tap, the focus and the field's a11y name.
-   */
-  touchInput?: ReactNode;
 }
 
 export function DatePickerClearButton({
@@ -905,7 +901,6 @@ export function DatePickerInputTrigger({
   "aria-describedby": ariaDescribedBy,
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid,
-  touchInput,
 }: DatePickerInputTriggerProps) {
   const handleTriggerKey = (
     e: PanelActionEvent & { key?: string; code?: string; preventDefault?: () => void },
@@ -948,13 +943,10 @@ export function DatePickerInputTrigger({
         // on the closed text-field trigger.
         elevation={undefined}
         data-testid="date-picker-trigger"
-        // The touch input is laid absolutely over this box; without a
-        // positioning context it covers the whole page and takes every tap.
-        position={touchInput ? "relative" : undefined}
-        id={touchInput ? undefined : id}
-        onPress={isWeb && !disabled && !touchInput ? onButtonPress : undefined}
+        id={id}
+        onPress={isWeb && !disabled ? onButtonPress : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-        {...(isWeb && !touchInput
+        {...(isWeb
           ? {
               role: "combobox" as const,
               "aria-haspopup": "dialog",
@@ -969,7 +961,6 @@ export function DatePickerInputTrigger({
             }
           : undefined)}
       >
-        {touchInput}
         <InputParts.Section data-testid="date-picker-glyph">
           <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
             <Glyph />
@@ -980,7 +971,6 @@ export function DatePickerInputTrigger({
             readOnly
             pointerEvents="none"
             tabIndex={-1}
-            aria-hidden={touchInput ? true : undefined}
             value={value}
             placeholder={placeholder}
             disabled={disabled}
@@ -990,14 +980,7 @@ export function DatePickerInputTrigger({
         </InputParts.Section>
         {value && isWeb ? (
           <InputParts.Section>
-            {touchInput ? (
-              // Above the touch input, so Clear stays reachable on the box.
-              <View zIndex={2}>
-                <DatePickerClearButton onReset={onReset} disabled={disabled} />
-              </View>
-            ) : (
-              <DatePickerClearButton onReset={onReset} disabled={disabled} />
-            )}
+            <DatePickerClearButton onReset={onReset} disabled={disabled} />
           </InputParts.Section>
         ) : null}
       </InputParts.Box>
@@ -1078,6 +1061,8 @@ interface DatePickerPopoverShellProps {
   /** When set, native hosts render Clear outside the pointerEvents-none trigger. */
   clearValue?: string;
   onClear?: () => void;
+  /** How wide the open picker is (LC-112, FZ-8438 r3). Unset: at least the field. */
+  panelWidth?: PanelWidth;
 }
 
 export function DatePickerPopoverShell({
@@ -1090,6 +1075,7 @@ export function DatePickerPopoverShell({
   triggerA11y,
   clearValue,
   onClear,
+  panelWidth,
 }: DatePickerPopoverShellProps) {
   const nativeClear =
     !isWeb && clearValue && onClear ? (
@@ -1104,7 +1090,11 @@ export function DatePickerPopoverShell({
       disabled={disabled}
       sizing="grow"
       contentPadding="none"
-      widthMode="fit-content"
+      // LC-112 seamless cover (FZ-8438): the panel is the field grown open,
+      // at least its width, on every web width and pointer.
+      widthMode="at-least-trigger"
+      panelWidth={panelWidth}
+      compactFace={isWeb ? "menu" : undefined}
       triggerA11y={triggerA11y}
     >
       {children}

package/src/fields/DatePicker/seamlessCover.spec.tsx

@@ -0,0 +1,180 @@
+/**
+ * LC-112 seamless cover for the DatePicker family (FZ-8438). Clay rated deck
+ * rv_a07d4308a6c445b6 0 good: the date, time and date-and-time panels must
+ * open as one surface exactly over their field, at desktop and phone width,
+ * on a fine pointer and on touch alike.
+ *
+ * The browser half is emulated where happy-dom has no layout: the field's
+ * rect, and the arc its Box draws (read off the Box's own radius atom, the
+ * value a browser would compute from it).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { getTokens, getVariableValue } from "tamagui";
+import type { ReactElement } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DatetimePicker } from "./index";
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+const viewports: Record<string, { width: number; height: number; field: Rect }> = {
+  "1440": { width: 1440, height: 900, field: { x: 16, y: 42, width: 400, height: 40 } },
+  "390": { width: 390, height: 844, field: { x: 16, y: 42, width: 358, height: 44 } },
+};
+
+const pickers: [string, () => ReactElement][] = [
+  ["DatePicker", () => <DatePicker label="Date" name="date" value={new Date(2026, 2, 5)} />],
+  ["TimePicker", () => <TimePicker label="Time" name="time" value="14:30" />],
+  [
+    "DatetimePicker",
+    () => (
+      <DatetimePicker label="Date and time" name="starts" value={new Date(2026, 2, 5, 14, 30)} />
+    ),
+  ],
+];
+
+const originalWidth = window.innerWidth;
+const originalHeight = window.innerHeight;
+
+function setViewport(width: number, height: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+  Object.defineProperty(window, "innerHeight", { configurable: true, value: height });
+  act(() => {
+    window.dispatchEvent(new Event("resize"));
+  });
+}
+
+/** The painted Box of each picker's trigger (the field the user sees). */
+function isFieldBox(el: Element): boolean {
+  return (
+    el.matches('[data-testid="date-picker-trigger"]') ||
+    !!el.parentElement?.matches('[data-testid="time-picker-trigger"]')
+  );
+}
+
+function atomRadius(el: Element): number {
+  for (const c of Array.from(el.classList)) {
+    const px = c.match(/^_btlr-(\d+(?:\.\d+)?)px$/);
+    if (px) return Number(px[1]);
+    const token = c.match(/^_btlr-t-radius-(.+)$/);
+    if (token) {
+      const value = (getTokens().radius as Record<string, unknown>)[`$${token[1]}`];
+      return Number(getVariableValue(value));
+    }
+  }
+  return 0;
+}
+
+function emulateBrowser(field: Rect) {
+  const rect = {
+    ...field,
+    top: field.y,
+    left: field.x,
+    right: field.x + field.width,
+    bottom: field.y + field.height,
+    toJSON: () => ({}),
+  };
+  const originalRect = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference") || isFieldBox(this)) return rect;
+      return originalRect.call(this);
+    },
+  );
+  const original = globalThis.getComputedStyle.bind(globalThis);
+  const computed = (el: Element, pseudo?: string | null) => {
+    const style = original(el, pseudo);
+    if (!isFieldBox(el)) return style;
+    const radius = `${atomRadius(el)}px`;
+    return new Proxy(style, {
+      get(target, key) {
+        if (key === "borderTopLeftRadius") return radius;
+        const value = Reflect.get(target, key, target);
+        return typeof value === "function" ? value.bind(target) : value;
+      },
+    });
+  };
+  vi.spyOn(globalThis, "getComputedStyle").mockImplementation(computed as typeof getComputedStyle);
+  if ((window as unknown) !== globalThis) {
+    vi.spyOn(window, "getComputedStyle").mockImplementation(computed as typeof getComputedStyle);
+  }
+}
+
+function fieldBox(root: ParentNode): HTMLElement {
+  const box = Array.from(root.querySelectorAll<HTMLElement>("*")).find(isFieldBox);
+  expect(box).toBeTruthy();
+  return box as HTMLElement;
+}
+
+const corners = (el: Element) =>
+  Array.from(el.classList)
+    .filter((c) => /^_b[tb][lr]r-/.test(c))
+    .sort();
+
+beforeEach(() => {
+  setViewport(1440, 900);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  setViewport(originalWidth, originalHeight);
+});
+
+describe("DatePicker family: one surface over the field (LC-112, FZ-8438)", () => {
+  for (const [size, viewport] of Object.entries(viewports)) {
+    for (const [name, render] of pickers) {
+      it(`${name} at ${size}: top, start, width and all four arcs are the field's`, async () => {
+        setViewport(viewport.width, viewport.height);
+        emulateBrowser(viewport.field);
+        const result = renderWithProviders(render());
+        const box = fieldBox(result.container);
+        const drawn = Math.min(atomRadius(box), viewport.field.height / 2);
+        expect(drawn).toBeGreaterThan(0);
+
+        fireEvent.click(box, { detail: 0 });
+        const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+        expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+        expect(document.querySelector('input[type="date"], input[type="time"]')).toBeNull();
+
+        await waitFor(() => expect(panel.style.top).toBe(`${viewport.field.y}px`));
+        expect(panel.style.left).toBe(`${viewport.field.x}px`);
+        await waitFor(() =>
+          expect(parseFloat(panel.style.minWidth)).toBeGreaterThanOrEqual(viewport.field.width),
+        );
+        await waitFor(() =>
+          expect(corners(panel)).toEqual(
+            [`_bblr-${drawn}px`, `_bbrr-${drawn}px`, `_btlr-${drawn}px`, `_btrr-${drawn}px`].sort(),
+          ),
+        );
+      });
+
+      it(`${name} at ${size}: the echo draws no border or divider and sits above the field`, async () => {
+        setViewport(viewport.width, viewport.height);
+        emulateBrowser(viewport.field);
+        const result = renderWithProviders(render());
+        const live = fieldBox(result.container);
+        fireEvent.click(live, { detail: 0 });
+        const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+        const frame = await waitFor(() => {
+          const found = panel.querySelector<HTMLElement>("[data-fp-echo-frame]");
+          expect(found).not.toBeNull();
+          return found as HTMLElement;
+        });
+        for (const property of ["border-color", "background-color"]) {
+          expect(frame.style.getPropertyValue(property)).toBe("transparent");
+          expect(frame.style.getPropertyPriority(property)).toBe("important");
+        }
+        expect(frame.style.getPropertyValue("box-shadow")).toBe("none");
+        const row = panel.querySelector<HTMLElement>("[data-fp-trigger-row]") as HTMLElement;
+        expect(row.style.width).toBe(`${viewport.field.width}px`);
+        expect(row.style.height).toBe(`${viewport.field.height}px`);
+        expect(row.style.backgroundColor).toBe(getComputedStyle(panel).backgroundColor);
+        expect(panel.style.position).toBe("fixed");
+        expect(Number(panel.style.zIndex)).toBeGreaterThan(0);
+        expect(live.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(live.contains(panel)).toBe(false);
+      });
+    }
+  }
+});

package/src/fields/DatePicker/touchWeb.spec.tsx

@@ -1,7 +1,11 @@
 /**
- * FZ-8114 (LC-266): Date, Time and Datetime on a coarse-pointer web viewport
- * hand the pick to the browser's own control, and a fine pointer keeps the
- * MPO calendar. Both paths must commit the same value.
+ * Date, Time and Datetime on touch web. FZ-8114 handed these to the browser's
+ * own popover; FZ-8438 replaces it with MPO's cover panel, because Safari's
+ * popover cannot lie over the field, match its arc or repeat its content
+ * (LC-112 seamless cover, Clay's rv_a07d4308a6c445b6 notes).
+ *
+ * FZ-8114's invariant still holds: a blank tap opens nothing, only the tapped
+ * field opens, and its clear ✕ clears without opening.
  */
 import { formatCalendarDate } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
@@ -13,8 +17,15 @@ import { Form } from "../../Form";
 import { TimePicker } from "../TimePicker";
 import { DatePicker, DatetimePicker } from "./index";
 
-let coarse = false;
 const originalMatchMedia = window.matchMedia;
+const originalWidth = window.innerWidth;
+
+function setWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+  act(() => {
+    window.dispatchEvent(new Event("resize"));
+  });
+}
 
 beforeEach(() => {
   Object.defineProperty(window, "matchMedia", {
@@ -22,7 +33,7 @@ beforeEach(() => {
     writable: true,
     value: (media: string) => ({
       media,
-      matches: media === "(pointer: coarse)" ? coarse : false,
+      matches: media === "(pointer: coarse)" || media === "(hover: none)",
       onchange: null,
       addEventListener: () => {},
       removeEventListener: () => {},
@@ -31,23 +42,30 @@ beforeEach(() => {
       dispatchEvent: () => false,
     }),
   });
+  setWidth(390);
 });
 
 afterEach(() => {
-  coarse = false;
   Object.defineProperty(window, "matchMedia", {
     configurable: true,
     writable: true,
     value: originalMatchMedia,
   });
+  setWidth(originalWidth);
 });
 
-function touchInput(root: ParentNode, type: string): HTMLInputElement {
-  const input = root.querySelector(`input[type="${type}"]`) as HTMLInputElement | null;
-  expect(input).not.toBeNull();
-  return input as HTMLInputElement;
+/** A finger tap as mobile Safari delivers it: pointer, compat mouse, click. */
+function tap(el: Element) {
+  fireEvent.pointerDown(el, { pointerType: "touch", button: 0 });
+  fireEvent.mouseDown(el, { button: 0, detail: 1 });
+  fireEvent.pointerUp(el, { pointerType: "touch", button: 0 });
+  fireEvent.mouseUp(el, { button: 0, detail: 1 });
+  fireEvent.click(el, { button: 0, detail: 1 });
 }
 
+const panels = () => document.querySelectorAll('[data-testid="floating-panel-viewport"]');
+const sheets = () => document.querySelectorAll('[data-testid="floating-panel-sheet"]');
+
 function dayButton(root: ParentNode, day: string): HTMLElement {
   const match = Array.from(root.querySelectorAll('button, [role="button"]')).find(
     (el) => el.textContent?.trim() === day && el.getAttribute("aria-disabled") !== "true",
@@ -56,100 +74,74 @@ function dayButton(root: ParentNode, day: string): HTMLElement {
   return match as HTMLElement;
 }
 
-describe("Date on touch web (FZ-8114)", () => {
-  it("a coarse pointer renders the browser's date input, labelled by the field", () => {
-    coarse = true;
-    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
-    const input = touchInput(result.container, "date");
-    const label = result.container.querySelector("label");
-    expect(label?.getAttribute("for")).toBe(input.id);
-    expect(result.container.querySelector('[role="combobox"]')).toBeNull();
-  });
+function Page() {
+  return (
+    <>
+      <div data-testid="blank" style={{ height: 200 }} />
+      <DatePicker label="Date" name="date" value={new Date(2026, 2, 5)} />
+      <TimePicker label="Time" name="time" value="14:30" />
+      <DatetimePicker label="Date and time" name="starts" />
+    </>
+  );
+}
 
-  it("a fine pointer keeps the MPO combobox and no date input", () => {
-    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
-    expect(result.container.querySelector('input[type="date"]')).toBeNull();
-    expect(result.container.querySelector('[role="combobox"]')).not.toBeNull();
+describe("touch web opens MPO's cover panel, never the browser's popover (FZ-8438)", () => {
+  it.each([
+    ["date", "date-picker-trigger", <DatePicker key="d" label="Due" name="due" />],
+    ["time", "time-picker-trigger", <TimePicker key="t" label="At" name="at" />],
+    [
+      "date and time",
+      "date-picker-trigger",
+      <DatetimePicker key="dt" label="Starts" name="starts" />,
+    ],
+  ] as const)("a tap on the %s field opens the MPO panel over it", async (_, testId, field) => {
+    const result = renderWithProviders(field);
+    expect(result.container.querySelector("input[type=date], input[type=time]")).toBeNull();
+    expect(result.container.querySelector('input[type="datetime-local"]')).toBeNull();
+    tap(result.getByTestId(testId));
+    await waitFor(() => expect(panels().length).toBe(1));
+    expect(sheets().length).toBe(0);
+    expect(document.querySelector("[data-fp-trigger-row]")).not.toBeNull();
   });
 
-  it("the picked string shows in the MPO box and emits the calendar's Date", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(<DatePicker label="Due" name="due" onChange={onChange} />);
+  it("a blank tap opens nothing", async () => {
+    const result = renderWithProviders(<Page />);
+    tap(result.getByTestId("blank"));
+    tap(document.body);
     await act(async () => {
-      fireEvent.change(touchInput(result.container, "date"), { target: { value: "2026-03-05" } });
+      await new Promise((resolve) => setTimeout(resolve, 50));
     });
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const picked = onChange.mock.calls[0][0] as Date;
-    expect(picked.getTime()).toBe(new Date(2026, 2, 5).getTime());
-    expect(result.container.querySelector('input[value="Mar 5, 2026"]')).not.toBeNull();
-    expect(touchInput(result.container, "date").value).toBe("2026-03-05");
+    expect(panels().length).toBe(0);
+    expect(sheets().length).toBe(0);
   });
 
-  it("both paths commit the same value for the same day", async () => {
-    const fine = vi.fn();
-    const desktop = renderWithProviders(
-      <DatePicker label="Due" name="due" value="2026-03-01" onChange={fine} />,
-    );
-    await act(async () => {
-      fireEvent.click(desktop.container.querySelector('[role="combobox"]') as HTMLElement);
-    });
-    await waitFor(() => dayButton(document.body, "5"));
-    await act(async () => {
-      fireEvent.click(dayButton(document.body, "5"));
-    });
-    desktop.unmount();
-
-    coarse = true;
-    const touch = vi.fn();
-    const phone = renderWithProviders(
-      <DatePicker label="Due" name="due" value="2026-03-01" onChange={touch} />,
-    );
-    expect(touchInput(phone.container, "date").value).toBe("2026-03-01");
-    await act(async () => {
-      fireEvent.change(touchInput(phone.container, "date"), { target: { value: "2026-03-05" } });
-    });
-
-    expect(fine).toHaveBeenCalledTimes(1);
-    expect(touch).toHaveBeenCalledTimes(1);
-    expect((touch.mock.calls[0][0] as Date).getTime()).toBe(
-      (fine.mock.calls[0][0] as Date).getTime(),
-    );
+  it("only the tapped field opens", async () => {
+    const result = renderWithProviders(<Page />);
+    tap(result.getByTestId("time-picker-trigger"));
+    await waitFor(() => expect(panels().length).toBe(1));
+    const panel = panels()[0] as HTMLElement;
+    expect(panel.querySelector('[data-testid="time-picker-panel"]')).not.toBeNull();
+    expect(panel.textContent).not.toContain("March");
   });
 
-  it("clearing in the browser's control clears the field", async () => {
-    coarse = true;
+  it("the clear ✕ clears without opening", async () => {
     const onChange = vi.fn();
     const result = renderWithProviders(
-      <DatePicker label="Due" name="due" value="2026-03-05" onChange={onChange} />,
+      <DatePicker label="Due" name="due" value={new Date(2026, 2, 5)} onChange={onChange} />,
     );
+    tap(result.getByTestId("date-picker-clear"));
     await act(async () => {
-      fireEvent.change(touchInput(result.container, "date"), { target: { value: "" } });
+      await new Promise((resolve) => setTimeout(resolve, 50));
     });
     expect(onChange).toHaveBeenLastCalledWith(null);
+    expect(panels().length).toBe(0);
   });
 
-  it("min and max ride the input as local calendar days", () => {
-    coarse = true;
-    const result = renderWithProviders(
-      <DatePicker
-        label="Due"
-        name="due"
-        minDate={new Date(2026, 0, 2)}
-        maxDate={new Date(2026, 11, 30)}
-      />,
-    );
-    const input = touchInput(result.container, "date");
-    expect(input.min).toBe("2026-01-02");
-    expect(input.max).toBe("2026-12-30");
-  });
-
-  it("commits into form state", async () => {
-    coarse = true;
+  it("a day picked in the panel commits the calendar's Date into form state", async () => {
     const onSubmit = vi.fn();
     const Fixture = () => {
       const form = useForm({
-        defaultValues: { due: null as Date | null },
+        defaultValues: { due: new Date(2026, 2, 1) as Date | null },
         onSubmit: async ({ value }) => onSubmit(value),
       });
       return (
@@ -160,99 +152,49 @@ describe("Date on touch web (FZ-8114)", () => {
       );
     };
     const result = renderWithProviders(<Fixture />);
+    tap(result.getByTestId("date-picker-trigger"));
+    await waitFor(() => expect(panels().length).toBe(1));
     await act(async () => {
-      fireEvent.change(touchInput(result.container, "date"), { target: { value: "2026-08-15" } });
+      fireEvent.click(dayButton(panels()[0] as HTMLElement, "15"));
     });
+    await waitFor(() => expect(panels().length).toBe(0));
     await act(async () => {
       fireEvent.click(result.getSubmitButton() as HTMLElement);
     });
     await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
-    expect(formatCalendarDate(onSubmit.mock.calls[0][0].due, "date")).toBe("2026-08-15");
-  });
-});
-
-describe("Datetime on touch web (FZ-8114)", () => {
-  it("a coarse pointer renders datetime-local and emits the local wall clock", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <DatetimePicker label="Starts" name="starts" onChange={onChange} />,
-    );
-    await act(async () => {
-      fireEvent.change(touchInput(result.container, "datetime-local"), {
-        target: { value: "2026-03-05T14:30" },
-      });
-    });
-    const picked = onChange.mock.calls[0][0] as Date;
-    expect(formatCalendarDate(picked, "datetime")).toBe("2026-03-05 14:30:00");
-    expect(touchInput(result.container, "datetime-local").value).toBe("2026-03-05T14:30");
-  });
-
-  it("seconds widen the input's step and survive the round trip", () => {
-    coarse = true;
-    const result = renderWithProviders(
-      <DatetimePicker
-        label="Starts"
-        name="starts"
-        showSeconds
-        value={new Date(2026, 2, 5, 14, 30, 15)}
-      />,
-    );
-    const input = touchInput(result.container, "datetime-local");
-    expect(input.step).toBe("1");
-    expect(input.value).toBe("2026-03-05T14:30:15");
-  });
-
-  it("a fine pointer keeps the MPO panel trigger", () => {
-    const result = renderWithProviders(<DatetimePicker label="Starts" name="starts" />);
-    expect(result.container.querySelector('input[type="datetime-local"]')).toBeNull();
-    expect(result.container.querySelector('[role="combobox"]')).not.toBeNull();
+    expect(formatCalendarDate(onSubmit.mock.calls[0][0].due, "date")).toBe("2026-03-15");
   });
 });
 
-describe("Time on touch web (FZ-8114)", () => {
-  it("a coarse pointer renders the time input and emits TimePicker's string", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <TimePicker label="At" name="at" value="09:15" onChange={onChange} />,
+describe("a field too low for the panel (LC-105 collision)", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("takes MPO's bottom sheet, still never a native input", async () => {
+    const field = { x: 16, y: window.innerHeight - 60, width: 358, height: 44 };
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        if (!this.hasAttribute("data-fp-reference")) return original.call(this);
+        return {
+          ...field,
+          top: field.y,
+          left: field.x,
+          right: field.x + field.width,
+          bottom: field.y + field.height,
+          toJSON: () => ({}),
+        } as DOMRect;
+      },
     );
-    const input = touchInput(result.container, "time");
-    expect(input.value).toBe("09:15");
-    await act(async () => {
-      fireEvent.change(input, { target: { value: "14:30" } });
-    });
-    expect(onChange).toHaveBeenLastCalledWith("14:30");
-    expect(result.container.querySelector('input[value="2:30 PM"]')).not.toBeNull();
-  });
-
-  it("showSeconds emits HH:mm:ss even when the browser drops :00", async () => {
-    coarse = true;
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <TimePicker label="At" name="at" showSeconds onChange={onChange} />,
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.hasAttribute("data-fp-panel") ? 350 : 0;
+      },
     );
-    await act(async () => {
-      fireEvent.change(touchInput(result.container, "time"), { target: { value: "14:30" } });
-    });
-    expect(onChange).toHaveBeenLastCalledWith("14:30:00");
-  });
-
-  it("a fine pointer keeps the MPO wheels trigger", () => {
-    const result = renderWithProviders(<TimePicker label="At" name="at" />);
-    expect(result.container.querySelector('input[type="time"]')).toBeNull();
-  });
-});
-
-describe("the touch input stays inside its box (FZ-8114)", () => {
-  it.each([
-    ["date", <DatePicker key="d" label="Due" name="due" />],
-    ["datetime-local", <DatetimePicker key="dt" label="Starts" name="starts" />],
-    ["time", <TimePicker key="t" label="At" name="at" />],
-  ] as const)("the %s input's box is its positioning context", (type, field) => {
-    coarse = true;
-    const result = renderWithProviders(field);
-    const box = touchInput(result.container, type).parentElement as HTMLElement;
-    expect(getComputedStyle(box).position).toBe("relative");
+    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
+    tap(result.getByTestId("date-picker-trigger"));
+    await waitFor(() => expect(sheets().length).toBe(1));
+    expect(document.querySelector("input[type=date], input[type=time]")).toBeNull();
   });
 });