diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 2ac30feb9287..5f006e427acc 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -577,6 +577,17 @@ describe('MatChipList', () => { expect(falsyFixture.componentInstance.chips.first.selected) .toBe(true, 'Expected first option to be selected'); }); + + it('should not focus the active chip when the value is set programmatically', () => { + const chipArray = fixture.componentInstance.chips.toArray(); + + spyOn(chipArray[4], 'focus').and.callThrough(); + + fixture.componentInstance.control.setValue('chips-4'); + fixture.detectChanges(); + + expect(chipArray[4].focus).not.toHaveBeenCalled(); + }); }); describe('multiple selection', () => { diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index e8a4d67c8e7f..a0a94d46164b 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -527,7 +527,6 @@ export class MatChipList implements MatFormFieldControl, ControlValueAccess private _isInputEmpty(element: HTMLElement): boolean { if (element && element.nodeName.toLowerCase() === 'input') { let input = element as HTMLInputElement; - return !input.value; } @@ -547,7 +546,14 @@ export class MatChipList implements MatFormFieldControl, ControlValueAccess // Shift focus to the active item. Note that we shouldn't do this in multiple // mode, because we don't know what chip the user interacted with last. if (correspondingChip) { - this._keyManager.setActiveItem(this.chips.toArray().indexOf(correspondingChip)); + const correspondingChipIndex = this.chips.toArray().indexOf(correspondingChip); + + if (isUserInput) { + this._keyManager.setActiveItem(correspondingChipIndex); + } else { + this._keyManager.updateActiveItemIndex(correspondingChipIndex); + } + } } }