@astryxdesign/core 0.7.0 → 0.7.1-canary.ff40b78

package/src/ContextMenu/ContextMenu.tsx

@@ -9,7 +9,7 @@
  * @position Core implementation; consumed by index.ts
  *
  * Right-click context menu positioned at the cursor. The cursor point is
- * captured as an offset *inside the trigger* and materialized as a zero-size
+ * captured as an offset *inside the trigger* and materialized as a 1px
  * anchor element, so the menu is positioned relative to the trigger's context
  * (via CSS anchor positioning) rather than the viewport. It therefore follows
  * the content on scroll and auto-flips at viewport edges, while still appearing
@@ -112,14 +112,16 @@ const styles = stylex.create({
     WebkitUserSelect: 'none',
     userSelect: 'none',
   },
-  // Zero-size anchor placed at the cursor point within the trigger. The menu
-  // is anchored to this element, so it sits under the cursor yet is positioned
+  // 1px anchor placed at the cursor point within the trigger. The menu is
+  // anchored to this element, so it sits under the cursor yet is positioned
   // relative to the trigger's context — it follows the content on scroll and
-  // the browser can auto-flip it against the viewport edges.
+  // the browser can auto-flip it against the viewport edges. It owns a box
+  // because WebKit counts an empty anchor box as clipped, and the default
+  // `position-visibility: anchors-visible` then hides the menu.
   cursorAnchor: {
     position: 'absolute',
-    width: 0,
-    height: 0,
+    width: '1px',
+    height: '1px',
     pointerEvents: 'none',
   },
   menu: {
@@ -185,6 +187,17 @@ const styles = stylex.create({
   },
 });
 
+/**
+ * Keeps the 1px cursor anchor inside the trigger along one axis. A point in
+ * the trigger's last pixel (Shift+F10 opens on its bottom edge) steps back by
+ * that pixel: past the edge the anchor would add scrollable overflow, and a
+ * scroller whose edge meets the trigger's would clip it and hide the menu.
+ * Any other point, inside the trigger or not, stays where it is.
+ */
+function keepAnchorInside(offset: number, size: number): number {
+  return offset > size - 1 && offset <= size ? Math.max(size - 1, 0) : offset;
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -324,7 +337,7 @@ export function ContextMenu({
 
   const menuId = useId();
   // Cursor point in the trigger's local coordinate space (offset from the
-  // trigger's top-left, in-flow). Stored here and written to the zero-size
+  // trigger's top-left, in-flow). Stored here and written to the cursor
   // anchor element so the menu is positioned relative to the trigger context
   // — it scrolls with the content instead of sitting at a fixed viewport point.
   const positionRef = useRef({x: 0, y: 0});
@@ -520,18 +533,21 @@ export function ContextMenu({
     [listNavKeyDown, closeMenu, typeahead, ownsEvent],
   );
 
-  // Place the zero-size cursor anchor at a point in the trigger's local
+  // Place the 1px cursor anchor at a point in the trigger's local
   // coordinate space and open the menu. Positioning the anchor inside the
   // trigger (rather than storing viewport coordinates on the menu itself) is
   // what makes the menu context-relative: it scrolls with the content and the
   // browser auto-flips it against the viewport edges via CSS anchor positioning.
   const openAtLocalPoint = useCallback(
     (localX: number, localY: number, focusEl: HTMLElement | null) => {
-      positionRef.current = {x: localX, y: localY};
+      const rect = triggerRef.current?.getBoundingClientRect();
+      const x = rect ? keepAnchorInside(localX, rect.width) : localX;
+      const y = rect ? keepAnchorInside(localY, rect.height) : localY;
+      positionRef.current = {x, y};
       const anchorEl = cursorAnchorRef.current;
       if (anchorEl) {
-        anchorEl.style.left = `${localX}px`;
-        anchorEl.style.top = `${localY}px`;
+        anchorEl.style.left = `${x}px`;
+        anchorEl.style.top = `${y}px`;
       }
       // Remember the element focused before opening so we can restore it on
       // close (Escape or outside-click), instead of dropping focus to <body>.

package/src/ContextMenu/__tests__/ContextMenuCursorAnchor.a11y.browser.spec.ts

@@ -0,0 +1,153 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ContextMenuCursorAnchor.a11y.browser.spec.ts
+ * @input The built "Inside a scroll container" ContextMenu story and real
+ *   Chromium/WebKit layout and paint
+ * @output Browser evidence that the menu paints at its cursor anchor inside a
+ *   scroll container, hides while the container clips that anchor, and that
+ *   the anchor adds no scrollable overflow
+ * @position Cross-browser proof; jsdom has no layout, anchor positioning or
+ *   paint.
+ *
+ * The menu is anchored to a box at the pointer. The initial
+ * `position-visibility: anchors-visible` hides an anchored box whose anchor
+ * is clipped, and WebKit counts an empty anchor box inside a scroll container
+ * as clipped. Whether the menu painted is read from pixels: WebKit still
+ * hit-tests, and reports as visible, a box that rule hides.
+ */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** Mounts the story with the trigger scrolled fully into the box. */
+async function mount(
+  page: Page,
+): Promise<{trigger: Locator; scroller: Locator}> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-contextmenu--in-scroll-container&viewMode=story`,
+  );
+  await holdMotionStill(page);
+  const scroller = page.getByTestId('context-menu-scroller');
+  // The trigger is the box's last child: at the end of the scroll its bottom
+  // edge is the box's bottom edge.
+  await scroller.evaluate(el => {
+    el.scrollTop = el.scrollHeight;
+  });
+  return {trigger: page.getByText('Right-click this area'), scroller};
+}
+
+/** Right-clicks the trigger 40px in and 30px down; returns that point. */
+async function rightClick(
+  page: Page,
+  trigger: Locator,
+): Promise<{x: number; y: number}> {
+  const box = await trigger.boundingBox();
+  const point = {
+    x: Math.round(box?.x ?? 0) + 40,
+    y: Math.round(box?.y ?? 0) + 30,
+  };
+  await page.mouse.click(point.x, point.y, {button: 'right'});
+  return point;
+}
+
+/** Whether the open menu is on screen: hiding it must change the pixels. */
+async function menuPainted(page: Page): Promise<boolean> {
+  const layer = page.locator('[popover]:has(> [role="menu"])');
+  const clip = await layer.boundingBox();
+  if (clip == null) {
+    return false;
+  }
+  const shown = await page.screenshot({clip});
+  await layer.evaluate(el => {
+    el.style.visibility = 'hidden';
+  });
+  const hidden = await page.screenshot({clip});
+  await layer.evaluate(el => {
+    el.style.visibility = '';
+  });
+  return !shown.equals(hidden);
+}
+
+test('a right-click inside a scroll container paints the menu at the pointer', async ({
+  page,
+}) => {
+  const {trigger} = await mount(page);
+  const point = await rightClick(page, trigger);
+  await expect(page.getByRole('menu')).toBeVisible();
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+
+  const anchor = await page
+    .locator('span[aria-hidden="true"][style*="anchor-name"]')
+    .boundingBox();
+  // The anchor owns a box, so WebKit does not count it as clipped.
+  expect(anchor).toMatchObject({width: 1, height: 1});
+  expect(anchor?.x).toBeCloseTo(point.x, 0);
+  expect(anchor?.y).toBeCloseTo(point.y, 0);
+});
+
+test('the menu hides while the box scrolls its anchor out of view, and returns with it', async ({
+  page,
+}) => {
+  const {trigger, scroller} = await mount(page);
+  await rightClick(page, trigger);
+  await expect(page.getByRole('menu')).toBeVisible();
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+
+  await scroller.evaluate(el => {
+    el.scrollTop -= el.clientHeight;
+  });
+  await expect(page.getByRole('menu')).toBeAttached();
+  await expect.poll(async () => menuPainted(page)).toBe(false);
+
+  await scroller.evaluate(el => {
+    el.scrollTop = el.scrollHeight;
+  });
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+});
+
+test('a keyboard open on the bottom edge paints and adds no scrollable overflow', async ({
+  page,
+}) => {
+  const {trigger, scroller} = await mount(page);
+  const scrollHeight = await scroller.evaluate(el => el.scrollHeight);
+  // Several browsers report Shift+F10 as a contextmenu at (0, 0), which
+  // anchors the menu to the trigger's bottom edge, here the box's own edge.
+  await trigger.evaluate(el => {
+    el.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 0,
+        clientY: 0,
+        detail: 0,
+      }),
+    );
+  });
+  await expect(page.getByRole('menu')).toBeVisible();
+  const anchor = await page
+    .locator('span[aria-hidden="true"][style*="anchor-name"]')
+    .boundingBox();
+  const area = await trigger.boundingBox();
+  expect((anchor?.y ?? 0) + (anchor?.height ?? 0)).toBeCloseTo(
+    (area?.y ?? 0) + (area?.height ?? 0),
+    0,
+  );
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+  expect(await scroller.evaluate(el => el.scrollHeight)).toBe(scrollHeight);
+});

package/src/Dialog/Dialog.tsx

@@ -70,38 +70,10 @@ import {DialogContext} from './DialogContext';
 import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
+import {focusForLastInput} from '../utils/focusReturn';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
-/**
- * Move focus programmatically so its ring follows the last input. Dialog does
- * not render the element that opened it or the consumer's autofocus target, so
- * the browser's focus option is the one way to reach them.
- */
-function focusForLastInput(element: HTMLElement): void {
-  // A text-entry field paints its own focus treatment to show where typing
-  // goes, and an extra blur there can run validation or mark it touched.
-  const isTextEntry =
-    element instanceof HTMLInputElement ||
-    element instanceof HTMLTextAreaElement ||
-    element instanceof HTMLSelectElement ||
-    element.isContentEditable;
-  if (isTextEntry || getInteractionModality() !== 'pointer') {
-    element.focus();
-    return;
-  }
-  // Focusing the element that already has focus does nothing, so a ring the
-  // browser already drew would stay. WebKit draws one when showModal() or its
-  // native close moves focus itself, so clear that focus first.
-  if (element.matches(':focus-visible')) {
-    element.blur();
-  }
-  element.focus({focusVisible: false});
-}
-
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When DropdownMenu.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {readFileSync} from 'node:fs';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -3040,6 +3040,102 @@ describe('DropdownMenu focus return after a pointer pick', () => {
       ),
     );
   });
+
+  it("asks the browser for no ring on the design system's Button too", async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+    await user.click(trigger);
+    const focus = vi.spyOn(trigger, 'focus');
+    await user.click(item('Edit'));
+    expect(trigger).toHaveFocus();
+    expect(focus.mock.calls.at(-1)).toEqual([
+      {preventScroll: true, focusVisible: false},
+    ]);
+  });
+
+  describe('a trigger the caller renders', () => {
+    // The style that keeps the ring off the design system's Button cannot
+    // reach a caller's control, so the focus move itself has to: after
+    // pointer input the browser is asked not to match `:focus-visible`, which
+    // it otherwise does on the returned focus (Chromium after a mouse pick,
+    // WebKit after a touch).
+    function renderCustomMenu() {
+      render(
+        <DropdownMenu
+          renderTrigger={props => (
+            <button type="button" {...props}>
+              More
+            </button>
+          )}>
+          <DropdownMenuItem label="Edit" onClick={() => {}} />
+          <DropdownMenuItem label="Delete" onClick={() => {}} />
+        </DropdownMenu>,
+      );
+      return screen.getByRole('button', {name: 'More'});
+    }
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it('returns focus after a pointer pick with the browser asked for no ring', async () => {
+      const user = userEvent.setup();
+      const trigger = renderCustomMenu();
+      await user.click(trigger);
+      const focus = vi.spyOn(trigger, 'focus');
+      await user.click(item('Edit'));
+      expect(trigger).toHaveFocus();
+      expect(focus.mock.calls.at(-1)).toEqual([
+        {preventScroll: true, focusVisible: false},
+      ]);
+    });
+
+    it('returns focus after a keyboard pick with the ring left to the browser', async () => {
+      const user = userEvent.setup();
+      const trigger = renderCustomMenu();
+      trigger.focus();
+      await user.keyboard('{ArrowDown}');
+      await waitFor(() => expect(item('Edit')).toHaveFocus());
+      const focus = vi.spyOn(trigger, 'focus');
+      await user.keyboard('{Enter}');
+      await waitFor(() => expect(trigger).toHaveFocus());
+      expect(focus.mock.calls.at(-1)).toEqual([{preventScroll: true}]);
+    });
+
+    it('clears a ring the browser already drew before refocusing after a pointer pick', async () => {
+      const user = userEvent.setup();
+      const trigger = renderCustomMenu();
+      await user.click(trigger);
+      // WebKit's own popover focus restoration can focus the trigger, with a
+      // ring, before the menu moves focus, and focusing the focused element
+      // changes nothing.
+      const hidePopover = HTMLElement.prototype.hidePopover;
+      HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+        hidePopover.call(this);
+        trigger.focus();
+      });
+      const matches = HTMLElement.prototype.matches;
+      vi.spyOn(HTMLElement.prototype, 'matches').mockImplementation(function (
+        this: HTMLElement,
+        selector: string,
+      ) {
+        return selector === ':focus-visible'
+          ? this === trigger
+          : matches.call(this, selector);
+      });
+      const blur = vi.spyOn(trigger, 'blur');
+      const focus = vi.spyOn(trigger, 'focus');
+      await user.click(item('Edit'));
+      expect(blur).toHaveBeenCalledTimes(1);
+      expect(focus.mock.calls.at(-1)).toEqual([
+        {preventScroll: true, focusVisible: false},
+      ]);
+      expect(blur.mock.invocationCallOrder[0]).toBeLessThan(
+        focus.mock.invocationCallOrder.at(-1) ?? 0,
+      );
+      expect(trigger).toHaveFocus();
+    });
+  });
 });
 
 describe('DropdownMenuItem href', () => {

package/src/DropdownMenu/DropdownMenu.tsx

@@ -68,6 +68,7 @@ import {useMenuPress} from '../hooks/useMenuPress';
 import type {MenuPressPointerType} from '../hooks/menuPressGesture';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
+import {focusForLastInput} from '../utils/focusReturn';
 import {useMenuOverflow} from './useMenuOverflow';
 import {MenuRegionsContext} from './menuRegionsContext';
 import {getFocusableElements} from '../hooks/useFocusTrap';
@@ -932,7 +933,12 @@ function DropdownMenuPopover({
       return;
     }
     prepareFocusReturn();
-    trigger.focus({preventScroll: true});
+    // After pointer input the trigger takes focus without the focus-visible
+    // ring (`component:DropdownMenu/DEC-1`). The style the helper above adds
+    // reaches only the design system's own Button; the browser's focus option
+    // also reaches a control the caller renders, which the browser would
+    // otherwise ring (Chromium after a mouse pick, WebKit after a touch).
+    focusForLastInput(trigger, {preventScroll: true});
   }, [isControlled, onOpenChange, prepareFocusReturn]);
 
   // Defer item focus until the layer has committed open, so focus restore
@@ -1432,8 +1438,9 @@ function DropdownMenuPopover({
     onPointerDown: menuPress.triggerProps.onPointerDown,
     onContextMenu: menuPress.triggerProps.onContextMenu,
     onKeyDown: handleButtonKeyDown,
-    // The popover's focus-return hook is a separate change; until it lands
-    // the control's focus needs no bookkeeping here.
+    // The caller's control paints its own ring, and the menu's focus return
+    // keeps the browser from drawing one after pointer input (see
+    // handleLayerHide), so its focus needs no bookkeeping here.
     onFocus: () => {},
     'aria-haspopup': 'menu',
     'aria-expanded': isOpen,

package/src/DropdownMenu/__tests__/DropdownMenuFocusReturn.a11y.browser.spec.ts

@@ -0,0 +1,73 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DropdownMenuFocusReturn.a11y.browser.spec.ts
+ * @input The `Core/DropdownMenu` CustomTrigger story (an icon button the
+ *   caller renders) in a built Storybook, real Chromium/WebKit pointer and
+ *   keyboard input.
+ * @output Browser evidence that the focus the menu returns to a trigger the
+ *   caller renders follows the last input
+ *   (docs/architecture/interaction-modality.md INV1,
+ *   `component:DropdownMenu/DEC-1`): no ring after a pointer pick, the ring
+ *   after a keyboard pick.
+ * @position Cross-browser proof; jsdom only proves which focus call the menu
+ *   makes. Unless the menu asks for no ring, both engines ring the focus it
+ *   returns after a pointer pick.
+ */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+async function mount(page: Page): Promise<Locator> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-dropdownmenu--custom-trigger&viewMode=story`,
+  );
+  const trigger = page.getByRole('button', {name: 'More actions'});
+  await expect(trigger).toBeVisible();
+  return trigger;
+}
+
+async function matchesFocusVisible(locator: Locator): Promise<boolean> {
+  return locator.evaluate(element => element.matches(':focus-visible'));
+}
+
+test('a pointer pick returns focus to the trigger without a ring', async ({
+  page,
+}) => {
+  const trigger = await mount(page);
+  await trigger.click();
+  const menu = page.getByRole('menu');
+  await expect(menu).toBeVisible();
+  await page.getByRole('menuitem', {name: 'Rename'}).click();
+  await expect(menu).toBeHidden();
+  await expect(trigger).toBeFocused();
+  expect(await matchesFocusVisible(trigger)).toBe(false);
+});
+
+test('a keyboard pick returns focus to the trigger with its ring', async ({
+  page,
+}) => {
+  const trigger = await mount(page);
+  await trigger.focus();
+  await page.keyboard.press('Enter');
+  const menu = page.getByRole('menu');
+  await expect(page.getByRole('menuitem', {name: 'Rename'})).toBeFocused();
+  await page.keyboard.press('Enter');
+  await expect(menu).toBeHidden();
+  await expect(trigger).toBeFocused();
+  expect(await matchesFocusVisible(trigger)).toBe(true);
+});

package/src/PowerSearch/PowerSearch.test.tsx

@@ -733,3 +733,48 @@ describe('field menu grouping', () => {
     });
   });
 });
+
+describe('field menu after the search source changes', () => {
+  it('opens the new field menu on the first click after a config change', async () => {
+    const user = userEvent.setup();
+    // A caller that loads field options asynchronously hands PowerSearch a
+    // new config, which builds a new search source.
+    const loadedConfig: PowerSearchConfig = {
+      ...config,
+      fields: [
+        ...config.fields,
+        {
+          key: 'owner',
+          label: 'Owner',
+          defaultOperator: 'is',
+          operators: [{key: 'is', label: 'is', value: {type: 'string'}}],
+        },
+      ],
+    };
+    const renderSearch = (searchConfig: PowerSearchConfig) => (
+      <>
+        <PowerSearch config={searchConfig} filters={[]} onChange={() => {}} />
+        <button type="button">Sort</button>
+      </>
+    );
+    const {rerender} = render(renderSearch(config));
+    const input = screen.getByRole('combobox');
+
+    await user.click(input);
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+    await user.click(screen.getByRole('button', {name: 'Sort'}));
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+
+    rerender(renderSearch(loadedConfig));
+    await user.click(input);
+
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+      expect(
+        screen.getByRole('option', {name: /Owner/, hidden: true}),
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/Typeahead/BaseTypeahead.test.tsx

@@ -3,7 +3,7 @@
 /**
  * @file BaseTypeahead.test.tsx
  * @input BaseTypeahead public props and a synchronous SearchSource
- * @output Combobox contract tests, including stale source refresh on reopen
+ * @output Combobox contract tests, including stale source refresh on focus and reopen
  * @position Colocated verification for BaseTypeahead
  */
 
@@ -209,6 +209,104 @@ describe('BaseTypeahead', () => {
     expect(input).toHaveFocus();
   });
 
+  it.each([
+    ['a click', 'click'],
+    ['keyboard focus', 'tab'],
+  ] as const)(
+    'bootstraps the replacement source when %s refocuses the input',
+    async (_label, refocus) => {
+      const user = userEvent.setup();
+      const originalSource: SearchSource<SearchableItem> = {
+        search: () => [],
+        bootstrap: () => [resultItem],
+      };
+      const updatedBootstrap = vi.fn(() => [
+        {id: '2', label: 'Updated result'},
+      ]);
+      const updatedSource: SearchSource<SearchableItem> = {
+        search: () => [],
+        bootstrap: updatedBootstrap,
+      };
+      const renderField = (searchSource: SearchSource<SearchableItem>) => (
+        <>
+          <BaseTypeahead
+            searchSource={searchSource}
+            value={null}
+            onChange={() => {}}
+            hasEntriesOnFocus
+          />
+          <button type="button">Sort</button>
+        </>
+      );
+      const {rerender} = render(renderField(originalSource));
+      const input = screen.getByRole('combobox');
+      const sortButton = screen.getByRole('button', {name: 'Sort'});
+
+      await user.click(input);
+      await waitFor(() => {
+        expect(input).toHaveAttribute('aria-expanded', 'true');
+      });
+
+      // Focus moves to another control, which then hands the field a new
+      // source (a sort or filter change rebuilding the caller's source).
+      await user.click(sortButton);
+      expect(input).not.toHaveFocus();
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      rerender(renderField(updatedSource));
+
+      if (refocus === 'click') {
+        await user.click(input);
+      } else {
+        await user.tab({shift: true});
+      }
+      expect(input).toHaveFocus();
+      await waitFor(() => {
+        expect(input).toHaveAttribute('aria-expanded', 'true');
+        expect(
+          screen.getByRole('option', {name: 'Updated result', hidden: true}),
+        ).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByRole('option', {name: 'Result', hidden: true}),
+      ).not.toBeInTheDocument();
+      expect(updatedBootstrap).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it('re-shows cached results without bootstrapping again when the source is unchanged', async () => {
+    const user = userEvent.setup();
+    const bootstrap = vi.fn(() => [resultItem]);
+    const source: SearchSource<SearchableItem> = {search: () => [], bootstrap};
+    render(
+      <>
+        <BaseTypeahead
+          searchSource={source}
+          value={null}
+          onChange={() => {}}
+          hasEntriesOnFocus
+        />
+        <button type="button">Sort</button>
+      </>,
+    );
+    const input = screen.getByRole('combobox');
+
+    await user.click(input);
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+    await user.click(screen.getByRole('button', {name: 'Sort'}));
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(input);
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+    expect(
+      screen.getByRole('option', {name: 'Result', hidden: true}),
+    ).toBeInTheDocument();
+    expect(bootstrap).toHaveBeenCalledTimes(1);
+  });
+
   it('counts grapheme clusters when enforcing minQueryLength', async () => {
     const search = vi.fn(() => [resultItem]);
     render(