@astryxdesign/core 0.7.0 → 0.7.1-canary.7e441be

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(

package/src/Typeahead/BaseTypeahead.tsx

@@ -5,7 +5,7 @@
 /**
  * @file BaseTypeahead.tsx
  * @input Uses React, StyleX, usePopover, TypeaheadItem
- * @output Exports BaseTypeahead with focused-input menu reactivation
+ * @output Exports BaseTypeahead; focus bootstraps a replaced search source
  * @position Core implementation; used by Typeahead and Tokenizer
  *
  * Pure combobox engine: input, search, keyboard navigation, dropdown.
@@ -610,6 +610,10 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   // in the closure are stale (a selection cleared them) and shouldn't
   // be re-shown.
   const resultsGenRef = useRef(0);
+  // The generation at which the current searchSource took over. Results
+  // populated before it (resultsGenRef below this) came from a replaced
+  // source: they can never be re-shown, so focus bootstraps the new source.
+  const sourceGenRef = useRef(0);
 
   // Results still arriving from a replaced source must not land in the new
   // one's menu.
@@ -617,7 +621,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   if (prevSearchSourceRef.current !== searchSource) {
     prevSearchSourceRef.current.cancel?.();
     prevSearchSourceRef.current = searchSource;
-    searchGenRef.current++;
+    sourceGenRef.current = ++searchGenRef.current;
   }
 
   // Layer for dropdown
@@ -889,11 +893,21 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   // Shared by handleFocus and handleClick: bootstrap entries if none are
   // loaded yet, or re-show cached results that haven't been invalidated by
   // a selection since (comparing the two generation refs catches that).
+  // Results cached from a replaced search source count as none, so focusing
+  // an empty field bootstraps the new source instead of opening nothing.
+  // Results a selection invalidated still keep the menu closed when the
+  // selection returns focus to the input.
   const openIfEligible = useCallback(() => {
     if (isDisabled) {
       return;
     }
-    if (hasEntriesOnFocus && results.length === 0 && query.length === 0) {
+    const hasResultsFromCurrentSource =
+      results.length > 0 && resultsGenRef.current >= sourceGenRef.current;
+    if (
+      hasEntriesOnFocus &&
+      !hasResultsFromCurrentSource &&
+      query.length === 0
+    ) {
       void performBootstrap();
     } else if (
       results.length > 0 &&

package/src/utils/focusReturn.test.ts

@@ -1,7 +1,11 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect, afterEach} from 'vitest';
-import {isFocusDetached} from './focusReturn';
+import {describe, it, expect, afterEach, beforeEach, vi} from 'vitest';
+import {focusForLastInput, isFocusDetached} from './focusReturn';
+import {
+  __resetInteractionModalityForTest,
+  __startInteractionModalityTrackingForTest,
+} from './interactionModality';
 
 describe('isFocusDetached', () => {
   afterEach(() => {
@@ -40,3 +44,76 @@ describe('isFocusDetached', () => {
     expect(isFocusDetached(doc)).toBe(true);
   });
 });
+
+describe('focusForLastInput', () => {
+  beforeEach(() => {
+    __startInteractionModalityTrackingForTest();
+    __resetInteractionModalityForTest();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  function button(): HTMLButtonElement {
+    const element = document.createElement('button');
+    document.body.appendChild(element);
+    return element;
+  }
+
+  it('leaves the ring to the browser after keyboard input, passing the options through', () => {
+    const element = button();
+    const focus = vi.spyOn(element, 'focus');
+    focusForLastInput(element);
+    focusForLastInput(element, {preventScroll: true});
+    expect(focus.mock.calls).toEqual([[], [{preventScroll: true}]]);
+  });
+
+  it('asks the browser for no ring after pointer input, keeping the options', () => {
+    const element = button();
+    document.dispatchEvent(new Event('pointerdown'));
+    const focus = vi.spyOn(element, 'focus');
+    focusForLastInput(element);
+    focusForLastInput(element, {preventScroll: true});
+    expect(focus.mock.calls).toEqual([
+      [{focusVisible: false}],
+      [{preventScroll: true, focusVisible: false}],
+    ]);
+  });
+
+  it('keeps plain focus on a text field after pointer input', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    document.dispatchEvent(new Event('pointerdown'));
+    const focus = vi.spyOn(input, 'focus');
+    focusForLastInput(input, {preventScroll: true});
+    expect(focus.mock.calls).toEqual([[{preventScroll: true}]]);
+  });
+
+  it('clears a ring the browser already drew before refocusing after pointer input', () => {
+    const element = button();
+    element.focus();
+    document.dispatchEvent(new Event('pointerdown'));
+    const matches = HTMLElement.prototype.matches;
+    vi.spyOn(HTMLElement.prototype, 'matches').mockImplementation(function (
+      this: HTMLElement,
+      selector: string,
+    ) {
+      return selector === ':focus-visible'
+        ? this === element
+        : matches.call(this, selector);
+    });
+    const blur = vi.spyOn(element, 'blur');
+    const focus = vi.spyOn(element, 'focus');
+    focusForLastInput(element, {preventScroll: true});
+    expect(blur).toHaveBeenCalledTimes(1);
+    expect(focus.mock.calls).toEqual([
+      [{preventScroll: true, focusVisible: false}],
+    ]);
+    expect(blur.mock.invocationCallOrder[0]).toBeLessThan(
+      focus.mock.invocationCallOrder[0] ?? 0,
+    );
+    expect(document.activeElement).toBe(element);
+  });
+});

package/src/utils/focusReturn.ts

@@ -2,13 +2,18 @@
 
 /**
  * @file focusReturn.ts
- * @input The document's current active element.
- * @output Whether focus is currently "detached" — on nothing in particular.
+ * @input The document's current active element and the shared interaction
+ *   modality.
+ * @output Whether focus is currently "detached" — on nothing in particular —
+ *   and a focus move whose ring follows the last input.
  * @position Utility; used by overlay triggers (e.g. DateInput, DateTimeInput)
  *   that return focus to their control when the overlay closes, but only when
- *   the dismiss did not already move focus somewhere the user chose.
+ *   the dismiss did not already move focus somewhere the user chose, and by
+ *   overlays (Dialog, DropdownMenu) that move focus programmatically.
  */
 
+import {getInteractionModality} from './interactionModality';
+
 /**
  * True when focus rests on nothing in particular — no active element, or the
  * document body / root element.
@@ -29,3 +34,43 @@ export function isFocusDetached(doc: Document = document): boolean {
     active == null || active === doc.body || active === doc.documentElement
   );
 }
+
+/**
+ * Move focus programmatically so its ring follows the last input
+ * (`architecture:interaction-modality` INV1). After pointer input the browser's
+ * focus option keeps the element from matching `:focus-visible`, which is the
+ * one way to reach an element the overlay does not render: the consumer's
+ * autofocus target, the control that opened a Dialog, or a menu trigger the
+ * caller renders. Pass `options` (for example `preventScroll`) as to `focus()`.
+ *
+ * Make sure modality tracking is active (`useInteractionModalityTracking()`)
+ * in the component that calls this.
+ */
+export function focusForLastInput(
+  element: HTMLElement,
+  options?: FocusOptions,
+): 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') {
+    if (options === undefined) {
+      element.focus();
+    } else {
+      element.focus(options);
+    }
+    return;
+  }
+  // Focusing the element that already has focus does nothing, so a ring the
+  // browser already drew would stay. WebKit draws one when its own focus
+  // restoration (a dialog's close, a popover's hide) moves focus itself, so
+  // clear that focus first.
+  if (element.matches(':focus-visible')) {
+    element.blur();
+  }
+  element.focus({...options, focusVisible: false});
+}