@multiplatform.one/forms 7.80.0 → 7.81.1

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

@@ -54,51 +54,7 @@ describe("Select inside a transformed sheet (FZ-8438)", () => {
   });
 });
 
-describe("Select seamless cover (LC-112, FZ-8438)", () => {
-  beforeEach(() => {
-    Object.defineProperty(window, "innerWidth", {
-      configurable: true,
-      writable: true,
-      value: 1200,
-    });
-  });
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("opens on the field's top edge with the field echoed as a hidden first row", async () => {
-    const original = HTMLElement.prototype.getBoundingClientRect;
-    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
-      function (this: HTMLElement) {
-        const field = this.querySelector('[data-testid="select-trigger"]');
-        if (this.dataset.testid === "select-trigger" || field) {
-          return {
-            x: 16,
-            y: 200,
-            top: 200,
-            left: 16,
-            right: 416,
-            bottom: 240,
-            width: 400,
-            height: 40,
-            toJSON: () => ({}),
-          } as DOMRect;
-        }
-        return original.call(this);
-      },
-    );
-    const result = renderWithProviders(<Select options={options} value="nbg" />);
-    const { dropdown, top } = await openTop(result);
-    expect(top).toBe(200);
-    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
-    expect(echo).not.toBeNull();
-    expect(dropdown.firstElementChild).toBe(echo);
-    expect(echo?.getAttribute("aria-hidden")).toBe("true");
-    expect(echo?.getAttribute("role")).toBeNull();
-  });
-});
-
-describe("Select cover and scroll (LC-112, FZ-8463)", () => {
+describe("Select opens with its checked row on the field (LC-112, FZ-8557)", () => {
   const field = (top: number) => ({
     x: 16,
     y: top,
@@ -110,8 +66,11 @@ describe("Select cover and scroll (LC-112, FZ-8463)", () => {
     height: 40,
     toJSON: () => ({}),
   });
+  const rowTop = 4;
+  const rowHeight = 36;
   let fieldTop = 700;
-  let contentHeight = 300;
+  let viewportHeight = 768;
+  const contentOf = (count: number) => rowTop * 2 + count * rowHeight;
   beforeEach(() => {
     Object.defineProperty(window, "innerWidth", {
       configurable: true,
@@ -120,8 +79,7 @@ describe("Select cover and scroll (LC-112, FZ-8463)", () => {
     });
     Object.defineProperty(window, "innerHeight", {
       configurable: true,
-      writable: true,
-      value: 768,
+      get: () => viewportHeight,
     });
     const original = HTMLElement.prototype.getBoundingClientRect;
     vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
@@ -135,113 +93,156 @@ describe("Select cover and scroll (LC-112, FZ-8463)", () => {
         return original.call(this);
       },
     );
+    const rowsOf = (el: HTMLElement) =>
+      Array.from(
+        el.closest('[data-testid="select-dropdown"]')?.querySelectorAll('[role="option"]') ?? [],
+      );
     vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
       function (this: HTMLElement) {
-        return this.dataset.testid === "select-dropdown" ? contentHeight : 0;
+        return this.dataset.testid === "select-dropdown" ? contentOf(rowsOf(this).length) : 0;
+      },
+    );
+    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 + rowsOf(this).indexOf(this) * rowHeight
+          : 0;
+      },
+    );
+    vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.dataset.testid === "select-dropdown" ? innerOf(this) : 0;
       },
     );
   });
   afterEach(() => {
+    viewportHeight = 768;
     vi.restoreAllMocks();
   });
 
-  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 borders = (dropdown: HTMLElement) => {
+    const style = getComputedStyle(dropdown);
+    return {
+      top: parseFloat(style.borderTopWidth) || 0,
+      bottom: parseFloat(style.borderBottomWidth) || 0,
+    };
+  };
+  /** The panel's padding box, in viewport pixels. */
+  function innerOf(dropdown: HTMLElement) {
+    const border = borders(dropdown);
+    return (parseFloat(dropdown.style.maxHeight) || 0) - border.top - border.bottom;
+  }
+  const paddingTop = (dropdown: HTMLElement) =>
+    parseFloat(dropdown.style.top) + borders(dropdown).top;
+  /** The panel's outer edges: these meet the safe edges (`panelViewportPadding`). */
+  const outerTop = (dropdown: HTMLElement) => parseFloat(dropdown.style.top);
+  const outerBottom = (dropdown: HTMLElement) =>
+    outerTop(dropdown) + parseFloat(dropdown.style.maxHeight);
+  /**
+   * The checked row's value against the closed field's: both draw one line
+   * of text centred in their row, so the delta of the two centres is how far
+   * the value moves on open.
+   */
+  const valueDelta = (dropdown: HTMLElement, row: number) =>
+    paddingTop(dropdown) +
+    rowTop +
+    row * rowHeight -
+    dropdown.scrollTop +
+    rowHeight / 2 -
+    (fieldTop + 20);
+  const many: SelectOption[] = Array.from({ length: 40 }, (_, i) => ({
+    value: `c${i}`,
+    label: `City ${i}`,
+  }));
+
+  it("never echoes the field: the checked row is the value, shown once", async () => {
+    fieldTop = 120;
+    const result = renderWithProviders(<Select options={options} value="nbg" />);
     const { dropdown } = await openTop(result);
-    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);
-    expect(dropdown.textContent?.match(/Helsinki/g)?.length ?? 0).toBe(1);
+    await waitFor(() => expect(Math.abs(valueDelta(dropdown, 2))).toBeLessThanOrEqual(1));
+    expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(dropdown.textContent?.match(/Nuremberg/g)?.length ?? 0).toBe(1);
+    expect(dropdown.scrollTop).toBe(0);
   });
 
-  it("a low field's long list stops at the safe top edge and scrolls", async () => {
+  it("with no value, the first row sits on the field", async () => {
+    fieldTop = 120;
+    const result = renderWithProviders(<Select options={options} />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(Math.abs(valueDelta(dropdown, 0))).toBeLessThanOrEqual(1));
+    expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull();
+  });
+
+  it("a short list by the bottom edge shows whole, slid up the least distance", 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);
+    await waitFor(() => expect(outerBottom(dropdown)).toBe(768 - 10));
+    expect(innerOf(dropdown)).toBe(contentOf(3));
+    expect(dropdown.scrollTop).toBe(0);
+    // Helsinki would sit on the field; the list stops at the safe edge instead.
+    expect(valueDelta(dropdown, 0)).toBeLessThan(0);
   });
 
-  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" />);
+  it("a long list that fits the screen shows every row with no scrolling", async () => {
+    viewportHeight = 1366;
+    fieldTop = 700;
+    const result = renderWithProviders(<Select options={many.slice(0, 36)} value="c20" />);
     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));
+    await waitFor(() => expect(innerOf(dropdown)).toBe(contentOf(36)));
+    expect(dropdown.scrollTop).toBe(0);
+    // Cairo's 20 rows above it don't fit over the field: the list slides down
+    // the least distance, its top on the safe edge, and the value sits just below.
+    expect(outerTop(dropdown)).toBe(10);
+    expect(outerBottom(dropdown)).toBeLessThanOrEqual(1366 - 10);
+    expect(valueDelta(dropdown, 20)).toBeGreaterThan(0);
   });
 
-  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("a list taller than the screen keeps its value on the field and reaches both safe edges", async () => {
+    fieldTop = 700;
+    const result = renderWithProviders(<Select options={many} value="c20" />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(Math.abs(valueDelta(dropdown, 20))).toBeLessThanOrEqual(1));
+    expect(dropdown.scrollTop).toBeGreaterThan(0);
+    // No whole-row trim: the clipped edges sit on the safe edges, a cut row under each band.
+    expect(outerTop(dropdown)).toBe(10);
+    expect(outerBottom(dropdown)).toBe(768 - 10);
+  });
 
-    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("a high field's first row stays on the field and the list runs to the safe bottom edge", async () => {
+    fieldTop = 120;
+    const result = renderWithProviders(<Select options={many} value="c0" />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(Math.abs(valueDelta(dropdown, 0))).toBeLessThanOrEqual(1));
+    expect(dropdown.scrollTop).toBe(0);
+    expect(outerBottom(dropdown)).toBe(768 - 10);
+  });
 
-    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("the last row checked on a low field ends the panel at the list's end", async () => {
+    fieldTop = 700;
+    const result = renderWithProviders(<Select options={many} value="c39" />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(Math.abs(valueDelta(dropdown, 39))).toBeLessThanOrEqual(1));
+    expect(outerTop(dropdown)).toBe(10);
+    expect(dropdown.scrollTop + innerOf(dropdown)).toBe(contentOf(40));
   });
 
-  it("a field with room below keeps the echo on top, opening down", async () => {
+  it("scrolling grows a panel that stops short of the safe top edge, the rows staying put", 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).not.toBeNull();
-    expect(dropdown.firstElementChild).toBe(echo);
+    const result = renderWithProviders(<Select options={many} value="c0" />);
+    const { dropdown } = await openTop(result);
+    await waitFor(() => expect(Math.abs(valueDelta(dropdown, 0))).toBeLessThanOrEqual(1));
+    const before = paddingTop(dropdown);
+    dropdown.scrollTop = 50;
+    fireEvent.scroll(dropdown);
+    await waitFor(() => expect(paddingTop(dropdown)).toBe(before - 50));
+    expect(dropdown.scrollTop).toBe(0);
+    expect(outerBottom(dropdown)).toBe(768 - 10);
   });
 });
 

package/src/fields/Select/Select.popUp.native.spec.tsx

@@ -0,0 +1,276 @@
+/**
+ * FZ-8655 (LC-112, Round 40 parity): a native Select opens the way the web's
+ * covering Select does, a macOS pop-up. The rows are measured in the native
+ * FloatingPanel and placed by the placement code the web shares
+ * (`placeCheckedOnField`): the checked row on the field, or the first row with
+ * no value, and never a field echo. A list that fits shows whole, a taller one
+ * scrolls with its clipped edges on the safe edges. On a phone a long list
+ * keeps its sheet at page level.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { panelViewportPadding } from "../../FloatingPanel/useFloatingPanel";
+import { OverlayStackProvider } from "../../shared/overlayStack";
+import { placeCheckedOnField, scrollArrowBand } from "../../shared/checkedOnField";
+import { Select } from "./index";
+
+const screen = vi.hoisted(() => ({ width: 1024, height: 1366 }));
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+    visible ? children : null,
+  useWindowDimensions: () => ({ ...screen, scale: 2, fontScale: 1 }),
+}));
+vi.mock("../../FloatingPanel", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../FloatingPanel")>();
+  const native = await import("../../FloatingPanel/index.native");
+  return { ...actual, FloatingPanel: native.FloatingPanel };
+});
+
+const rowHeight = 44;
+let band = 0;
+let field = { x: 40, y: 400, width: 320, height: 44 };
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  field = { x: 40, y: 400, width: 320, height: 44 };
+  screen.width = 1024;
+  screen.height = 1366;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+    ...field,
+    left: field.x,
+    top: field.y,
+    right: field.x + field.width,
+    bottom: field.y + field.height,
+    toJSON: () => ({}),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+/** The band the panel lays out for: half this preset's menu row. */
+function BandProbe() {
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  band = scrollArrowBand(knobProps.menuRow.minHeight);
+  return null;
+}
+
+const cities = (count: number) =>
+  Array.from({ length: count }, (_, i) => ({ value: `c${i}`, label: `City ${i}` }));
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+/** RN-web parks onLayout on the node for a ResizeObserver happy-dom never fires. */
+function layout(node: Element, box: { y?: number; width: number; height: number }) {
+  const onLayout = (node as unknown as { __reactLayoutHandler?: (event: unknown) => void })
+    .__reactLayoutHandler;
+  expect(onLayout).toBeTypeOf("function");
+  act(() => {
+    onLayout?.({ nativeEvent: { layout: { x: 0, y: 0, ...box } } });
+  });
+}
+
+const byTestId = (id: string) => document.querySelector<HTMLElement>(`[data-testid="${id}"]`);
+const menu = () => byTestId("floating-panel-menu");
+const px = (value: string | undefined) => Number.parseFloat(value ?? "");
+
+function open({
+  count,
+  checked,
+  inOverlay = false,
+}: {
+  count: number;
+  checked?: number;
+  inOverlay?: boolean;
+}) {
+  const options = cities(count);
+  const select = (
+    <Select
+      aria-label="City"
+      options={options}
+      value={checked === undefined ? undefined : `c${checked}`}
+    />
+  );
+  const view = renderWithProviders(
+    <>
+      <BandProbe />
+      {inOverlay ? <OverlayStackProvider zIndex={100_000}>{select}</OverlayStackProvider> : select}
+    </>,
+  );
+  tap(view.getByRole("button", { name: "City" }));
+  return { view, options, contentHeight: count * rowHeight };
+}
+
+function measureRows(
+  view: ReturnType<typeof renderWithProviders>,
+  index: number,
+  contentHeight: number,
+) {
+  const frame = menu();
+  expect(frame).not.toBeNull();
+  layout(frame as HTMLElement, { width: 320, height: Math.min(contentHeight + 2, 900) });
+  layout(view.getByRole("button", { name: `City ${index}` }), {
+    y: index * rowHeight,
+    width: 320,
+    height: rowHeight,
+  });
+  layout(byTestId("floating-panel-menu-content") as HTMLElement, {
+    width: 320,
+    height: contentHeight,
+  });
+}
+
+/** The padding box the shared helper asks for, from the screen under test. */
+function expected(index: number, contentHeight: number, border: number) {
+  return placeCheckedOnField({
+    fieldTop: field.y,
+    fieldBottom: field.y + field.height,
+    rowTop: index * rowHeight,
+    rowHeight,
+    contentHeight,
+    boundsTop: panelViewportPadding + border,
+    boundsBottom: screen.height - panelViewportPadding - border,
+    band,
+  });
+}
+
+function border() {
+  const surface = byTestId("floating-panel-menu-surface") as HTMLElement;
+  return Math.round(px(getComputedStyle(surface).borderTopWidth)) || 0;
+}
+
+describe("Select native pop-up (FZ-8655)", () => {
+  it("never echoes the field, and paints nothing until its rows are measured", () => {
+    const { view, contentHeight } = open({ count: 5, checked: 2 });
+    expect(menu()?.style.opacity).toBe("0");
+    measureRows(view, 2, contentHeight);
+    expect(menu()?.style.opacity).toBe("1");
+    expect(byTestId("floating-panel-menu-echo")).toBeNull();
+  });
+
+  it("centres the checked row on the field, the rows before it running up", () => {
+    const { view, contentHeight } = open({ count: 5, checked: 2 });
+    measureRows(view, 2, contentHeight);
+    const b = border();
+    const fit = expected(2, contentHeight, b);
+    expect(px(menu()?.style.top)).toBe(fit.top - b);
+    expect(fit.top + 2 * rowHeight).toBe(field.y);
+  });
+
+  it("puts the first row on the field with no value", () => {
+    const { view, contentHeight } = open({ count: 5 });
+    measureRows(view, 0, contentHeight);
+    const b = border();
+    expect(px(menu()?.style.top) + b).toBe(field.y);
+  });
+
+  it("shows a short list by the bottom edge whole, slid inside the safe edge", () => {
+    field = { ...field, y: 1300 };
+    const { view, contentHeight } = open({ count: 7, checked: 3 });
+    measureRows(view, 3, contentHeight);
+    const b = border();
+    const top = px(menu()?.style.top);
+    expect(top + b + contentHeight).toBe(screen.height - panelViewportPadding - b);
+    expect(px(menu()?.style.maxHeight)).toBe(contentHeight + 2 * b);
+    expect(byTestId("floating-panel-scroll-up")).toBeNull();
+    expect(byTestId("floating-panel-scroll-down")).toBeNull();
+  });
+
+  it("opens at every list length at regular width, not a sheet or a regular panel", () => {
+    const { view, contentHeight } = open({ count: 20, checked: 10 });
+    measureRows(view, 10, contentHeight);
+    expect(byTestId("floating-panel-sheet")).toBeNull();
+    expect(byTestId("floating-panel-regular")).toBeNull();
+    expect(byTestId("floating-panel-menu-echo")).toBeNull();
+  });
+
+  it("scrolls a list taller than the safe viewport, its clipped edges on the safe edges", () => {
+    const { view, contentHeight } = open({ count: 60, checked: 30 });
+    measureRows(view, 30, contentHeight);
+    const b = border();
+    const fit = expected(30, contentHeight, b);
+    expect(fit.scrollTop).toBeGreaterThan(0);
+    expect(px(menu()?.style.top)).toBe(panelViewportPadding);
+    expect(px(menu()?.style.maxHeight)).toBe(screen.height - 2 * panelViewportPadding);
+    expect(byTestId("floating-panel-scroll-up")).not.toBeNull();
+    expect(byTestId("floating-panel-scroll-down")).not.toBeNull();
+    const checkedTop = fit.top - fit.scrollTop + 30 * rowHeight;
+    expect(checkedTop + rowHeight / 2).toBe(field.y + field.height / 2);
+  });
+
+  it("keeps an arrow only on the side that's clipped", () => {
+    const { view, contentHeight } = open({ count: 60, checked: 1 });
+    measureRows(view, 1, contentHeight);
+    expect(byTestId("floating-panel-scroll-up")).toBeNull();
+    expect(byTestId("floating-panel-scroll-down")).not.toBeNull();
+  });
+
+  it.each([
+    ["top", 20],
+    ["middle", 640],
+    ["bottom", 1290],
+  ])("keeps the checked row inside the panel, clear of its bands, at the %s", (_name, y) => {
+    field = { ...field, y };
+    for (const checked of [0, 1, 29, 58, 59]) {
+      const { view, contentHeight } = open({ count: 60, checked });
+      measureRows(view, checked, contentHeight);
+      const b = border();
+      const fit = expected(checked, contentHeight, b);
+      const rowTop = fit.top - fit.scrollTop + checked * rowHeight;
+      expect(px(menu()?.style.top)).toBe(fit.top - b);
+      expect(rowTop).toBeGreaterThanOrEqual(fit.top);
+      expect(rowTop + rowHeight).toBeLessThanOrEqual(fit.top + fit.height);
+      view.unmount();
+    }
+  });
+
+  it("keeps the sheet for a long list on a phone at page level", () => {
+    screen.width = 390;
+    screen.height = 844;
+    open({ count: 20, checked: 10 });
+    expect(byTestId("floating-panel-sheet")).not.toBeNull();
+    expect(menu()).toBeNull();
+  });
+
+  it("opens a long list as a pop-up on a phone inside an overlay", () => {
+    screen.width = 390;
+    screen.height = 844;
+    field = { ...field, y: 300 };
+    const { view, contentHeight } = open({ count: 20, checked: 10, inOverlay: true });
+    measureRows(view, 10, contentHeight);
+    expect(byTestId("floating-panel-sheet")).toBeNull();
+    expect(byTestId("floating-panel-menu-echo")).toBeNull();
+    const b = border();
+    expect(px(menu()?.style.top)).toBe(expected(10, contentHeight, b).top - b);
+  });
+
+  it("keeps a short list inside an overlay attached beside its field (LC-262)", () => {
+    screen.width = 390;
+    screen.height = 844;
+    open({ count: 4, checked: 1, inOverlay: true });
+    const frame = menu() as HTMLElement;
+    layout(frame, { width: 320, height: 178 });
+    expect(frame.style.opacity).toBe("1");
+    expect(px(frame.style.top)).toBe(field.y + field.height);
+  });
+});

package/src/fields/Select/Select.stories.tsx

@@ -10,6 +10,7 @@ import { Select as TamaguiSelect, Sheet, useMedia, XStack, YStack } from "tamagu
 import { Button } from "../../Button";
 import { useViewportGtSm } from "../../FloatingPanel";
 import { Form } from "../../Form";
+import { formReadableMaxWidth } from "../../formSpacing";
 import { Select, type SelectOption } from "./index";
 
 // tamagui v2 types Select.Content as children + scope + FocusScopeProps only,
@@ -21,6 +22,15 @@ const raiseAbovePortal: Record<string, unknown> = { zIndex: 200000 };
 const meta: Meta<typeof Select> = {
   title: "Forms/Select",
   component: Select,
+  // LC-115 READABLE-FORMS: a field sits in a readable form column, so an open
+  // list on an iPad or a desktop is the column's width, not the screen's.
+  decorators: [
+    (Story) => (
+      <YStack width="100%" maxWidth={formReadableMaxWidth}>
+        <Story />
+      </YStack>
+    ),
+  ],
   parameters: {
     docs: {
       description: {
@@ -613,3 +623,19 @@ export const LowOnPage: StoryObj<{ spaceAbove: number; count: number }> = {
     );
   },
 };
+
+/**
+ * LC-112 (FZ-8655): a field mid-screen. A list taller than the safe viewport
+ * reaches both safe edges and scrolls under its bands, the checked row on the
+ * field.
+ */
+export const MidOnPage: StoryObj<{ spaceAbove: number; count: number }> = {
+  ...LowOnPage,
+  args: { ...LowOnPage.args, spaceAbove: 440 },
+};
+
+/** LC-112 (FZ-8655): a short list by the bottom edge shows whole, slid inside the safe edge. */
+export const ShortLowOnPage: StoryObj<{ spaceAbove: number; count: number }> = {
+  ...LowOnPage,
+  args: { ...LowOnPage.args, count: 7 },
+};