fix(chips): arrow keys resetting focus to first chip (#12987)

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.

Author: crisbeto

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

@@ -269,6 +269,7 @@ describe('MatChipList', () => {
 
           // Press the LEFT arrow
           chipListInstance._keydown(LEFT_EVENT);
+          chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
           fixture.detectChanges();
 
           // It focuses the next-to-last item
@@ -290,6 +291,7 @@ describe('MatChipList', () => {
 
           // Press the RIGHT arrow
           chipListInstance._keydown(RIGHT_EVENT);
+          chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
           fixture.detectChanges();
 
           // It focuses the next-to-last item
@@ -362,6 +364,7 @@ describe('MatChipList', () => {
 
           // Press the RIGHT arrow
           chipListInstance._keydown(RIGHT_EVENT);
+          chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
           fixture.detectChanges();
 
           // It focuses the next-to-last item
@@ -383,6 +386,7 @@ describe('MatChipList', () => {
 
           // Press the LEFT arrow
           chipListInstance._keydown(LEFT_EVENT);
+          chipListInstance._blur(); // Simulate focus leaving the list and going to the chip.
           fixture.detectChanges();
 
           // It focuses the next-to-last item

src/lib/chips/chip-list.ts

@@ -242,7 +242,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
 
   /** Whether any chips or the matChipInput inside of this chip-list has focus. */
   get focused(): boolean {
-    return (this._chipInput && this._chipInput.focused) || this.chips.some(chip => chip._hasFocus);
+    return (this._chipInput && this._chipInput.focused) || this._hasFocusedChip();
   }
 
   /**
@@ -636,7 +636,10 @@ 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._hasFocusedChip()) {
+      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.
@@ -758,4 +761,9 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
 
     return false;
   }
+
+  /** Checks whether any of the chips is focused. */
+  private _hasFocusedChip() {
+    return this.chips.some(chip => chip._hasFocus);
+  }
 }