Skip to content

Commit c23853f

Browse files
crisbetoandrewseguin
authored andcommitted
fix(selection-list): unable to select using the enter key (#8595)
Fixes not being able to select items in the selection list using enter. Fixes #8589.
1 parent d67f971 commit c23853f

File tree

2 files changed

+23
-6
lines changed

2 files changed

+23
-6
lines changed

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {DOWN_ARROW, SPACE, UP_ARROW} from '@angular/cdk/keycodes';
1+
import {DOWN_ARROW, SPACE, ENTER, UP_ARROW} from '@angular/cdk/keycodes';
22
import {Platform} from '@angular/cdk/platform';
33
import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
44
import {Component, DebugElement} from '@angular/core';
@@ -188,10 +188,9 @@ describe('MatSelectionList without forms', () => {
188188
});
189189

190190
it('should be able to use keyboard select with SPACE', () => {
191-
let testListItem = listOptions[1].nativeElement as HTMLElement;
192-
let SPACE_EVENT: KeyboardEvent =
193-
createKeyboardEvent('keydown', SPACE, testListItem);
194-
let selectList =
191+
const testListItem = listOptions[1].nativeElement as HTMLElement;
192+
const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE, testListItem);
193+
const selectList =
195194
selectionList.injector.get<MatSelectionList>(MatSelectionList).selectedOptions;
196195
expect(selectList.selected.length).toBe(0);
197196

@@ -201,6 +200,23 @@ describe('MatSelectionList without forms', () => {
201200
fixture.detectChanges();
202201

203202
expect(selectList.selected.length).toBe(1);
203+
expect(SPACE_EVENT.defaultPrevented).toBe(true);
204+
});
205+
206+
it('should be able to select an item using ENTER', () => {
207+
const testListItem = listOptions[1].nativeElement as HTMLElement;
208+
const ENTER_EVENT: KeyboardEvent = createKeyboardEvent('keydown', ENTER, testListItem);
209+
const selectList =
210+
selectionList.injector.get<MatSelectionList>(MatSelectionList).selectedOptions;
211+
expect(selectList.selected.length).toBe(0);
212+
213+
dispatchFakeEvent(testListItem, 'focus');
214+
selectionList.componentInstance._keydown(ENTER_EVENT);
215+
216+
fixture.detectChanges();
217+
218+
expect(selectList.selected.length).toBe(1);
219+
expect(ENTER_EVENT.defaultPrevented).toBe(true);
204220
});
205221

206222
it('should restore focus if active option is destroyed', () => {

src/lib/list/selection-list.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
1010
import {coerceBooleanProperty} from '@angular/cdk/coercion';
1111
import {SelectionModel} from '@angular/cdk/collections';
12-
import {SPACE} from '@angular/cdk/keycodes';
12+
import {SPACE, ENTER} from '@angular/cdk/keycodes';
1313
import {
1414
AfterContentInit,
1515
Attribute,
@@ -343,6 +343,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
343343
_keydown(event: KeyboardEvent) {
344344
switch (event.keyCode) {
345345
case SPACE:
346+
case ENTER:
346347
this._toggleSelectOnFocusedOption();
347348
// Always prevent space from scrolling the page since the list has focus
348349
event.preventDefault();

0 commit comments

Comments
 (0)