fix(list): don't handle selection keys while using typeahead in selection list (#17826)

Along the same lines as #17785. Doesn't handle space key presses while the user is using the typeahead so that we don't interrupt their typing.

Author: crisbeto

src/material/list/selection-list.spec.ts

@@ -1,4 +1,4 @@
-import {DOWN_ARROW, SPACE, ENTER, UP_ARROW, HOME, END, A} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, SPACE, ENTER, UP_ARROW, HOME, END, A, D} from '@angular/cdk/keycodes';
 import {
   createKeyboardEvent,
   dispatchFakeEvent,
@@ -501,6 +501,44 @@ describe('MatSelectionList without forms', () => {
       expect(manager.activeItemIndex).toBe(3);
     }));
 
+    it('should be able to skip to an item by typing', fakeAsync(() => {
+      const manager = selectionList.componentInstance._keyManager;
+
+      expect(manager.activeItemIndex).not.toBe(3);
+
+      const event = createKeyboardEvent('keydown', D, 'd');
+      selectionList.componentInstance._keydown(event);
+      fixture.detectChanges();
+      tick(200);
+
+      expect(manager.activeItemIndex).toBe(3);
+    }));
+
+    it('should not select items while using the typeahead', fakeAsync(() => {
+      const manager = selectionList.componentInstance._keyManager;
+      const testListItem = listOptions[1].nativeElement as HTMLElement;
+      const model =
+          selectionList.injector.get<MatSelectionList>(MatSelectionList).selectedOptions;
+
+      dispatchFakeEvent(testListItem, 'focus');
+      fixture.detectChanges();
+
+      expect(manager.activeItemIndex).toBe(1);
+      expect(model.isEmpty()).toBe(true);
+
+      selectionList.componentInstance._keydown(createKeyboardEvent('keydown', D, 'd'));
+      fixture.detectChanges();
+      tick(100); // Tick only half the typeahead timeout.
+
+      selectionList.componentInstance._keydown(
+        createKeyboardEvent('keydown', SPACE, undefined, testListItem));
+      fixture.detectChanges();
+      tick(100); // Tick the rest of the timeout.
+
+      expect(manager.activeItemIndex).toBe(3);
+      expect(model.isEmpty()).toBe(true);
+    }));
+
     it('should be able to select all options', () => {
       const list: MatSelectionList = selectionList.componentInstance;
 

src/material/list/selection-list.ts

@@ -490,7 +490,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
     switch (keyCode) {
       case SPACE:
       case ENTER:
-        if (!hasModifier) {
+        if (!hasModifier && !manager.isTyping()) {
           this._toggleFocusedOption();
           // Always prevent space from scrolling the page since the list has focus
           event.preventDefault();
@@ -504,7 +504,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
         }
         break;
       case A:
-        if (hasModifierKey(event, 'ctrlKey')) {
+        if (hasModifierKey(event, 'ctrlKey') && !manager.isTyping()) {
           this.options.find(option => !option.selected) ? this.selectAll() : this.deselectAll();
           event.preventDefault();
         }