fix(chips): focus lost if last chip is deleted (#15344)

Fixes the user's focus being lost if they the last chip in a list.

Fixes #15338.

Author: crisbeto

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

@@ -146,16 +146,6 @@ describe('MatChipList', () => {
         expect(manager.activeItemIndex).toBe(0);
       });
 
-      it('should watch for chip focus', () => {
-        let array = chips.toArray();
-        let lastIndex = array.length - 1;
-        let lastItem = array[lastIndex];
-        lastItem.focus();
-        fixture.detectChanges();
-
-        expect(manager.activeItemIndex).toBe(lastIndex);
-      });
-
       it('should watch for chip focus', () => {
         let array = chips.toArray();
         let lastIndex = array.length - 1;
@@ -238,6 +228,18 @@ describe('MatChipList', () => {
           expect(chipListInstance._keyManager.activeItemIndex).toEqual(-1);
         });
 
+        it('should focus the list if the last focused item is removed', () => {
+          testComponent.chips = [0];
+
+          spyOn(chipListInstance, 'focus');
+          chips.last.focus();
+
+          testComponent.chips.pop();
+          fixture.detectChanges();
+
+          expect(chipListInstance.focus).toHaveBeenCalled();
+        });
+
         it('should move focus to the last chip when the focused chip was deleted inside a' +
           'component with animations', fakeAsync(() => {
             fixture.destroy();

src/material/chips/chip-list.ts

@@ -526,9 +526,14 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
    * key manager state and focus the next closest chip.
    */
   protected _updateFocusForDestroyedChips() {
-    if (this._lastDestroyedChipIndex != null && this.chips.length) {
-      const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
-      this._keyManager.setActiveItem(newChipIndex);
+    // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.
+    if (this._lastDestroyedChipIndex != null) {
+      if (this.chips.length) {
+        const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
+        this._keyManager.setActiveItem(newChipIndex);
+      } else {
+        this.focus();
+      }
     }
 
     this._lastDestroyedChipIndex = null;