fix(aria/combobox): typeahead in readonly mode

Author: wagnermaciel

src/aria/private/behaviors/list-typeahead/list-typeahead.ts

@@ -85,10 +85,13 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
    */
   private _getItem() {
     let items = this.focusManager.inputs.items();
-    const after = items.slice(this._startIndex()! + 1);
-    const before = items.slice(0, this._startIndex()!);
-    items = after.concat(before);
-    items.push(this.inputs.items()[this._startIndex()!]);
+
+    if (this._startIndex() !== -1) {
+      const after = items.slice(this._startIndex()! + 1);
+      const before = items.slice(0, this._startIndex()!);
+      items = after.concat(before);
+      items.push(this.inputs.items()[this._startIndex()!]);
+    }
 
     const focusableItems = [];
     for (const item of items) {

src/aria/private/combobox/combobox.spec.ts

@@ -613,6 +613,36 @@ describe('Combobox with Listbox Pattern', () => {
       expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[2]);
       expect(listbox.inputs.value()).toEqual(['Banana']);
     });
+
+    it('should navigate on typeahead', () => {
+      const {combobox, listbox} = getPatterns({readonly: true});
+      expect(listbox.inputs.activeItem()).toBe(undefined);
+      combobox.onKeydown(createKeyboardEvent('keydown', 67, 'C'));
+      expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[5]);
+    });
+
+    it('should select on typeahead and filter mode is auto-select', () => {
+      const {combobox, listbox, inputEl} = getPatterns({readonly: true, filterMode: 'auto-select'});
+      combobox.onKeydown(createKeyboardEvent('keydown', 67, 'C'));
+      expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[5]);
+      expect(listbox.inputs.value()).toEqual(['Cantaloupe']);
+      expect(inputEl.value).toBe('');
+    });
+
+    it('should NOT select on typeahead when filter mode is manual', () => {
+      const {combobox, listbox, inputEl} = getPatterns({readonly: true, filterMode: 'manual'});
+      combobox.onKeydown(createKeyboardEvent('keydown', 67, 'C'));
+      expect(listbox.getSelectedItem()).toBe(undefined);
+      expect(listbox.inputs.value()).toEqual([]);
+      expect(inputEl.value).toBe('');
+    });
+
+    it('should expand on typeahead', () => {
+      const {combobox} = getPatterns({readonly: true});
+      expect(combobox.expanded()).toBe(false);
+      combobox.onKeydown(createKeyboardEvent('keydown', 67, 'C'));
+      expect(combobox.expanded()).toBe(true);
+    });
   });
 });
 

src/aria/private/combobox/combobox.ts

@@ -87,6 +87,12 @@ export interface ComboboxListboxControls<T extends ListItem<V>, V> {
 
   /** Sets the value of the combobox based on the selected item. */
   setValue: (value: V | undefined) => void; // For re-setting the value if the popup was destroyed.
+
+  /** Handles typeahead search for the popup. */
+  search: (char: string, opts?: {selectOne?: boolean}) => void;
+
+  /** Whether the user is currently typing for typeahead purposes. */
+  isTyping: SignalLike<boolean>;
 }
 
 export interface ComboboxTreeControls<T extends ListItem<V>, V>
@@ -147,6 +153,12 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
   /** Whether the combobox is read-only. */
   readonly = computed(() => this.inputs.readonly() || null);
 
+  /** Represents the space key. Does nothing when the user is actively using typeahead. */
+  dynamicSpaceKey = computed(() => (this.inputs.popupControls()?.isTyping() ? '' : ' '));
+
+  /** The regexp used to decide if a key should trigger typeahead. */
+  typeaheadRegexp = /^.$/;
+
   /** The keydown event manager for the combobox. */
   keydown = computed(() => {
     if (!this.expanded()) {
@@ -157,8 +169,9 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
 
       if (this.readonly()) {
         manager
+          .on(' ', () => this.open({selected: true}))
           .on('Enter', () => this.open({selected: true}))
-          .on(' ', () => this.open({selected: true}));
+          .on(this.typeaheadRegexp, e => this.search(e.key));
       }
 
       return manager;
@@ -179,7 +192,9 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
       .on('Enter', () => this.select({commit: true, close: true}));
 
     if (this.readonly()) {
-      manager.on(' ', () => this.select({commit: true, close: true}));
+      manager
+        .on(this.typeaheadRegexp, e => this.search(e.key))
+        .on(this.dynamicSpaceKey, () => this.select({commit: true, close: true}));
     }
 
     if (popupControls.role() === 'tree') {
@@ -351,6 +366,16 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
     }
   }
 
+  /** Handles typeahead search for the combobox. */
+  search(char: string) {
+    if (!this.expanded()) {
+      this.open();
+    }
+
+    const selectOne = this.inputs.filterMode() !== 'manual';
+    this.inputs.popupControls()?.search(char, {selectOne});
+  }
+
   /** Highlights the currently selected item in the combobox. */
   highlight() {
     const inputEl = this.inputs.inputEl();

src/aria/private/listbox/combobox-listbox.ts

@@ -87,4 +87,10 @@ export class ComboboxListboxPattern<V>
 
   /** Sets the value of the combobox listbox. */
   setValue = (value: V | undefined) => this.inputs.value.set(value ? [value] : []);
+
+  /** Whether the user is currently typing for typeahead. */
+  isTyping = () => this.listBehavior.isTyping();
+
+  /** Handles typeahead search for the listbox. */
+  search = (char: string, opts?: {selectOne?: boolean}) => this.listBehavior.search(char, opts);
 }

src/aria/private/tree/combobox-tree.ts

@@ -104,4 +104,10 @@ export class ComboboxTreePattern<V>
 
   /** Collapses all of the tree items. */
   collapseAll = () => this.items().forEach(item => item.expansion.close());
+
+  /** Whether the user is currently typing for typeahead. */
+  isTyping = () => this.listBehavior.isTyping();
+
+  /** Handles typeahead search for the tree. */
+  search = (char: string, opts?: {selectOne?: boolean}) => this.listBehavior.search(char, opts);
 }

src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.html

@@ -1,4 +1,4 @@
-<div ngCombobox #combobox="ngCombobox" class="example-combobox-container" [readonly]="true">
+<div ngCombobox #combobox="ngCombobox" class="example-combobox-container" [readonly]="true" filterMode="auto-select">
   <div class="example-combobox-input-container">
     <input
       ngComboboxInput