fix(cdk-experimental/listbox): ignore spaces during typeahead

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/list-typeahead/list-typeahead.ts

@@ -37,7 +37,7 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
   navigation: ListNavigation<T>;
 
   /** Keeps track of the characters that typeahead search is being called with. */
-  private _query = signal('');
+  query = signal('');
 
   /** The index where that the typeahead search was initiated from. */
   private _startIndex = signal<number | undefined>(undefined);
@@ -57,15 +57,15 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
     }
 
     clearTimeout(this.timeout);
-    this._query.update(q => q + char.toLowerCase());
+    this.query.update(q => q + char.toLowerCase());
     const item = this._getItem();
 
     if (item) {
       this.navigation.goto(item);
     }
 
     this.timeout = setTimeout(() => {
-      this._query.set('');
+      this.query.set('');
       this._startIndex.set(undefined);
     }, this.inputs.typeaheadDelay() * 1000);
   }
@@ -88,6 +88,6 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
       }
     }
 
-    return focusableItems.find(i => i.searchTerm().toLowerCase().startsWith(this._query()));
+    return focusableItems.find(i => i.searchTerm().toLowerCase().startsWith(this.query()));
   }
 }

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -87,6 +87,9 @@ export class ListboxPattern<V> {
     return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
   });
 
+  /** Represents the space key. Does nothing when the user is actively using typeahead. */
+  spaceKey = computed(() => (this.typeahead.query().length ? '' : ' '));
+
   /** The regexp used to decide if a key should trigger typeahead. */
   typeaheadRegexp = /^.$/; // TODO: Ignore spaces?
 
@@ -114,7 +117,7 @@ export class ListboxPattern<V> {
 
     if (this.inputs.multiselectable()) {
       manager
-        .on(Modifier.Shift, ' ', () => this._updateSelection({selectFromAnchor: true}))
+        .on(Modifier.Shift, this.spaceKey, () => this._updateSelection({selectFromAnchor: true}))
         .on(Modifier.Shift, 'Enter', () => this._updateSelection({selectFromAnchor: true}))
         .on(Modifier.Shift, this.prevKey, () => this.prev({toggle: true}))
         .on(Modifier.Shift, this.nextKey, () => this.next({toggle: true}))
@@ -124,12 +127,12 @@ export class ListboxPattern<V> {
     }
 
     if (!this.followFocus() && this.inputs.multiselectable()) {
-      manager.on(' ', () => this._updateSelection({toggle: true}));
+      manager.on(this.spaceKey, () => this._updateSelection({toggle: true}));
       manager.on('Enter', () => this._updateSelection({toggle: true}));
     }
 
     if (!this.followFocus() && !this.inputs.multiselectable()) {
-      manager.on(' ', () => this._updateSelection({toggleOne: true}));
+      manager.on(this.spaceKey, () => this._updateSelection({toggleOne: true}));
       manager.on('Enter', () => this._updateSelection({toggleOne: true}));
     }