refactor(multiple): stabilize default state upon any type of interaction

Author: ok7sai

goldens/aria/listbox/index.api.md

@@ -17,8 +17,6 @@ export class Listbox<V> {
     readonly id: _angular_core.InputSignal<string>;
     protected items: _angular_core.Signal<OptionPattern<V>[]>;
     multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    // (undocumented)
-    _onFocus(): void;
     orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: ListboxPattern<V>;
     readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;

goldens/aria/private/index.api.md

@@ -174,7 +174,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
     expandKey: SignalLike<"ArrowLeft" | "ArrowRight">;
     first(): void;
     firstMatch: SignalLike<T | undefined>;
-    hasBeenFocused: WritableSignalLike<boolean>;
+    hasBeenInteracted: WritableSignalLike<boolean>;
     hasPopup: SignalLike<"listbox" | "tree" | "grid" | "dialog" | null>;
     highlight(): void;
     highlightedItem: WritableSignalLike<T | undefined>;
@@ -398,7 +398,7 @@ export class GridPattern {
     readonly dragging: WritableSignalLike<boolean>;
     focusEffect(): void;
     readonly gridBehavior: Grid<GridCellPattern>;
-    readonly hasBeenFocused: WritableSignalLike<boolean>;
+    readonly hasBeenInteracted: WritableSignalLike<boolean>;
     // (undocumented)
     readonly inputs: GridInputs;
     readonly isFocused: WritableSignalLike<boolean>;
@@ -455,13 +455,16 @@ export class ListboxPattern<V> {
     followFocus: SignalLike<boolean>;
     // (undocumented)
     protected _getItem(e: PointerEvent): OptionPattern<V> | undefined;
+    readonly hasBeenInteracted: WritableSignalLike<boolean>;
     // (undocumented)
     readonly inputs: ListboxInputs<V>;
     keydown: SignalLike<KeyboardEventManager<KeyboardEvent>>;
     // (undocumented)
     listBehavior: List<OptionPattern<V>, V>;
     multi: SignalLike<boolean>;
     nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
+    // (undocumented)
+    onFocusIn(): void;
     onKeydown(event: KeyboardEvent): void;
     // (undocumented)
     onPointerdown(event: PointerEvent): void;
@@ -470,6 +473,7 @@ export class ListboxPattern<V> {
     prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
     readonly: SignalLike<boolean>;
     setDefaultState(): void;
+    setDefaultStateEffect(): void;
     setsize: SignalLike<number>;
     tabIndex: SignalLike<-1 | 0>;
     typeaheadRegexp: RegExp;
@@ -493,7 +497,7 @@ export class MenuBarPattern<V> {
     goto(item: MenuItemPattern<V>, opts?: {
         focusElement?: boolean;
     }): void;
-    hasBeenFocused: WritableSignalLike<boolean>;
+    hasBeenInteracted: WritableSignalLike<boolean>;
     // (undocumented)
     readonly inputs: MenuBarInputs<V>;
     isFocused: WritableSignalLike<boolean>;
@@ -507,6 +511,7 @@ export class MenuBarPattern<V> {
     onMouseOver(event: MouseEvent): void;
     prev(): void;
     setDefaultState(): void;
+    setDefaultStateEffect(): void;
     tabIndex: () => 0 | -1;
     typeaheadRegexp: RegExp;
 }
@@ -539,7 +544,7 @@ export class MenuItemPattern<V> implements ListItem<V> {
     element: SignalLike<HTMLElement | undefined>;
     expanded: SignalLike<boolean | null>;
     _expanded: WritableSignalLike<boolean>;
-    hasBeenFocused: WritableSignalLike<boolean>;
+    hasBeenInteracted: WritableSignalLike<boolean>;
     hasPopup: SignalLike<boolean>;
     id: SignalLike<string>;
     index: SignalLike<number>;
@@ -572,8 +577,8 @@ export class MenuPattern<V> {
     dynamicSpaceKey: SignalLike<"" | " ">;
     expand(): void;
     first(): void;
-    hasBeenFocused: WritableSignalLike<boolean>;
     hasBeenHovered: WritableSignalLike<boolean>;
+    hasBeenInteracted: WritableSignalLike<boolean>;
     id: SignalLike<string>;
     // (undocumented)
     readonly inputs: MenuInputs<V>;
@@ -593,6 +598,7 @@ export class MenuPattern<V> {
     role: () => string;
     root: SignalLike<MenuTriggerPattern<V> | MenuBarPattern<V> | MenuPattern<V> | undefined>;
     setDefaultState(): void;
+    setDefaultStateEffect(): void;
     shouldFocus: SignalLike<boolean>;
     submit(item?: MenuItemPattern<V> | undefined): void;
     tabIndex: () => 0 | -1;
@@ -617,7 +623,7 @@ export class MenuTriggerPattern<V> {
     }): void;
     disabled: () => boolean;
     expanded: WritableSignalLike<boolean>;
-    hasBeenFocused: WritableSignalLike<boolean>;
+    hasBeenInteracted: WritableSignalLike<boolean>;
     hasPopup: () => boolean;
     // (undocumented)
     readonly inputs: MenuTriggerInputs<V>;
@@ -684,11 +690,13 @@ export class TabListPattern {
     readonly expansionBehavior: ListExpansion;
     readonly focusBehavior: ListFocus<TabPattern>;
     readonly followFocus: SignalLike<boolean>;
+    readonly hasBeenInteracted: WritableSignalLike<boolean>;
     // (undocumented)
     readonly inputs: TabListInputs;
     readonly keydown: SignalLike<KeyboardEventManager<KeyboardEvent>>;
     readonly navigationBehavior: ListNavigation<TabPattern>;
     readonly nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
+    onFocusIn(): void;
     onKeydown(event: KeyboardEvent): void;
     onPointerdown(event: PointerEvent): void;
     open(value: string): boolean;
@@ -698,6 +706,7 @@ export class TabListPattern {
     readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
     readonly selectedTab: WritableSignalLike<TabPattern | undefined>;
     setDefaultState(): void;
+    setDefaultStateEffect(): void;
     readonly tabIndex: SignalLike<0 | -1>;
 }
 
@@ -751,17 +760,21 @@ export class ToolbarPattern<V> {
     readonly activeDescendant: SignalLike<string | undefined>;
     readonly activeItem: () => ToolbarWidgetPattern<V> | undefined;
     readonly disabled: SignalLike<boolean>;
+    readonly hasBeenInteracted: WritableSignalLike<boolean>;
     // (undocumented)
     readonly inputs: ToolbarInputs<V>;
     readonly listBehavior: List<ToolbarWidgetPattern<V>, V>;
     onClick(event: MouseEvent): void;
+    // (undocumented)
+    onFocusIn(): void;
     onKeydown(event: KeyboardEvent): void;
     // (undocumented)
     onPointerdown(event: PointerEvent): void;
     readonly orientation: SignalLike<'vertical' | 'horizontal'>;
     // (undocumented)
     select(): void;
     setDefaultState(): void;
+    setDefaultStateEffect(): void;
     readonly softDisabled: SignalLike<boolean>;
     readonly tabIndex: SignalLike<0 | -1>;
 }
@@ -878,6 +891,7 @@ export class TreePattern<V> implements TreeInputs<V> {
     readonly followFocus: SignalLike<boolean>;
     protected _getItem(event: Event): TreeItemPattern<V> | undefined;
     goto(e: PointerEvent, opts?: SelectOptions): void;
+    readonly hasBeenInteracted: WritableSignalLike<boolean>;
     readonly id: SignalLike<string>;
     // (undocumented)
     readonly inputs: TreeInputs<V>;
@@ -888,13 +902,15 @@ export class TreePattern<V> implements TreeInputs<V> {
     readonly multi: SignalLike<boolean>;
     readonly nav: SignalLike<boolean>;
     readonly nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
+    onFocusIn(): void;
     onKeydown(event: KeyboardEvent): void;
     onPointerdown(event: PointerEvent): void;
     readonly orientation: SignalLike<'vertical' | 'horizontal'>;
     pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
     readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
     readonly selectionMode: SignalLike<'follow' | 'explicit'>;
     setDefaultState(): void;
+    setDefaultStateEffect(): void;
     readonly softDisabled: SignalLike<boolean>;
     readonly tabIndex: SignalLike<-1 | 0>;
     readonly textDirection: SignalLike<'ltr' | 'rtl'>;

goldens/aria/tabs/index.api.md

@@ -47,8 +47,6 @@ export class TabList implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
-    // (undocumented)
-    _onFocus(): void;
     open(value: string): boolean;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TabListPattern;

goldens/aria/toolbar/index.api.md

@@ -15,8 +15,6 @@ export class Toolbar<V> {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly _itemPatterns: _angular_core.Signal<ToolbarWidgetPattern<V>[]>;
-    // (undocumented)
-    _onFocus(): void;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: ToolbarPattern<V>;
     // (undocumented)

goldens/aria/tree/index.api.md

@@ -20,8 +20,6 @@ export class Tree<V> {
     readonly id: _angular_core.InputSignal<string>;
     readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly nav: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    // (undocumented)
-    _onFocus(): void;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TreePattern<V>;
     // (undocumented)

src/aria/listbox/listbox.ts

@@ -64,7 +64,7 @@ import {LISTBOX} from './tokens';
     '[attr.aria-activedescendant]': '_pattern.activeDescendant()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(pointerdown)': '_pattern.onPointerdown($event)',
-    '(focusin)': '_onFocus()',
+    '(focusin)': '_pattern.onFocusIn()',
   },
   hostDirectives: [ComboboxPopup],
   providers: [{provide: LISTBOX, useExisting: Listbox}],
@@ -139,9 +139,6 @@ export class Listbox<V> {
   /** The Listbox UIPattern. */
   readonly _pattern: ListboxPattern<V>;
 
-  /** Whether the listbox has received focus yet. */
-  private _hasFocused = signal(false);
-
   constructor() {
     const inputs = {
       ...this,
@@ -171,9 +168,7 @@ export class Listbox<V> {
     });
 
     afterRenderEffect(() => {
-      if (!this._hasFocused()) {
-        this._pattern.setDefaultState();
-      }
+      this._pattern.setDefaultStateEffect();
     });
 
     // Ensure that if the active item is removed from
@@ -198,10 +193,6 @@ export class Listbox<V> {
     });
   }
 
-  _onFocus() {
-    this._hasFocused.set(true);
-  }
-
   scrollActiveItemIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {
     this._pattern.inputs.activeItem()?.element()?.scrollIntoView(options);
   }

src/aria/menu/menu-bar.ts

@@ -128,9 +128,7 @@ export class MenuBar<V> {
     });
 
     afterRenderEffect(() => {
-      if (!this._pattern.hasBeenFocused()) {
-        this._pattern.setDefaultState();
-      }
+      this._pattern.setDefaultStateEffect();
     });
   }
 

src/aria/menu/menu.ts

@@ -160,7 +160,7 @@ export class Menu<V> {
         this._deferredContentAware?.contentVisible.set(true);
       } else {
         this._deferredContentAware?.contentVisible.set(
-          this._pattern.visible() || !!this.parent()?._pattern.hasBeenFocused(),
+          this._pattern.visible() || !!this.parent()?._pattern.hasBeenInteracted(),
         );
       }
     });
@@ -177,13 +177,7 @@ export class Menu<V> {
     });
 
     afterRenderEffect(() => {
-      if (
-        !this._pattern.hasBeenFocused() &&
-        !this._pattern.hasBeenHovered() &&
-        this._items().length
-      ) {
-        untracked(() => this._pattern.setDefaultState());
-      }
+      this._pattern.setDefaultStateEffect();
     });
   }
 

src/aria/private/combobox/combobox.ts

@@ -166,7 +166,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
   isFocused = signal(false);
 
   /** Whether the combobox has ever been focused. */
-  hasBeenFocused = signal(false);
+  hasBeenInteracted = signal(false);
 
   /** The key used to navigate to the previous item in the list. */
   expandKey = computed(() => (this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight'));
@@ -367,13 +367,13 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
 
   /** Handles focus in events for the combobox. */
   onFocusIn() {
-    if (this.inputs.alwaysExpanded() && !this.hasBeenFocused()) {
+    if (this.inputs.alwaysExpanded() && !this.hasBeenInteracted()) {
       const firstSelectedItem = this.listControls()?.getSelectedItems()[0];
       firstSelectedItem ? this.listControls()?.focus(firstSelectedItem) : this.first();
     }
 
     this.isFocused.set(true);
-    this.hasBeenFocused.set(true);
+    this.hasBeenInteracted.set(true);
   }
 
   /** Handles focus out events for the combobox. */

src/aria/private/grid/grid.spec.ts

@@ -861,4 +861,53 @@ describe('Grid', () => {
       });
     });
   });
+
+  describe('#setDefaultStateEffect', () => {
+    it('should set default state if not interacted', () => {
+      const gridInputs = getDefaultGridInputs();
+      const data = [{cells: [{}, {}]}, {cells: [{}, {}]}];
+      const {grid} = createGrid(data, gridInputs);
+      const cells = grid.cells();
+      cells[0][1].inputs.selected.set(true); // default state will pick this since it's selected
+      grid.setDefaultStateEffect();
+      expect(grid.gridBehavior.focusBehavior.activeCell()).toBe(cells[0][1]); // Should set to selected cell
+    });
+
+    it('should NOT set default state if keyboard interacted', () => {
+      const gridInputs = getDefaultGridInputs();
+      const data = [{cells: [{}, {}]}, {cells: [{}, {}]}];
+      const {grid} = createGrid(data, gridInputs);
+      grid.onKeydown(down()); // Interaction
+
+      const cells = grid.cells();
+      cells[0][1].inputs.selected.set(true);
+      grid.setDefaultStateEffect();
+      expect(grid.gridBehavior.focusBehavior.activeCell()).toBeUndefined(); // Should stay undefined, meaning default state was skipped
+    });
+
+    it('should NOT set default state if pointer interacted', () => {
+      const gridInputs = getDefaultGridInputs();
+      const data = [{cells: [{}, {}]}, {cells: [{}, {}]}];
+      const {grid} = createGrid(data, gridInputs);
+      const cells = grid.cells();
+      grid.onPointerdown({target: cells[0][0].element()} as unknown as PointerEvent); // Interaction
+
+      cells[0][1].inputs.selected.set(true);
+      grid.setDefaultStateEffect();
+      expect(grid.gridBehavior.focusBehavior.activeCell()).toBe(cells[0][0]); // Should stay on interacted cell
+    });
+
+    it('should NOT set default state if focus-in occurred', () => {
+      const gridInputs = getDefaultGridInputs();
+      const data = [{cells: [{}, {}]}, {cells: [{}, {}]}];
+      const {grid} = createGrid(data, gridInputs);
+
+      grid.onFocusIn({} as FocusEvent); // Interaction
+
+      const cells = grid.cells();
+      cells[0][1].inputs.selected.set(true);
+      grid.setDefaultStateEffect();
+      expect(grid.gridBehavior.focusBehavior.activeCell()).toBeUndefined(); // Should stay undefined due to early return
+    });
+  });
 });