@multiplatform.one/forms 7.79.0 → 7.81.0

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.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: {