Skip to content

Commit

Permalink
fix(selection-list): unable to select using the enter key (#8595)
Browse files Browse the repository at this point in the history
Fixes not being able to select items in the selection list using enter.

Fixes #8589.
  • Loading branch information
crisbeto authored and andrewseguin committed Dec 19, 2017
1 parent d67f971 commit c23853f
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 6 deletions.
26 changes: 21 additions & 5 deletions src/lib/list/selection-list.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>(MatSelectionList).selectedOptions;
expect(selectList.selected.length).toBe(0);

Expand All @@ -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>(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', () => {
Expand Down
3 changes: 2 additions & 1 deletion src/lib/list/selection-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit c23853f

Please sign in to comment.