skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(chips): use key manager for horizontal keyboard controls (#9600)

Browse Source 
Switches to using the horizontal mode from the `ListKeyManager` for the left/right controls, rather than reimplementing them.
This commit is contained in:
Kristiyan Kostadinov
2018-01-26 16:30:36 +01:00
committed by Jeremy Elbourn
parent fd17cf2813
commit 5a055a70d4
1 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/chips/chip-list.ts
+10 -27
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, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
import {BACKSPACE} from '@angular/cdk/keycodes';
import {startWith} from 'rxjs/operators/startWith';
import {
AfterContentInit,
@@ -332,8 +332,10 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
}
ngAfterContentInit(): void {
this._keyManager = new FocusKeyManager<MatChip>(this.chips).withWrap();
this._keyManager = new FocusKeyManager<MatChip>(this.chips)
.withWrap()
.withVerticalOrientation()
.withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
// Prevents the chip list from capturing focus and redirecting
// it back to the first chip when the user tabs out.
@@ -451,35 +453,16 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
* Pass events to the keyboard manager. Available here for tests.
*/
_keydown(event: KeyboardEvent) {
let code = event.keyCode;
let target = event.target as HTMLElement;
let isInputEmpty = this._isInputEmpty(target);
let isRtl = this._dir && this._dir.value == 'rtl';
const target = event.target as HTMLElement;
let isPrevKey = (code === (isRtl ? RIGHT_ARROW : LEFT_ARROW));
let isNextKey = (code === (isRtl ? LEFT_ARROW : RIGHT_ARROW));
let isBackKey = code === BACKSPACE;
// If they are on an empty input and hit backspace, focus the last chip
if (isInputEmpty && isBackKey) {
if (event.keyCode === BACKSPACE && this._isInputEmpty(target)) {
this._keyManager.setLastItemActive();
event.preventDefault();
return;
} else {
this._keyManager.onKeydown(event);
this.stateChanges.next();
}
// If they are on a chip, check for space/left/right, otherwise pass to our key manager (like
// up/down keys)
if (target && target.classList.contains('mat-chip')) {
if (isPrevKey) {
this._keyManager.setPreviousItemActive();
event.preventDefault();
} else if (isNextKey) {
this._keyManager.setNextItemActive();
event.preventDefault();
} else {
this._keyManager.onKeydown(event);
}
}
this.stateChanges.next();
}