fix(select): don't handle open key presses while the user is typing (#17785)

We support typing into a select to skip to an item, as well as pressing space to open the select, however if the user is typing something that has a space in it, the select will open and interrupt the user. These changes add some logic so that we don't trigger the panel while the user is typing.

Fixes #17774.

Author: crisbeto

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -818,6 +818,18 @@ describe('Key managers', () => {
         expect(keyManager.activeItem).toBe(itemList.items[1]);
       }));
 
+      it('should expose whether the user is currently typing', fakeAsync(() => {
+        expect(keyManager.isTyping()).toBe(false);
+
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o')); // types "o"
+
+        expect(keyManager.isTyping()).toBe(true);
+
+        tick(debounceInterval);
+
+        expect(keyManager.isTyping()).toBe(false);
+      }));
+
     });
 
   });

src/cdk/a11y/key-manager/list-key-manager.ts

@@ -147,7 +147,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     // and convert those letters back into a string. Afterwards find the first item that starts
     // with that string and select it.
     this._typeaheadSubscription = this._letterKeyStream.pipe(
-      tap(keyCode => this._pressedLetters.push(keyCode)),
+      tap(letter => this._pressedLetters.push(letter)),
       debounceTime(debounceInterval),
       filter(() => this._pressedLetters.length > 0),
       map(() => this._pressedLetters.join(''))
@@ -274,6 +274,11 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     return this._activeItem;
   }
 
+  /** Gets whether the user is currently typing into the manager using the typeahead feature. */
+  isTyping(): boolean {
+    return this._pressedLetters.length > 0;
+  }
+
   /** Sets the active item to the first enabled item in the list. */
   setFirstItemActive(): void {
     this._setActiveItemByIndex(0, 1);

src/material/select/select.spec.ts

@@ -511,6 +511,31 @@ describe('MatSelect', () => {
             'Expected value from sixth option to have been set on the model.');
         }));
 
+        it('should not open the select when pressing space while typing', fakeAsync(() => {
+          const selectInstance = fixture.componentInstance.select;
+
+          fixture.componentInstance.typeaheadDebounceInterval = DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL;
+          fixture.detectChanges();
+
+          expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed on init.');
+
+          dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
+          tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL / 2);
+          fixture.detectChanges();
+
+          dispatchKeyboardEvent(select, 'keydown', SPACE);
+          fixture.detectChanges();
+
+          expect(selectInstance.panelOpen).toBe(false,
+              'Expected select to remain closed after space was pressed.');
+
+          tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL / 2);
+          fixture.detectChanges();
+
+          expect(selectInstance.panelOpen).toBe(false,
+              'Expected select to be closed when the timer runs out.');
+        }));
+
         it('should be able to customize the typeahead debounce interval', fakeAsync(() => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();

src/material/select/select.ts

@@ -721,7 +721,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     const manager = this._keyManager;
 
     // Open the select on ALT + arrow key to match the native <select>
-    if ((isOpenKey && !hasModifierKey(event)) || ((this.multiple || event.altKey) && isArrowKey)) {
+    if (!manager.isTyping() && (isOpenKey && !hasModifierKey(event)) ||
+      ((this.multiple || event.altKey) && isArrowKey)) {
       event.preventDefault(); // prevents the page from scrolling down when pressing space
       this.open();
     } else if (!this.multiple) {
@@ -747,9 +748,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   /** Handles keyboard events when the selected is open. */
   private _handleOpenKeydown(event: KeyboardEvent): void {
+    const manager = this._keyManager;
     const keyCode = event.keyCode;
     const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
-    const manager = this._keyManager;
+    const isTyping = manager.isTyping();
 
     if (keyCode === HOME || keyCode === END) {
       event.preventDefault();
@@ -758,11 +760,13 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       // Close the select on ALT + arrow key to match the native <select>
       event.preventDefault();
       this.close();
-    } else if ((keyCode === ENTER || keyCode === SPACE) && manager.activeItem &&
+      // Don't do anything in this case if the user is typing,
+      // because the typing sequence can include the space key.
+    } else if (!isTyping && (keyCode === ENTER || keyCode === SPACE) && manager.activeItem &&
       !hasModifierKey(event)) {
       event.preventDefault();
       manager.activeItem._selectViaInteraction();
-    } else if (this._multiple && keyCode === A && event.ctrlKey) {
+    } else if (!isTyping && this._multiple && keyCode === A && event.ctrlKey) {
       event.preventDefault();
       const hasDeselectedOptions = this.options.some(opt => !opt.disabled && !opt.selected);
 

tools/public_api_guard/cdk/a11y.d.ts

@@ -144,6 +144,7 @@ export declare class ListKeyManager<T extends ListKeyManagerOption> {
     change: Subject<number>;
     tabOut: Subject<void>;
     constructor(_items: QueryList<T> | T[]);
+    isTyping(): boolean;
     onKeydown(event: KeyboardEvent): void;
     setActiveItem(index: number): void;
     setActiveItem(item: T): void;