Skip to content

Commit 2afcb8a

Browse files
committed
fix(chips): arrow keys resetting focus to first chip
Currently the chip list is set up to reset the focused when it's blurred. Since blurring also happens when focus is moved from one chip to another, the user isn't able to move more than one chip before they get reset.
1 parent 9ab2c90 commit 2afcb8a

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ describe('MatChipList', () => {
269269

270270
// Press the LEFT arrow
271271
chipListInstance._keydown(LEFT_EVENT);
272+
chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
272273
fixture.detectChanges();
273274

274275
// It focuses the next-to-last item
@@ -290,6 +291,7 @@ describe('MatChipList', () => {
290291

291292
// Press the RIGHT arrow
292293
chipListInstance._keydown(RIGHT_EVENT);
294+
chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
293295
fixture.detectChanges();
294296

295297
// It focuses the next-to-last item
@@ -362,6 +364,7 @@ describe('MatChipList', () => {
362364

363365
// Press the RIGHT arrow
364366
chipListInstance._keydown(RIGHT_EVENT);
367+
chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
365368
fixture.detectChanges();
366369

367370
// It focuses the next-to-last item
@@ -383,6 +386,7 @@ describe('MatChipList', () => {
383386

384387
// Press the LEFT arrow
385388
chipListInstance._keydown(LEFT_EVENT);
389+
chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
386390
fixture.detectChanges();
387391

388392
// It focuses the next-to-last item

src/lib/chips/chip-list.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
242242

243243
/** Whether any chips or the matChipInput inside of this chip-list has focus. */
244244
get focused(): boolean {
245-
return (this._chipInput && this._chipInput.focused) || this.chips.some(chip => chip._hasFocus);
245+
return (this._chipInput && this._chipInput.focused) || this._hasFocusedChip();
246246
}
247247

248248
/**
@@ -636,7 +636,10 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
636636

637637
/** When blurred, mark the field as touched when focus moved outside the chip list. */
638638
_blur() {
639-
this._keyManager.setActiveItem(-1);
639+
if (!this._hasFocusedChip()) {
640+
this._keyManager.setActiveItem(-1);
641+
}
642+
640643
if (!this.disabled) {
641644
if (this._chipInput) {
642645
// If there's a chip input, we should check whether the focus moved to chip input.
@@ -758,4 +761,9 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
758761

759762
return false;
760763
}
764+
765+
/** Checks whether any of the chips is focused. */
766+
private _hasFocusedChip() {
767+
return this.chips.some(chip => chip._hasFocus);
768+
}
761769
}

0 commit comments

Comments
 (0)