diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 1e3d1e9339e0..3f29982017c2 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -169,6 +169,22 @@ describe('MatChipList', () => { // It focuses the next-to-last item expect(manager.activeItemIndex).toEqual(lastIndex - 1); }); + + it('should not focus if chip list is not focused', () => { + let array = chips.toArray(); + let midItem = array[2]; + + // Focus and blur the middle item + midItem.focus(); + midItem._blur(); + + // Destroy the middle item + testComponent.remove = 2; + fixture.detectChanges(); + + // Should not have focus + expect(chipListInstance._keyManager.activeItemIndex).toEqual(-1); + }); }); }); diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 13cd2f7a0e68..dc55931ab37e 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -521,7 +521,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo protected _updateFocusForDestroyedChips() { let chipsArray = this.chips; - if (this._lastDestroyedIndex != null && chipsArray.length > 0) { + if (this._lastDestroyedIndex != null && chipsArray.length > 0 && this.focused) { // Check whether the destroyed chip was the last item const newFocusIndex = Math.min(this._lastDestroyedIndex, chipsArray.length - 1); this._keyManager.setActiveItem(newFocusIndex); @@ -570,8 +570,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo if (correspondingChip) { if (isUserInput) { this._keyManager.setActiveItem(correspondingChip); - } else { - this._keyManager.updateActiveItem(correspondingChip); } } } @@ -655,6 +653,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo /** When blurred, mark the field as touched when focus moved outside the chip list. */ _blur() { + this._keyManager.setActiveItem(-1); if (!this.disabled) { if (this._chipInput) { // If there's a chip input, we should check whether the focus moved to chip input. diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 8c8c5e87e449..f45b37ae92e9 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -79,12 +79,17 @@ describe('Chips', () => { expect(chipNativeElement.classList).not.toContain('mat-basic-chip'); }); - it('emits focus on click', () => { - spyOn(chipInstance, 'focus').and.callThrough(); + it('emits focus only once for multiple clicks', () => { + let counter = 0; + chipInstance._onFocus.subscribe(() => { + counter ++ ; + }); - chipNativeElement.click(); + chipNativeElement.focus(); + chipNativeElement.focus(); + fixture.detectChanges(); - expect(chipInstance.focus).toHaveBeenCalledTimes(1); + expect(counter).toBe(1); }); it('emits destroy on destruction', () => { diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index f72240ea9577..f61d525d5d1c 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -108,7 +108,7 @@ export class MatChipTrailingIcon {} '[attr.aria-selected]': 'ariaSelected', '(click)': '_handleClick($event)', '(keydown)': '_handleKeydown($event)', - '(focus)': '_hasFocus = true', + '(focus)': 'focus()', '(blur)': '_blur()', }, }) @@ -310,8 +310,11 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes /** Allows for programmatic focusing of the chip. */ focus(): void { - this._elementRef.nativeElement.focus(); - this._onFocus.next({chip: this}); + if (!this._hasFocus) { + this._elementRef.nativeElement.focus(); + this._onFocus.next({chip: this}); + } + this._hasFocus = true; } /** @@ -335,8 +338,6 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes event.preventDefault(); event.stopPropagation(); - - this.focus(); } /** Handle custom key presses. */