@astryxdesign/core 0.7.0 → 0.7.1-canary.ff40b78

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});
+}