Skip to content

Commit a48f75b

Browse files
crisbetojelbourn
authored andcommitted
fix(chips): chip list capturing keyboard events from input (#9651)
* 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 5a055a7. * Adds a test to ensure that we don't re-introduce the issue in the future.
1 parent e6e4c3c commit a48f75b

File tree

2 files changed

+13
-1
lines changed

2 files changed

+13
-1
lines changed

src/lib/chips/chip-list.spec.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,18 @@ describe('MatChipList', () => {
212212
expect(manager.activeItemIndex).toEqual(1);
213213
});
214214

215+
it('should not handle arrow key events from non-chip elements', () => {
216+
const event: KeyboardEvent =
217+
createKeyboardEvent('keydown', RIGHT_ARROW, chipListNativeElement);
218+
const initialActiveIndex = manager.activeItemIndex;
219+
220+
chipListInstance._keydown(event);
221+
fixture.detectChanges();
222+
223+
expect(manager.activeItemIndex)
224+
.toBe(initialActiveIndex, 'Expected focused item not to have changed.');
225+
});
226+
215227
});
216228

217229
describe('RTL', () => {

src/lib/chips/chip-list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -459,7 +459,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
459459
if (event.keyCode === BACKSPACE && this._isInputEmpty(target)) {
460460
this._keyManager.setLastItemActive();
461461
event.preventDefault();
462-
} else {
462+
} else if (target && target.classList.contains('mat-chip')) {
463463
this._keyManager.onKeydown(event);
464464
this.stateChanges.next();
465465
}

0 commit comments

Comments
 (0)