diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index 196fee17d9d6..ce45f1aa4483 100644 --- a/src/material/list/selection-list.spec.ts +++ b/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).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; diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts index c138b89565aa..df806fd89f2a 100644 --- a/src/material/list/selection-list.ts +++ b/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(); }