fix(chips): form field not appearing as blurred when used without an input (#12858)

Fixes blurring a chip list within a form field, without an input, not reflecting its state in the UI.

Author: crisbeto

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

@@ -772,6 +772,22 @@ describe('MatChipList', () => {
 
         expect(chipArray[4].focus).not.toHaveBeenCalled();
       });
+
+      it('should blur the form field when the active chip is blurred', fakeAsync(() => {
+        const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field');
+
+        nativeChips[0].focus();
+        fixture.detectChanges();
+
+        expect(formField.classList).toContain('mat-focused');
+
+        nativeChips[0].blur();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+        fixture.detectChanges();
+
+        expect(formField.classList).not.toContain('mat-focused');
+      }));
     });
 
     describe('multiple selection', () => {

src/lib/chips/chip.ts

@@ -367,9 +367,12 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
     this._ngZone.onStable
       .asObservable()
       .pipe(take(1))
-      .subscribe(() => this._hasFocus = false);
-
-    this._onBlur.next({chip: this});
+      .subscribe(() => {
+        this._ngZone.run(() => {
+          this._hasFocus = false;
+          this._onBlur.next({chip: this});
+        });
+      });
   }
 }