mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Andrew Seguin
parent
12feff7064
commit
91053020c3
@@ -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', () => {
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user