fix(autofill): listen for animation events outside the zone, but emit autofill events inside (#11798)

Author: mmalerba

src/cdk/text-field/autofill.spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {supportsPassiveEventListeners} from '@angular/cdk/platform';
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {EMPTY} from 'rxjs';
 import {AutofillEvent, AutofillMonitor} from './autofill';
@@ -150,6 +150,19 @@ describe('AutofillMonitor', () => {
     expect(spy).toHaveBeenCalled();
   });
 
+  it('should emit on stream inside the NgZone', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    let animationStartCallback: Function = () => {};
+    inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
+    const autofillStream = autofillMonitor.monitor(inputEl);
+    const spy = jasmine.createSpy('zone spy');
+
+    autofillStream.subscribe(() => spy(NgZone.isInAngularZone()));
+    expect(spy).not.toHaveBeenCalled();
+
+    animationStartCallback({animationName: 'cdk-text-field-autofill-start', target: inputEl});
+    expect(spy).toHaveBeenCalledWith(true);
+  });
 });
 
 describe('cdkAutofill', () => {

src/cdk/text-field/autofill.ts

@@ -71,10 +71,10 @@ export class AutofillMonitor implements OnDestroy {
     const listener = (event: AnimationEvent) => {
       if (event.animationName === 'cdk-text-field-autofill-start') {
         element.classList.add('cdk-text-field-autofilled');
-        result.next({target: event.target as Element, isAutofilled: true});
+        this._ngZone.run(() => result.next({target: event.target as Element, isAutofilled: true}));
       } else if (event.animationName === 'cdk-text-field-autofill-end') {
         element.classList.remove('cdk-text-field-autofilled');
-        result.next({target: event.target as Element, isAutofilled: false});
+        this._ngZone.run(() => result.next({target: event.target as Element, isAutofilled: false}));
       }
     };