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

Author: ok7sai

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

src/aria/private/grid/grid.ts

@@ -80,8 +80,8 @@ export class GridPattern {
   /** Whether the focus is in the grid. */
   readonly isFocused = signal(false);
 
-  /** Whether the grid has been focused once. */
-  readonly hasBeenFocused = signal(false);
+  /** Whether the grid has received focus once. */
+  readonly hasBeenInteracted = signal(false);
 
   /** Whether the user is currently dragging to select a range of cells. */
   readonly dragging = signal(false);
@@ -252,6 +252,7 @@ export class GridPattern {
   onKeydown(event: KeyboardEvent) {
     if (this.disabled()) return;
 
+    this.hasBeenInteracted.set(true);
     this.activeCell()?.onKeydown(event);
     this.keydown().handle(event);
   }
@@ -260,6 +261,7 @@ export class GridPattern {
   onPointerdown(event: PointerEvent) {
     if (this.disabled()) return;
 
+    this.hasBeenInteracted.set(true);
     this.pointerdown().handle(event);
   }
 
@@ -285,7 +287,7 @@ export class GridPattern {
   /** Handles focusin events on the grid. */
   onFocusIn(event: FocusEvent) {
     this.isFocused.set(true);
-    this.hasBeenFocused.set(true);
+    this.hasBeenInteracted.set(true);
 
     // Skip if in the middle of range selection.
     if (this.dragging()) return;
@@ -328,7 +330,7 @@ export class GridPattern {
 
   /** Sets the default active state of the grid before receiving focus the first time. */
   setDefaultStateEffect(): void {
-    if (this.hasBeenFocused()) return;
+    if (this.hasBeenInteracted()) return;
 
     this.gridBehavior.setDefaultState();
   }

src/aria/private/listbox/listbox.spec.ts

@@ -861,5 +861,42 @@ describe('Listbox Pattern', () => {
       listbox.setDefaultState();
       expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[0]);
     });
+
+    describe('#setDefaultStateEffect', () => {
+      it('should set default state if not interacted', () => {
+        const {listbox, options} = getDefaultPatterns();
+        listbox.inputs.values.set(['Banana']); // Banana is options[2]
+        listbox.setDefaultStateEffect();
+        expect(listbox.inputs.activeItem()).toBe(options[2]); // Should reset to selected Banana
+      });
+
+      it('should NOT set default state if keyboard interacted', () => {
+        const {listbox, options} = getDefaultPatterns();
+        listbox.onKeydown(down()); // Interaction (ArrowDown moves to Apricot, options[1])
+
+        listbox.inputs.values.set(['Banana']); // Banana is options[2]
+        listbox.setDefaultStateEffect();
+        expect(listbox.inputs.activeItem()).toBe(options[1]); // Should stay on Apricot
+      });
+
+      it('should NOT set default state if pointer interacted', () => {
+        const {listbox, options} = getDefaultPatterns();
+        const clickEvent = {target: options[1].element()} as any as PointerEvent;
+        listbox.onPointerdown(clickEvent); // Interaction
+
+        listbox.inputs.values.set(['Banana']); // Banana is options[2]
+        listbox.setDefaultStateEffect();
+        expect(listbox.inputs.activeItem()).toBe(options[1]); // Should stay on Apricot
+      });
+
+      it('should NOT set default state if focus-in interacted', () => {
+        const {listbox, options} = getDefaultPatterns();
+        listbox.onFocusIn(); // Interaction
+
+        listbox.inputs.values.set(['Banana']); // Banana is options[2]
+        listbox.setDefaultStateEffect();
+        expect(listbox.inputs.activeItem()).toBe(options[0]); // Should stay on Apple
+      });
+    });
   });
 });

src/aria/private/listbox/listbox.ts

@@ -24,6 +24,9 @@ export type ListboxInputs<V> = ListInputs<OptionPattern<V>, V> & {
 export class ListboxPattern<V> {
   listBehavior: List<OptionPattern<V>, V>;
 
+  /** Whether the listbox has been interacted with. */
+  readonly hasBeenInteracted = signal(false);
+
   /** Whether the list is vertically or horizontally oriented. */
   orientation: SignalLike<'vertical' | 'horizontal'>;
 
@@ -218,16 +221,22 @@ export class ListboxPattern<V> {
   /** Handles keydown events for the listbox. */
   onKeydown(event: KeyboardEvent) {
     if (!this.disabled()) {
+      this.hasBeenInteracted.set(true);
       this.keydown().handle(event);
     }
   }
 
   onPointerdown(event: PointerEvent) {
     if (!this.disabled()) {
+      this.hasBeenInteracted.set(true);
       this.pointerdown().handle(event);
     }
   }
 
+  onFocusIn() {
+    this.hasBeenInteracted.set(true);
+  }
+
   /**
    * Sets the listbox to it's default initial state.
    *
@@ -258,6 +267,15 @@ export class ListboxPattern<V> {
     }
   }
 
+  /**
+   * Sets the default active state of the listbox before receiving interaction for the first time.
+   */
+  setDefaultStateEffect(): void {
+    if (this.hasBeenInteracted()) return;
+
+    this.setDefaultState();
+  }
+
   protected _getItem(e: PointerEvent) {
     if (!(e.target instanceof HTMLElement)) {
       return;

src/aria/private/menu/menu.spec.ts

@@ -443,6 +443,50 @@ describe('Standalone Menu Pattern', () => {
       expect(submenu.visible()).toBe(false);
     });
   });
+
+  describe('#setDefaultStateEffect', () => {
+    it('should set default state if not interacted', () => {
+      const items = menu.inputs.items() as TestMenuItem[];
+      menu.inputs.activeItem.set(undefined);
+      items[0].inputs.disabled.set(true);
+      items[1].inputs.disabled.set(true);
+      menu.setDefaultStateEffect();
+      expect(menu.inputs.activeItem()?.id()).toBe(items[0].id()); // Should reset to item0 because softDisabled is true
+    });
+
+    it('should NOT set default state if keyboard interacted', () => {
+      const items = menu.inputs.items() as TestMenuItem[];
+      menu.inputs.activeItem.set(undefined);
+      menu.onKeydown(down()); // Interaction (ArrowDown moves to item0)
+
+      items[0].inputs.disabled.set(true);
+      items[1].inputs.disabled.set(true);
+      menu.setDefaultStateEffect();
+      expect(menu.inputs.activeItem()).toBe(items[0]); // Should stay on item0
+    });
+
+    it('should NOT set default state if pointer interacted', () => {
+      const items = menu.inputs.items() as TestMenuItem[];
+      menu.inputs.activeItem.set(undefined);
+      menu.onMouseOver({target: items[0].element()} as unknown as MouseEvent); // Interaction
+
+      items[0].inputs.disabled.set(true);
+      items[1].inputs.disabled.set(true);
+      menu.setDefaultStateEffect();
+      expect(menu.inputs.activeItem()).toBe(items[0]); // Should stay on item0
+    });
+
+    it('should NOT set default state if focus-in occurred', () => {
+      const items = menu.inputs.items() as TestMenuItem[];
+      menu.inputs.activeItem.set(undefined);
+      menu.onFocusIn(); // Interaction
+
+      items[0].inputs.disabled.set(true);
+      items[1].inputs.disabled.set(true);
+      menu.setDefaultStateEffect();
+      expect(menu.inputs.activeItem()).toBeUndefined(); // Should stay undefined
+    });
+  });
 });
 
 describe('Menu Trigger Pattern', () => {
@@ -918,5 +962,38 @@ describe('Menu Bar Pattern', () => {
         expect(menubar.inputs.activeItem()).toBe(menubarItems[0]);
       });
     });
+
+    describe('#setDefaultStateEffect', () => {
+      it('should set default state if not interacted', () => {
+        const items = menubar.inputs.items() as TestMenuItem[];
+        menubar.inputs.activeItem.set(undefined);
+        items[0].inputs.disabled.set(true);
+        items[1].inputs.disabled.set(true);
+        menubar.setDefaultStateEffect();
+        expect(menubar.inputs.activeItem()?.id()).toBe(items[0].id()); // Should reset to item0 because softDisabled is true
+      });
+
+      it('should NOT set default state if keyboard interacted', () => {
+        const items = menubar.inputs.items() as TestMenuItem[];
+        menubar.inputs.activeItem.set(undefined);
+        menubar.onKeydown(down()); // Interaction (ArrowDown moves to item1)
+
+        items[0].inputs.disabled.set(true);
+        items[1].inputs.disabled.set(true);
+        menubar.setDefaultStateEffect();
+        expect(menubar.inputs.activeItem()).toBeUndefined(); // Should stay undefined
+      });
+
+      it('should NOT set default state if focus-in occurred', () => {
+        const items = menubar.inputs.items() as TestMenuItem[];
+        menubar.inputs.activeItem.set(undefined);
+        menubar.onFocusIn(); // Interaction (stays on item0)
+
+        items[0].inputs.disabled.set(true);
+        items[1].inputs.disabled.set(true);
+        menubar.setDefaultStateEffect();
+        expect(menubar.inputs.activeItem()).toBeUndefined(); // Should stay undefined
+      });
+    });
   });
 });