From bb1fc942298bf8f943ad30db854acf8ccef4d072 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 28 Jan 2018 13:51:16 +0100 Subject: [PATCH] fix(chips): chip list capturing keyboard events from input * Fixes the chip list reacting to keyboard events from inside the input, which ends up moving focus away and creating a new chip. This appears to be a regression introduced in 5a055a70d4a5e05dc3fcdca6210054d1dc21514e. * Adds a test to ensure that we don't re-introduce the issue in the future. --- src/lib/chips/chip-list.spec.ts | 12 ++++++++++++ src/lib/chips/chip-list.ts | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index dda5c16f2ee5..752f05cb97c7 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -212,6 +212,18 @@ describe('MatChipList', () => { expect(manager.activeItemIndex).toEqual(1); }); + it('should not handle arrow key events from non-chip elements', () => { + const event: KeyboardEvent = + createKeyboardEvent('keydown', RIGHT_ARROW, chipListNativeElement); + const initialActiveIndex = manager.activeItemIndex; + + chipListInstance._keydown(event); + fixture.detectChanges(); + + expect(manager.activeItemIndex) + .toBe(initialActiveIndex, 'Expected focused item not to have changed.'); + }); + }); describe('RTL', () => { diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index ff2620dbcae8..8f4963a9a03d 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -459,7 +459,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo if (event.keyCode === BACKSPACE && this._isInputEmpty(target)) { this._keyManager.setLastItemActive(); event.preventDefault(); - } else { + } else if (target && target.classList.contains('mat-chip')) { this._keyManager.onKeydown(event); this.stateChanges.next(); }