fix(chip-list): set key manager active index to -1 when blurred (#10335)

Author: tinayuangao

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);
+        });
       });
     });
 

src/lib/chips/chip-list.ts

@@ -518,7 +518,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);
@@ -567,8 +567,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
       if (correspondingChip) {
         if (isUserInput) {
           this._keyManager.setActiveItem(correspondingChip);
-        } else {
-          this._keyManager.updateActiveItem(correspondingChip);
         }
       }
     }
@@ -652,6 +650,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.

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', () => {

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. */