fix(chips): fix chip list focus and keyboard behaviors (#7319)

This commit is contained in:
tinayuangao
2017-09-29 13:00:52 -07:00
committed by Andrew Seguin
parent 6b70ca6ce3
commit f1664687a7
2 changed files with 9 additions and 11 deletions
+6 -6
View File
@@ -279,7 +279,7 @@ describe('MatChipList', () => {
describe('when the input has focus', () => {
it('should focus the last chip when press DELETE', () => {
it('should not focus the last chip when press DELETE', () => {
let nativeInput = fixture.nativeElement.querySelector('input');
let DELETE_EVENT: KeyboardEvent =
createKeyboardEvent('keydown', DELETE, nativeInput);
@@ -292,8 +292,8 @@ describe('MatChipList', () => {
chipListInstance._keydown(DELETE_EVENT);
fixture.detectChanges();
// It focuses the last chip
expect(manager.activeItemIndex).toEqual(chips.length - 1);
// It doesn't focus the last chip
expect(manager.activeItemIndex).toEqual(-1);
});
it('should focus the last chip when press BACKSPACE', () => {
@@ -786,7 +786,7 @@ describe('MatChipList', () => {
describe('when the input has focus', () => {
it('should focus the last chip when press DELETE', () => {
it('should not focus the last chip when press DELETE', () => {
let nativeInput = fixture.nativeElement.querySelector('input');
let DELETE_EVENT: KeyboardEvent =
createKeyboardEvent('keydown', DELETE, nativeInput);
@@ -799,8 +799,8 @@ describe('MatChipList', () => {
chipListInstance._keydown(DELETE_EVENT);
fixture.detectChanges();
// It focuses the last chip
expect(manager.activeItemIndex).toEqual(chips.length - 1);
// It doesn't focus the last chip
expect(manager.activeItemIndex).toEqual(-1);
});
it('should focus the last chip when press BACKSPACE', () => {
+3 -5
View File
@@ -10,7 +10,7 @@ import {FocusKeyManager} from '@angular/cdk/a11y';
import {Directionality} from '@angular/cdk/bidi';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {SelectionModel} from '@angular/cdk/collections';
import {BACKSPACE, DELETE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '@angular/cdk/keycodes';
import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
import {startWith} from '@angular/cdk/rxjs';
import {
AfterContentInit,
@@ -432,8 +432,8 @@ export class MatChipList implements MatFormFieldControl<any>, ControlValueAccess
let isPrevKey = (code === (isRtl ? RIGHT_ARROW : LEFT_ARROW));
let isNextKey = (code === (isRtl ? LEFT_ARROW : RIGHT_ARROW));
let isBackKey = (code === BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey);
// If they are on an empty input and hit backspace/delete/left arrow, focus the last chip
let isBackKey = code === BACKSPACE;
// If they are on an empty input and hit backspace, focus the last chip
if (isInputEmpty && isBackKey) {
this._keyManager.setLastItemActive();
event.preventDefault();
@@ -504,8 +504,6 @@ export class MatChipList implements MatFormFieldControl<any>, ControlValueAccess
if (focusChip) {
focusChip.focus();
}
} else if (chipsArray.length === 0) {
this._focusInput();
}
// Reset our destroyed index