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.
This commit is contained in:
Kristiyan Kostadinov
2017-12-13 22:52:44 +01:00
committed by Andrew Seguin
parent 12feff7064
commit 91053020c3
2 changed files with 23 additions and 6 deletions
+21 -5
View File
@@ -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>(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>(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', () => {
+2 -1
View File
@@ -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();