diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index 4b6183141b9..092bbd1e3ac 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/src/lib/list/selection-list.spec.ts @@ -1,4 +1,4 @@ -import {DOWN_ARROW, SPACE, UP_ARROW} from '@angular/cdk/keycodes'; +import {DOWN_ARROW, SPACE, ENTER, UP_ARROW} from '@angular/cdk/keycodes'; import {Platform} from '@angular/cdk/platform'; import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing'; import {Component, DebugElement} from '@angular/core'; @@ -188,10 +188,9 @@ describe('MatSelectionList without forms', () => { }); it('should be able to use keyboard select with SPACE', () => { - let testListItem = listOptions[1].nativeElement as HTMLElement; - let SPACE_EVENT: KeyboardEvent = - createKeyboardEvent('keydown', SPACE, testListItem); - let selectList = + const testListItem = listOptions[1].nativeElement as HTMLElement; + const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE, testListItem); + const selectList = selectionList.injector.get(MatSelectionList).selectedOptions; expect(selectList.selected.length).toBe(0); @@ -201,6 +200,23 @@ describe('MatSelectionList without forms', () => { fixture.detectChanges(); expect(selectList.selected.length).toBe(1); + expect(SPACE_EVENT.defaultPrevented).toBe(true); + }); + + it('should be able to select an item using ENTER', () => { + const testListItem = listOptions[1].nativeElement as HTMLElement; + const ENTER_EVENT: KeyboardEvent = createKeyboardEvent('keydown', ENTER, testListItem); + const selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; + expect(selectList.selected.length).toBe(0); + + dispatchFakeEvent(testListItem, 'focus'); + selectionList.componentInstance._keydown(ENTER_EVENT); + + fixture.detectChanges(); + + expect(selectList.selected.length).toBe(1); + expect(ENTER_EVENT.defaultPrevented).toBe(true); }); it('should restore focus if active option is destroyed', () => { diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index 30315ded622..274a7ca4b5d 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -9,7 +9,7 @@ import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {SelectionModel} from '@angular/cdk/collections'; -import {SPACE} from '@angular/cdk/keycodes'; +import {SPACE, ENTER} from '@angular/cdk/keycodes'; import { AfterContentInit, Attribute, @@ -343,6 +343,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu _keydown(event: KeyboardEvent) { switch (event.keyCode) { case SPACE: + case ENTER: this._toggleSelectOnFocusedOption(); // Always prevent space from scrolling the page since the list has focus event.preventDefault();