@multiplatform.one/forms 7.71.0 → 7.72.0

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

@@ -0,0 +1,191 @@
+/**
+ * FZ-8438 (Clay's rv_0ea65e640a0ef261, an iPad Select inside a sheet): the
+ * listbox is `position: fixed`, and inside a transformed sheet it lays out
+ * against that sheet, not the viewport. Its top is offset by the sheet's
+ * origin so the panel still lands on its field.
+ */
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { OverlayStackProvider } from "../../shared/overlayStack";
+import { Select, type SelectOption } from "./index";
+
+const options: SelectOption[] = [
+  { value: "hel", label: "Helsinki" },
+  { value: "fsn", label: "Falkenstein" },
+  { value: "nbg", label: "Nuremberg" },
+];
+
+async function openTop(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+  const dropdown = await result.findByTestId("select-dropdown");
+  await waitFor(() => expect(dropdown.style.top).not.toBe(""));
+  return { dropdown, top: parseFloat(dropdown.style.top) };
+}
+
+describe("Select inside a transformed sheet (FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it("offsets its top by the sheet it lays out against", async () => {
+    const plain = renderWithProviders(<Select options={options} value="hel" />);
+    const { top: viewportTop } = await openTop(plain);
+    plain.unmount();
+
+    const result = renderWithProviders(
+      <div
+        role="dialog"
+        data-testid="sheet"
+        style={{ transform: "translateY(0px)", overflowY: "auto", height: 100 }}
+      >
+        <Select options={options} value="hel" />
+      </div>,
+    );
+    const sheet = result.getByTestId("sheet");
+    sheet.scrollTop = 40;
+    const { dropdown, top } = await openTop(result);
+    expect(sheet.contains(dropdown)).toBe(true);
+    expect(top).toBe(viewportTop + 40);
+  });
+});
+
+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 drop-up (LC-112, FZ-8438 r3)", () => {
+  const field = (top: number) => ({
+    x: 16,
+    y: top,
+    top,
+    left: 16,
+    right: 416,
+    bottom: top + 40,
+    width: 400,
+    height: 40,
+    toJSON: () => ({}),
+  });
+  let fieldTop = 700;
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1024,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      writable: true,
+      value: 768,
+    });
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        if (
+          this.dataset.testid === "select-trigger" ||
+          this.querySelector('[data-testid="select-trigger"]')
+        ) {
+          return field(fieldTop) as DOMRect;
+        }
+        return original.call(this);
+      },
+    );
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.dataset.testid === "select-dropdown" ? 300 : 0;
+      },
+    );
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("a field too low for its list opens upward, its bottom edge on the field's", async () => {
+    fieldTop = 700;
+    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);
+    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("");
+  });
+
+  it("a field with room below keeps the echo on top, opening down", async () => {
+    fieldTop = 120;
+    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("");
+  });
+});
+
+describe("Select beside its field in a sheet (LC-262, FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it("draws no trigger echo row when it opens beside the field", async () => {
+    const result = renderWithProviders(
+      <OverlayStackProvider zIndex={100000}>
+        <Select options={options} value="hel" />
+      </OverlayStackProvider>,
+    );
+    const { dropdown } = await openTop(result);
+    expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(dropdown.textContent?.match(/Helsinki/g)?.length ?? 0).toBe(1);
+  });
+});

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

@@ -496,3 +496,46 @@ export const NativeIos: Story = {
     native: true,
   },
 };
+
+const zoneOptions: SelectOption[] = [
+  { value: "hst", label: "Hawaii" },
+  { value: "akst", label: "Alaska" },
+  { value: "pt", label: "Pacific Time (US and Canada)" },
+  { value: "mt", label: "Mountain Time (US and Canada)" },
+  { value: "ct", label: "Central Time (US and Canada)" },
+  { value: "et", label: "Eastern Time (US and Canada)" },
+  { value: "gmt", label: "London" },
+  { value: "cet", label: "Berlin" },
+  { value: "eet", label: "Helsinki" },
+  { value: "ist", label: "Kolkata" },
+  { value: "jst", label: "Tokyo" },
+  { value: "aest", label: "Sydney" },
+];
+
+/**
+ * LC-112 width setting (FZ-8438 r3): the same field opened four ways. Each
+ * panel's top edge sits on its field; only the width changes.
+ */
+export const PanelWidths: Story = {
+  render: () => (
+    <YStack gap="$4" width={260}>
+      <Select label="Content" options={zoneOptions} defaultValue="pt" panelWidth="content" />
+      <Select label="Trigger" options={zoneOptions} defaultValue="pt" panelWidth="trigger" />
+      <Select label="Screen" options={zoneOptions} defaultValue="pt" panelWidth="screen" />
+      <Select label="Fixed 360" options={zoneOptions} defaultValue="pt" panelWidth={360} />
+    </YStack>
+  ),
+};
+
+/**
+ * Phone width (LC-112, FZ-7830): a long list opens its sheet at page level and
+ * a short one (seven or fewer options) opens as a menu over its field.
+ */
+export const PhoneLists: Story = {
+  render: () => (
+    <YStack gap="$4">
+      <Select label="Time zone" options={zoneOptions} defaultValue="pt" />
+      <Select label="Country" options={countryOptions} defaultValue="us" />
+    </YStack>
+  ),
+};

package/src/fields/Select/index.tsx

@@ -52,6 +52,8 @@ import {
 import { ScrollArrow } from "../../shared/floatingList";
 import {
   FloatingPanel,
+  TriggerEchoRow,
+  placeEchoOverTrigger,
   useFloatingPanel,
   panelViewportPadding,
   useViewportGtSm,
@@ -59,6 +61,7 @@ import {
 import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { fixedContainingBlockOrigin } from "../../FloatingPanel/containingBlock";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
@@ -131,6 +134,12 @@ export interface SelectProps {
    * `multiple` is set, and on Android (the catalog sheet stays). Default false.
    */
   native?: boolean;
+  /**
+   * How wide the open list is (LC-112, FZ-8438 r3): `"content"`, `"trigger"`,
+   * `"screen"` or a fixed width. Unset keeps the default: at least the field's
+   * width on the web, the native pull-down's floor on a phone menu.
+   */
+  panelWidth?: PanelWidth;
 }
 
 // ── Lightweight item row (replaces heavy ListItem-based DropdownItem) ──
@@ -511,6 +520,7 @@ interface FloatingSelectCoreProps {
   selectedOrder?: SelectedOrder;
   dismissible?: boolean;
   native?: boolean;
+  panelWidth?: PanelWidth;
 }
 function FloatingSelectCore({
   options,
@@ -527,6 +537,7 @@ function FloatingSelectCore({
   multiple,
   selectedOrder,
   dismissible,
+  panelWidth,
 }: FloatingSelectCoreProps) {
   const overlayZIndex = useOverlayZIndex("dropdown");
   const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = knobProps.elevatedSurface;
@@ -608,6 +619,10 @@ function FloatingSelectCore({
   const growUpOnlyRef = useRef(false);
   const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
+  // LC-112 drop-up (FZ-8438 r3): a field too low for its list opens upward,
+  // the panel's bottom edge on the field's, the echo its last row.
+  const dropUpRef = useRef(false);
+  const [dropUp, setDropUp] = useState(false);
 
   const repositionRef = useRef<(() => void) | null>(null);
 
@@ -627,7 +642,9 @@ function FloatingSelectCore({
       growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
+      dropUpRef.current = false;
     },
+    panelWidth,
   });
 
   const { scrollRef: dragScrollRef, dragProps } = useDragScroll({
@@ -700,6 +717,10 @@ function FloatingSelectCore({
 
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
+    // The math runs in viewport coordinates; a panel hosted in a transformed
+    // sheet lays out against that sheet, so the written top is offset by it
+    // (FZ-8438: an iPad Select inside a SheetModal opened far below its field).
+    const originTop = fixedContainingBlockOrigin(dropdownElement).top;
     const computedStyle = getComputedStyle(dropdownElement);
     const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
     const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
@@ -707,26 +728,27 @@ function FloatingSelectCore({
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
 
-    // Cover-alignment (OVERLAY_ANCHOR_GAP rule): the panel's border-box top
-    // coincides with the trigger's border-box top EXACTLY, so frame, corner
-    // arc and row text all line up (panel border draws over trigger border;
-    // row content = panel.top + border + offsetTop lands on the trigger's
-    // content edge). Subtracting the border here shifted the whole panel 1px
-    // up and made the corner arcs visibly diverge from the trigger's.
-    let idealTop: number;
-    if (selectedIndex >= 0) {
-      idealTop = triggerBounds.top - selectedItem.offsetTop;
-    } else if (panel.placement.startsWith("top")) {
-      idealTop = triggerBounds.bottom - totalContentHeight;
-    } else {
-      idealTop = triggerBounds.top - (selectedItem.offsetTop ?? 0);
+    // LC-112 seamless cover (FZ-8438): the panel's top edge is the trigger's,
+    // the trigger echoed as its first row, the list below it. A field too low
+    // for its list, with more room above it, opens upward instead: the
+    // panel's bottom edge on the field's bottom edge and the echo its last
+    // row, so the echo still sits on the field (FZ-8438 r3).
+    const firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
+    const roomBelow = viewportHeight - panelViewportPadding - triggerBounds.top;
+    const roomAbove = triggerBounds.bottom - panelViewportPadding;
+    if (firstPlacement) {
+      dropUpRef.current = totalContentHeight > roomBelow && roomAbove > roomBelow;
+      setDropUp(dropUpRef.current);
     }
-    const idealBottom = idealTop + totalContentHeight;
+    const idealTop = dropUpRef.current
+      ? triggerBounds.bottom - totalContentHeight
+      : triggerBounds.top;
+    const idealBottom = dropUpRef.current ? triggerBounds.bottom : idealTop + totalContentHeight;
     const pinnedTop = Math.max(panelViewportPadding, idealTop);
     const pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
     const pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
 
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+    if (firstPlacement) {
       pinnedTopRef.current = pinnedTop;
       pinnedHeightRef.current = pinnedHeight;
     }
@@ -735,7 +757,10 @@ function FloatingSelectCore({
     let height = pinnedHeightRef.current;
 
     if (grownRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
+      // A drop-up keeps its echo on the field: it grows upward only.
+      const canGrowDown = dropUpRef.current
+        ? 0
+        : Math.max(0, viewportHeight - panelViewportPadding - (top + height));
       height += canGrowDown;
       const canGrowUp = Math.max(0, top - panelViewportPadding);
       top -= canGrowUp;
@@ -747,7 +772,7 @@ function FloatingSelectCore({
       top -= canGrowUp;
       height += canGrowUp;
     }
-    if (growDownOnlyRef.current) {
+    if (growDownOnlyRef.current && !dropUpRef.current) {
       const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
       height += canGrowDown;
     }
@@ -773,43 +798,59 @@ function FloatingSelectCore({
 
     if (
       !cachedOverlayStyle ||
-      cachedOverlayStyle.top !== top ||
+      cachedOverlayStyle.top !== top - originTop ||
       cachedOverlayStyle.maxHeight !== height
     ) {
-      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.top = `${top - originTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
-      overlayStyle.current = { top, maxHeight: height };
+      overlayStyle.current = { top: top - originTop, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
 
-    if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
-      const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-      if (selectedIndex >= 0) {
-        // Row-over-trigger: row y (top + border + offsetTop − scroll) must
-        // land on the trigger's content edge (trigger.top + border).
-        const neededScroll = top + selectedItem.offsetTop - triggerBounds.top;
-        const clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
-        if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
+    if (
+      isInitial &&
+      selectedIndex >= 0 &&
+      !grownRef.current &&
+      !growUpOnlyRef.current &&
+      !growDownOnlyRef.current
+    ) {
+      // The selected row starts in view, just under the sticky echo row (or
+      // just above it in a drop-up, where the echo is the last row).
+      const echoHeight = triggerBounds.height;
+      const rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
+      if (dropUpRef.current) {
+        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+        const wanted = rowBottom - (dropdownElement.clientHeight - echoHeight);
+        if (wanted > 0) {
           programmaticScrollRef.current++;
-          dropdownElement.scrollTop = clampedScrollTop;
-        }
-        if (Math.abs(neededScroll - clampedScrollTop) > 0.5) {
-          const scrollDeficit = neededScroll - clampedScrollTop;
-          top -= scrollDeficit;
-          top = Math.max(panelViewportPadding, top);
-          const remainingContentHeight = totalContentHeight - clampedScrollTop;
-          const adjustedMaxHeight = Math.min(
-            remainingContentHeight,
-            viewportHeight - top - panelViewportPadding,
-          );
-          dropdownElement.style.top = `${top}px`;
-          dropdownElement.style.maxHeight = `${adjustedMaxHeight}px`;
-          overlayStyle.current = { top, maxHeight: adjustedMaxHeight };
+          dropdownElement.scrollTop = Math.min(wanted, maxScrollTop);
         }
+      } else if (rowBottom > dropdownElement.clientHeight) {
+        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+        programmaticScrollRef.current++;
+        dropdownElement.scrollTop = Math.max(
+          0,
+          Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop),
+        );
       }
     }
 
+    // A screen-wide or fixed-width list slides inside the margins; its echo
+    // stays on the field (LC-112 r3). The scale origin is the left edge, so
+    // the client rect's left is the layout left.
+    placeEchoOverTrigger(
+      dropdownElement,
+      {
+        triggerLeft: triggerBounds.left,
+        triggerRight: triggerBounds.right,
+        panelLeft: dropdownElement.getBoundingClientRect().left,
+        panelWidth: dropdownElement.offsetWidth,
+        rtl: getComputedStyle(trigger).direction === "rtl",
+      },
+      { stretch: panelWidth !== undefined },
+    );
+
     panel.initializingRef.current = false;
 
     void dropdownElement.offsetHeight;
@@ -837,7 +878,7 @@ function FloatingSelectCore({
   useLayoutEffect(() => {
     if (!open || !panel.mounted) return;
     repositionOverlay();
-  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.y]);
+  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.x, panel.y]);
 
   const onMatch = useCallback(
     (index: number) => {
@@ -1163,7 +1204,8 @@ function FloatingSelectCore({
                   opacity: panel.visible ? 1 : 0,
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
                   transition: panel.panelTransition,
-                  transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+                  transformOrigin:
+                    dropUp || panel.placement.startsWith("top") ? "bottom left" : "top left",
                   ...dragProps.style,
                 },
                 onPointerDown: dragProps.onPointerDown,
@@ -1204,12 +1246,27 @@ function FloatingSelectCore({
               borderRadius={panel.dropdownRadius}
               data-testid="select-dropdown"
               paddingVertical={0}
+              paddingBottom={panel.coverCornerInset || 0}
             >
+              {!beside && (
+                <TriggerEchoRow
+                  sourceRef={panel.triggerRef}
+                  source={selectedOption?.label ?? placeholder}
+                  onPress={() => setOpen(false)}
+                  presentational
+                  edge={dropUp ? "bottom" : "top"}
+                />
+              )}
               <ScrollArrow
                 direction="up"
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowUp}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
+                topOffset={
+                  dropUp || beside
+                    ? 0
+                    : (panel.triggerRef.current?.getBoundingClientRect().height ?? 0)
+                }
               />
               {groupLabel && (
                 <GroupHeader color={textColor} paddingHorizontal={knobProps.panelPadding.padding}>
@@ -1260,6 +1317,9 @@ function FloatingSelectCore({
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowDown}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
+                bottomOffset={
+                  dropUp ? (panel.triggerRef.current?.getBoundingClientRect().height ?? 0) : 0
+                }
               />
             </YStack>
           </FloatingFocusManager>
@@ -1287,6 +1347,7 @@ function NativeSelectCore({
   selectedOrder,
   dismissible,
   native,
+  panelWidth,
 }: FloatingSelectCoreProps) {
   const insideOverlay = useInsideOverlay();
   const compactFace = pickerCompactFace(options.length);
@@ -1591,6 +1652,7 @@ function NativeSelectCore({
       // A short list opens as a menu over its trigger; a long one keeps its
       // sheet at page level and opens as a menu inside another overlay (FZ-7830).
       compactFace={compactFace}
+      panelWidth={panelWidth}
       {...(asMenu && insideOverlay && opensBesideTrigger(options.length)
         ? { anchorMode: "attach" as const, triggerEcho: false }
         : null)}
@@ -1740,6 +1802,7 @@ export function Select({
   dismissible,
   skeleton,
   native,
+  panelWidth,
   "aria-label": ariaLabel,
   ...rest
 }: SelectProps) {
@@ -1781,7 +1844,7 @@ export function Select({
     !inline &&
     !inTableCell &&
     Boolean(rowLabel) &&
-    shouldPushChoices({ inSheet: Boolean(sheetNavigation), multiple, options });
+    shouldPushChoices({ inSheet: Boolean(sheetNavigation), multiple, options, panelWidth });
   // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup,
   // which the inline face already is.
   if (!inline) {
@@ -1920,6 +1983,7 @@ export function Select({
         selectedOrder={selectedOrder}
         dismissible={dismissible}
         native={native}
+        panelWidth={panelWidth}
       />
     );
   };

package/src/fields/Select/shouldInlineChoices.spec.ts

@@ -37,6 +37,19 @@ describe("shouldPushChoices and opensBesideTrigger (LC-262, FZ-7830 round 3)", (
     expect(shouldPushChoices({ inSheet: true, multiple: true, options: withIcons(8) })).toBe(false);
   });
 
+  it("never pushes a list whose panel width is trigger or screen: it covers its trigger (FZ-8438)", () => {
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: "trigger" })).toBe(
+      false,
+    );
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: "screen" })).toBe(
+      false,
+    );
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: "content" })).toBe(
+      true,
+    );
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: 300 })).toBe(true);
+  });
+
   it("opens a list of five or fewer beside its field", () => {
     expect(opensBesideTrigger(5)).toBe(true);
     expect(opensBesideTrigger(6)).toBe(false);

package/src/fields/Select/shouldInlineChoices.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 
 /** The most options a Select inside a sheet lays out inline (LC-262). */
 export const INLINE_CHOICES_MAX = 5;
@@ -25,17 +26,22 @@ export function shouldInlineChoices({
  * A single-choice Select inside a sheet with more options than the inline
  * list holds pushes its checkmark list onto the sheet's navigation stack from
  * a Settings row (LC-262, FZ-7830 round 3), instead of a menu over the field.
+ * An explicit `"trigger"` or `"screen"` panel width asks for a cover over the
+ * trigger (LC-112, FZ-8438 r3), so that Select is never pushed.
  */
 export function shouldPushChoices({
   inSheet,
   multiple,
   options,
+  panelWidth,
 }: {
   inSheet: boolean;
   multiple?: boolean;
   options: ReadonlyArray<unknown> | undefined;
+  panelWidth?: PanelWidth;
 }): boolean {
   if (!inSheet || multiple || !options?.length) return false;
+  if (panelWidth === "trigger" || panelWidth === "screen") return false;
   return options.length > INLINE_CHOICES_MAX;
 }