@multiplatform.one/forms 7.77.0 → 7.77.2

package/src/fields/Duration/Duration.spec.tsx

@@ -104,14 +104,14 @@ describe("Duration", () => {
 
     it("supplies a default clock affordance", () => {
       const result = renderWithProviders(<Duration label="Clock" name="c" value={3600} />);
-      expect(result.container.querySelector("svg")).toBeTruthy();
+      expect(result.container.querySelector("[data-duration-box] svg")).toBeTruthy();
     });
 
     it("hides the clock when clockIcon is null", () => {
       const result = renderWithProviders(
         <Duration label="No clock" name="c" value={3600} clockIcon={null} />,
       );
-      expect(result.container.querySelector("svg")).toBeNull();
+      expect(result.container.querySelector("[data-duration-box] svg")).toBeNull();
     });
 
     it("normalises a negative value in the hours segment", () => {
@@ -193,7 +193,7 @@ describe("Duration", () => {
       expect(DURATION_PRESET_SIZE).toBe("$2");
       expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(26);
       const result = renderWithProviders(<Duration label="P" value={0} />);
-      const chips = result.container.querySelectorAll("[data-duration-preset]");
+      const chips = result.container.querySelectorAll("[data-duration-preset] [data-mp-chip]");
       expect(chips).toHaveLength(6);
       for (const chip of chips) {
         const el = chip as HTMLElement;
@@ -222,8 +222,8 @@ describe("Duration", () => {
     it("clock glyph follows the icon recipe, not a hardcoded 16 (LC-75)", () => {
       const small = renderWithProviders(<Duration label="S" size="$2" value={3600} />);
       const large = renderWithProviders(<Duration label="L" size="$6" value={3600} />);
-      const sSvg = small.container.querySelector("svg");
-      const lSvg = large.container.querySelector("svg");
+      const sSvg = small.container.querySelector("[data-duration-box] svg");
+      const lSvg = large.container.querySelector("[data-duration-box] svg");
       const sSize = Number(sSvg?.getAttribute("width") ?? sSvg?.getAttribute("height"));
       const lSize = Number(lSvg?.getAttribute("width") ?? lSvg?.getAttribute("height"));
       expect(sSize).toBe(sizeRecipeForToken("$2").iconSize);
@@ -244,13 +244,22 @@ describe("Duration", () => {
     it("fires onChange with seconds (LC-14) from a preset", () => {
       const onChange = vi.fn();
       const result = renderWithProviders(<Duration label="P" value={0} onChange={onChange} />);
-      const chip = result.container.querySelector(
-        "[data-duration-preset], [data-duration-presets] button, [data-duration-presets] [role='button']",
-      );
+      const chip = result.container.querySelector("[data-duration-preset='1h'] [role='button']");
       expect(chip).toBeTruthy();
       fireEvent.click(chip as HTMLElement);
-      expect(onChange).toHaveBeenCalled();
-      expect(typeof onChange.mock.calls[0]?.[0]).toBe("number");
+      expect(onChange).toHaveBeenCalledWith(3600);
+    });
+
+    it("presets are MPO chips, the current value's chip selected (FZ-8111)", () => {
+      const result = renderWithProviders(<Duration label="P" value={3600} />);
+      const selected = result.container.querySelectorAll(
+        "[data-duration-preset] [data-mp-chip][data-selected='true']",
+      );
+      expect(selected).toHaveLength(1);
+      expect(
+        selected[0]!.closest("[data-duration-preset]")?.getAttribute("data-duration-preset"),
+      ).toBe("1h");
+      expect(result.container.querySelector("[data-duration-presets] button")).toBeNull();
     });
 
     it("arrow-up on hours commits via onChange", () => {

package/src/fields/Duration/Duration.wheel.native.spec.tsx

@@ -0,0 +1,98 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const picker = vi.hoisted(() => ({ available: true, props: [] as Record<string, unknown>[] }));
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return { ...actual, Platform: { ...actual.Platform, OS: "ios" } };
+});
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  const real = actual.platform as Record<string, unknown>;
+  return {
+    ...actual,
+    platform: new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          if (prop === "isIos") return true;
+          if (prop === "isAndroid") return false;
+          return real[prop as string];
+        },
+      },
+    ),
+  };
+});
+
+vi.mock("./DurationWheel", async () => await import("./DurationWheel.native"));
+
+vi.mock("../nativeDateTime/dateTimePickerLoader", () => ({
+  loadDateTimePicker: () =>
+    picker.available
+      ? (props: Record<string, unknown>) => {
+          picker.props.push(props);
+          return <div data-testid="os-picker" />;
+        }
+      : null,
+}));
+
+const { Duration } = await import("./index");
+
+const at = (h: number, m: number) => {
+  const d = new Date(2026, 9, 29);
+  d.setHours(h, m, 0, 0);
+  return d;
+};
+
+describe("Duration on a phone (FZ-8111, LC-266)", () => {
+  beforeEach(() => {
+    picker.available = true;
+    picker.props = [];
+  });
+
+  it("shows the value on a trigger, not typed segments", () => {
+    const result = renderWithProviders(<Duration label="Duration" value={3720} />);
+    expect(result.getByTestId("duration-wheel-trigger")).toBeTruthy();
+    expect(result.container.querySelector("[data-duration-value]")?.textContent).toBe("1 h 2 m");
+    expect(result.container.querySelector('input[aria-label="Hours"]')).toBeNull();
+  });
+
+  it("opens the countdown wheel at the value and writes the pick back as seconds", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Duration label="Duration" value={3720} hideDays onChange={onChange} />,
+    );
+    fireEvent.click(result.getByTestId("duration-wheel-trigger"));
+    const props = picker.props.at(-1)!;
+    expect(props.mode).toBe("countdown");
+    expect([(props.value as Date).getHours(), (props.value as Date).getMinutes()]).toEqual([1, 2]);
+    act(() => {
+      (props.onChange as (e: unknown, d: Date) => void)({ type: "set" }, at(2, 30));
+    });
+    fireEvent.click(result.getByRole("button", { name: "Done" }));
+    expect(onChange).toHaveBeenCalledWith(9000);
+  });
+
+  it("keeps the typed segments when the binary has no picker module", () => {
+    picker.available = false;
+    const result = renderWithProviders(<Duration label="Duration" value={3720} />);
+    expect(result.queryByTestId("duration-wheel-trigger")).toBeNull();
+    expect(result.container.querySelector('input[aria-label="Hours"]')).toBeTruthy();
+  });
+
+  it("keeps the typed segments for a field that shows seconds", () => {
+    const result = renderWithProviders(<Duration label="Duration" value={3725} showSeconds />);
+    expect(result.queryByTestId("duration-wheel-trigger")).toBeNull();
+    expect(result.container.querySelector('input[aria-label="Hours"]')).toBeTruthy();
+  });
+
+  it("keeps the MPO chip presets under the wheel trigger", () => {
+    const result = renderWithProviders(<Duration label="Duration" value={0} />);
+    expect(result.container.querySelectorAll("[data-duration-preset] [data-mp-chip]")).toHaveLength(
+      6,
+    );
+  });
+});

package/src/fields/Duration/DurationWheel.native.tsx

@@ -0,0 +1,101 @@
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { ClockIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { Pressable as RNPressable } from "react-native";
+import type { SizeTokens } from "tamagui";
+import { Text } from "tamagui";
+import { Input as InputParts } from "../../InputParts";
+import { formCommonColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
+import { loadDateTimePicker } from "../nativeDateTime/dateTimePickerLoader";
+import { OsDateTimeSheet } from "../nativeDateTime/OsDateTimeSheet";
+import {
+  durationToWheelDate,
+  formatDurationParts,
+  secondsToParts,
+  wheelDateToDuration,
+} from "./durationMath";
+import type { DurationWheelFieldProps } from "./durationWheelTypes";
+
+export type { DurationWheelFieldProps };
+
+export function durationWheelAvailable(): boolean {
+  return loadDateTimePicker() != null;
+}
+
+export function DurationWheelField({
+  seconds,
+  onChange,
+  disabled,
+  readOnly,
+  foldDays,
+  clockIcon,
+  hasError,
+  id,
+  hasLabel,
+  required,
+  size,
+  knobProps,
+}: DurationWheelFieldProps) {
+  const [open, setOpen] = useState(false);
+  const sizeToken = String(size || knobProps.sizeToken);
+  const recipe = sizeRecipeForToken(sizeToken);
+  const resolvedClock = clockIcon === undefined ? <ClockIcon size={recipe.iconSize} /> : clockIcon;
+  const shown = formatDurationParts(secondsToParts(seconds, foldDays), foldDays, {
+    d: t("d"),
+    h: t("h"),
+    m: t("m"),
+  });
+  const interactive = !disabled && !readOnly;
+
+  return (
+    <InputParts size={size || knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
+      <RNPressable
+        nativeID={id}
+        onPress={interactive ? () => setOpen(true) : undefined}
+        disabled={!interactive}
+        accessibilityRole="button"
+        accessibilityLabel={hasLabel ? undefined : t("Duration")}
+        accessibilityValue={{ text: shown }}
+        accessibilityState={{ disabled: !!disabled }}
+        aria-required={required || undefined}
+        aria-invalid={hasError || undefined}
+        style={{ width: "100%" }}
+        testID="duration-wheel-trigger"
+      >
+        <InputParts.Box
+          disabled={disabled}
+          data-duration-box=""
+          data-duration-wheel=""
+          justifyContent="flex-start"
+          size={sizeToken as SizeTokens}
+          pointerEvents="none"
+        >
+          {resolvedClock != null ? (
+            <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
+          ) : null}
+          <Text
+            {...knobProps.body}
+            {...knobProps.controlType}
+            fontSize={recipe.fontSize}
+            color={formCommonColors.text}
+            numberOfLines={1}
+            data-duration-value=""
+          >
+            {shown}
+          </Text>
+        </InputParts.Box>
+      </RNPressable>
+      <OsDateTimeSheet
+        open={open}
+        value={durationToWheelDate(seconds)}
+        mode="countdown"
+        onCancel={() => setOpen(false)}
+        onConfirm={(picked) => {
+          setOpen(false);
+          onChange(wheelDateToDuration(picked, seconds));
+        }}
+      />
+    </InputParts>
+  );
+}

package/src/fields/Duration/DurationWheel.tsx

@@ -0,0 +1,11 @@
+import type { DurationWheelFieldProps } from "./durationWheelTypes";
+
+export type { DurationWheelFieldProps };
+
+export function durationWheelAvailable(): boolean {
+  return false;
+}
+
+export function DurationWheelField(_props: DurationWheelFieldProps) {
+  return null;
+}

package/src/fields/Duration/durationMath.spec.ts

@@ -2,10 +2,13 @@ import { describe, expect, it } from "vitest";
 import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import {
   durationSegmentWidth,
+  durationToWheelDate,
+  formatDurationParts,
   normalizeSeconds,
   parseDurationText,
   partsToSeconds,
   secondsToParts,
+  wheelDateToDuration,
 } from "./durationMath";
 
 describe("durationMath", () => {
@@ -64,4 +67,44 @@ describe("durationMath", () => {
     expect(durationSegmentWidth("$2", 2)).not.toBe(durationSegmentWidth("$6", 2));
     expect(durationSegmentWidth("$2", 2)).toBeLessThan(durationSegmentWidth("$4", 2));
   });
+
+  describe("countdown wheel (FZ-8111)", () => {
+    const at = (h: number, m: number) => {
+      const d = new Date(2026, 9, 29);
+      d.setHours(h, m, 0, 0);
+      return d;
+    };
+
+    it("reads hours and minutes within the day onto the wheel", () => {
+      const date = durationToWheelDate(3720);
+      expect([date.getHours(), date.getMinutes(), date.getSeconds()]).toEqual([1, 2, 0]);
+      const late = durationToWheelDate(23 * 3600 + 59 * 60);
+      expect([late.getHours(), late.getMinutes()]).toEqual([23, 59]);
+    });
+
+    it("round-trips every wheel position back to the same seconds", () => {
+      for (const seconds of [0, 60, 900, 3720, 9000, 86340]) {
+        expect(wheelDateToDuration(durationToWheelDate(seconds), 0)).toBe(seconds);
+      }
+    });
+
+    it("sets seconds from a wheel pick", () => {
+      expect(wheelDateToDuration(at(2, 30), 0)).toBe(9000);
+      expect(wheelDateToDuration(at(0, 15), 3720)).toBe(900);
+    });
+
+    it("carries whole days and stray seconds the wheel cannot show", () => {
+      expect(wheelDateToDuration(at(2, 30), 86400 + 3600 + 7)).toBe(86400 + 9000 + 7);
+      const wheel = durationToWheelDate(90000);
+      expect([wheel.getHours(), wheel.getMinutes()]).toEqual([1, 0]);
+    });
+
+    it("formats the trigger text with or without days", () => {
+      const units = { d: "d", h: "h", m: "m" };
+      expect(formatDurationParts(secondsToParts(3720, true), true, units)).toBe("1 h 2 m");
+      expect(formatDurationParts(secondsToParts(90000, true), true, units)).toBe("25 h 0 m");
+      expect(formatDurationParts(secondsToParts(93784, false), false, units)).toBe("1 d 2 h 3 m");
+      expect(formatDurationParts(secondsToParts(3720, false), false, units)).toBe("1 h 2 m");
+    });
+  });
 });

package/src/fields/Duration/durationMath.ts

@@ -76,3 +76,34 @@ export function durationSegmentWidth(sizeToken: string, digits: number): number
   const recipe = sizeRecipeForToken(sizeToken);
   return recipe.fontSize * digits;
 }
+
+const DAY = 86400;
+
+/** The countdown wheel's reading of a duration: hours and minutes within one day, on today's date. */
+export function durationToWheelDate(total: number): Date {
+  const s = normalizeSeconds(total) % DAY;
+  const date = new Date();
+  date.setHours(Math.floor(s / 3600), Math.floor((s % 3600) / 60), 0, 0);
+  return date;
+}
+
+/**
+ * A wheel pick back to seconds. The wheel spans 0 h 0 m to 23 h 59 m, so the
+ * whole days and the stray seconds of the previous value carry over untouched.
+ */
+export function wheelDateToDuration(picked: Date, previous: number): number {
+  const prev = normalizeSeconds(previous);
+  return (
+    Math.floor(prev / DAY) * DAY + picked.getHours() * 3600 + picked.getMinutes() * 60 + (prev % 60)
+  );
+}
+
+/** "1 h 2 m", "1 d 2 h 3 m": the wheel trigger's text, units from the caller. */
+export function formatDurationParts(
+  parts: DurationParts,
+  hideDays: boolean,
+  units: { d: string; h: string; m: string },
+): string {
+  const head = hideDays || parts.days === 0 ? [] : [`${parts.days} ${units.d}`];
+  return [...head, `${parts.hours} ${units.h}`, `${parts.minutes} ${units.m}`].join(" ");
+}

package/src/fields/Duration/durationWheelTypes.ts

@@ -0,0 +1,18 @@
+import type { KnobProps } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+
+export interface DurationWheelFieldProps {
+  seconds: number;
+  onChange: (seconds: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  foldDays: boolean;
+  clockIcon?: ReactNode | null;
+  hasError?: boolean;
+  id?: string;
+  hasLabel?: boolean;
+  required?: boolean;
+  size?: SizeTokens;
+  knobProps: KnobProps;
+}

package/src/fields/Duration/index.tsx

@@ -5,7 +5,7 @@ import type { ReactNode } from "react";
 import { useCallback, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Text, XStack, YStack, isWeb } from "tamagui";
-import { Button } from "../../Button";
+import { Chip } from "../../Chip";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -20,22 +20,29 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
+import { DurationWheelField, durationWheelAvailable } from "./DurationWheel";
 import {
   durationSegmentWidth,
+  durationToWheelDate,
+  formatDurationParts,
   normalizeSeconds,
   parseDurationText,
   partsToSeconds,
   secondsToParts,
+  wheelDateToDuration,
   type DurationParts,
 } from "./durationMath";
 
 export type { DurationParts };
 export {
   durationSegmentWidth,
+  durationToWheelDate,
+  formatDurationParts,
   normalizeSeconds,
   parseDurationText,
   partsToSeconds,
   secondsToParts,
+  wheelDateToDuration,
 };
 
 export interface DurationPreset {
@@ -374,16 +381,15 @@ function DurationPresets({
       {presets.map((preset) => {
         const selected = seconds === preset.seconds;
         return (
-          <Button
-            key={preset.seconds}
-            size={DURATION_PRESET_SIZE}
-            outlined={!selected}
-            accent={selected}
-            data-duration-preset={preset.label}
-            onPress={() => onChange(preset.seconds)}
-          >
-            {preset.label}
-          </Button>
+          <XStack key={preset.seconds} data-duration-preset={preset.label}>
+            <Chip
+              size={DURATION_PRESET_SIZE}
+              selected={selected}
+              onPress={() => onChange(preset.seconds)}
+            >
+              {preset.label}
+            </Chip>
+          </XStack>
         );
       })}
     </XStack>
@@ -425,6 +431,11 @@ export interface DurationProps {
   clockIcon?: ReactNode | null;
   /** When true, renders a skeleton placeholder instead of the duration picker */
   skeleton?: boolean;
+  /**
+   * On iOS and Android a tap opens the system hours/minutes wheel (LC-266).
+   * `false` keeps the typed segments there too. Web always types.
+   */
+  native?: boolean;
 }
 
 export function Duration({
@@ -450,6 +461,7 @@ export function Duration({
   placeholder = t("Select duration"),
   clockIcon,
   skeleton,
+  native,
 }: DurationProps) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({
@@ -489,24 +501,43 @@ export function Duration({
     );
   }
 
+  const wheel = native !== false && !showSeconds && durationWheelAvailable();
+
   const fieldBody = (current: number, onValueChange: (s: number) => void, hasError?: boolean) => (
     <YStack {...knobProps.gap}>
-      <DurationControl
-        seconds={current}
-        onChange={onValueChange}
-        disabled={disabled}
-        readOnly={readOnly}
-        hideDays={hideDays}
-        showSeconds={showSeconds}
-        clockIcon={clockIcon}
-        hasError={hasError}
-        id={id}
-        hasLabel={Boolean(label)}
-        placeholder={placeholder}
-        required={required}
-        size={size}
-        knobProps={knobProps}
-      />
+      {wheel ? (
+        <DurationWheelField
+          seconds={current}
+          onChange={onValueChange}
+          disabled={disabled}
+          readOnly={readOnly}
+          foldDays={hideDays}
+          clockIcon={clockIcon}
+          hasError={hasError}
+          id={id}
+          hasLabel={Boolean(label)}
+          required={required}
+          size={size}
+          knobProps={knobProps}
+        />
+      ) : (
+        <DurationControl
+          seconds={current}
+          onChange={onValueChange}
+          disabled={disabled}
+          readOnly={readOnly}
+          hideDays={hideDays}
+          showSeconds={showSeconds}
+          clockIcon={clockIcon}
+          hasError={hasError}
+          id={id}
+          hasLabel={Boolean(label)}
+          placeholder={placeholder}
+          required={required}
+          size={size}
+          knobProps={knobProps}
+        />
+      )}
       {readOnly || disabled || inTableCell ? null : (
         <DurationPresets
           seconds={current}

package/src/fields/Select/Select.containingBlock.spec.tsx

@@ -98,7 +98,7 @@ describe("Select seamless cover (LC-112, FZ-8438)", () => {
   });
 });
 
-describe("Select drop-up (LC-112, FZ-8438 r3)", () => {
+describe("Select cover and scroll (LC-112, FZ-8463)", () => {
   const field = (top: number) => ({
     x: 16,
     y: top,
@@ -111,6 +111,7 @@ describe("Select drop-up (LC-112, FZ-8438 r3)", () => {
     toJSON: () => ({}),
   });
   let fieldTop = 700;
+  let contentHeight = 300;
   beforeEach(() => {
     Object.defineProperty(window, "innerWidth", {
       configurable: true,
@@ -136,7 +137,7 @@ describe("Select drop-up (LC-112, FZ-8438 r3)", () => {
     );
     vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
       function (this: HTMLElement) {
-        return this.dataset.testid === "select-dropdown" ? 300 : 0;
+        return this.dataset.testid === "select-dropdown" ? contentHeight : 0;
       },
     );
   });
@@ -144,28 +145,103 @@ describe("Select drop-up (LC-112, FZ-8438 r3)", () => {
     vi.restoreAllMocks();
   });
 
-  it("a field too low for its list opens upward, its bottom edge on the field's", async () => {
+  it("a low field's list covers the field with no echo and grows up from its bottom edge", async () => {
     fieldTop = 700;
+    contentHeight = 300;
     const result = renderWithProviders(<Select options={options} value="hel" />);
     const { dropdown } = await openTop(result);
-    // The panel's bottom edge is the field's (740): the 300 list plus the
-    // frame's borders, above it.
-    await waitFor(() => expect(parseFloat(dropdown.style.top)).toBeLessThan(700));
-    expect(parseFloat(dropdown.style.top) + parseFloat(dropdown.style.maxHeight)).toBe(740);
+    await waitFor(() => expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull());
+    // The panel's bottom edge is the field's (740), the whole list above it.
+    await waitFor(() =>
+      expect(parseFloat(dropdown.style.top) + parseFloat(dropdown.style.maxHeight)).toBe(740),
+    );
+    expect(parseFloat(dropdown.style.top)).toBeLessThan(700);
     expect(parseFloat(dropdown.style.maxHeight)).toBeGreaterThanOrEqual(300);
-    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
-    await waitFor(() => expect(echo?.style.order).toBe("1"));
-    expect(echo?.style.top).toBe("");
-    expect(echo?.style.bottom).not.toBe("");
+    expect(dropdown.textContent?.match(/Helsinki/g)?.length ?? 0).toBe(1);
+  });
+
+  it("a low field's long list stops at the safe top edge and scrolls", async () => {
+    fieldTop = 700;
+    contentHeight = 2000;
+    const result = renderWithProviders(<Select options={options} value="hel" />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull());
+    await waitFor(() => expect(parseFloat(dropdown.style.top)).toBe(10));
+    expect(parseFloat(dropdown.style.maxHeight)).toBe(730);
+  });
+
+  it("a high field's long list covers the field and grows down to the safe bottom edge", async () => {
+    fieldTop = 120;
+    contentHeight = 2000;
+    const result = renderWithProviders(<Select options={options} value="hel" />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull());
+    expect(parseFloat(dropdown.style.top)).toBe(120);
+    await waitFor(() => expect(parseFloat(dropdown.style.maxHeight)).toBe(768 - 10 - 120));
+  });
+
+  describe("with 36px rows", () => {
+    const rowTop = 4;
+    const rowHeight = 36;
+    beforeEach(() => {
+      const rowIndex = (el: HTMLElement) =>
+        Array.from(
+          el.closest('[data-testid="select-dropdown"]')?.querySelectorAll('[role="option"]') ?? [],
+        ).indexOf(el);
+      vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(
+        function (this: HTMLElement) {
+          return this.getAttribute("role") === "option" ? rowHeight : 0;
+        },
+      );
+      vi.spyOn(HTMLElement.prototype, "offsetTop", "get").mockImplementation(
+        function (this: HTMLElement) {
+          return this.getAttribute("role") === "option" ? rowTop + rowIndex(this) * rowHeight : 0;
+        },
+      );
+      vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockImplementation(
+        function (this: HTMLElement) {
+          return this.dataset.testid === "select-dropdown"
+            ? parseFloat(this.style.maxHeight) || 0
+            : 0;
+        },
+      );
+    });
+
+    it("growing up, the row on the field is whole: the panel's bottom stays on the field", async () => {
+      fieldTop = 700;
+      contentHeight = 2000;
+      const result = renderWithProviders(<Select options={options} value="hel" />);
+      const { dropdown } = await openTop(result);
+      // 730 of room above holds 20 whole rows and 6px of a 21st: that sliver goes.
+      await waitFor(() => expect(parseFloat(dropdown.style.maxHeight)).toBe(724));
+      expect(parseFloat(dropdown.style.top)).toBe(16);
+      const visibleBottom = dropdown.scrollTop + parseFloat(dropdown.style.maxHeight);
+      expect((visibleBottom - rowTop) % rowHeight).toBe(0);
+    });
+
+    it("growing down, no sliver of a row sits at the screen edge", async () => {
+      fieldTop = 120;
+      contentHeight = 2000;
+      const result = renderWithProviders(<Select options={options} value="hel" />);
+      const { dropdown } = await openTop(result);
+      expect(parseFloat(dropdown.style.top)).toBe(120);
+      await waitFor(() =>
+        expect(parseFloat(dropdown.style.maxHeight)).toBeLessThan(768 - 10 - 120),
+      );
+      const visibleBottom = dropdown.scrollTop + parseFloat(dropdown.style.maxHeight);
+      expect((visibleBottom - rowTop) % rowHeight).toBe(0);
+    });
   });
 
   it("a field with room below keeps the echo on top, opening down", async () => {
     fieldTop = 120;
+    contentHeight = 300;
     const result = renderWithProviders(<Select options={options} value="hel" />);
     const { dropdown, top } = await openTop(result);
     expect(top).toBe(120);
     const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
-    expect(echo?.style.order).toBe("");
+    expect(echo).not.toBeNull();
+    expect(dropdown.firstElementChild).toBe(echo);
   });
 });