address comments

Author: mmalerba

src/lib/input/_autofill.scss

@@ -1,6 +1,8 @@
 // Core styles that enable monitoring autofill state of inputs.
 @mixin mat-input-autofill {
-  // Keyframes that do nothing, but allow us to monitor when an input becomes autofilled.
+  // Keyframes that apply no styles, but allow us to monitor when an input becomes autofilled
+  // by watching for the animation events that are fired when they start.
+  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
   @keyframes mat-input-autofill-start {}
   @keyframes mat-input-autofill-end {}
 

src/lib/input/autofill.spec.ts

@@ -6,11 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {supportsPassiveEventListeners} from '@angular/cdk/platform';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {empty as observableEmpty} from 'rxjs/observable/empty';
 import {AutofillEvent, AutofillMonitor} from './autofill';
 import {MatInputModule} from './input-module';
-import {empty as observableEmpty} from 'rxjs/observable/empty';
+
+
+const listenerOptions: any = supportsPassiveEventListeners() ? {passive: true} : false;
+
 
 describe('AutofillMonitor', () => {
   let autofillMonitor: AutofillMonitor;
@@ -48,7 +53,8 @@ describe('AutofillMonitor', () => {
 
     autofillMonitor.monitor(inputEl);
     expect(inputEl.classList).toContain('mat-input-autofill-monitored');
-    expect(inputEl.addEventListener).toHaveBeenCalledWith('animationstart', jasmine.any(Function));
+    expect(inputEl.addEventListener)
+        .toHaveBeenCalledWith('animationstart', jasmine.any(Function), listenerOptions);
   });
 
   it('should not add multiple listeners to the same element', () => {
@@ -69,7 +75,7 @@ describe('AutofillMonitor', () => {
     autofillMonitor.stopMonitoring(inputEl);
     expect(inputEl.classList).not.toContain('mat-input-autofill-monitored');
     expect(inputEl.removeEventListener)
-        .toHaveBeenCalledWith('animationstart', jasmine.any(Function));
+        .toHaveBeenCalledWith('animationstart', jasmine.any(Function), listenerOptions);
   });
 
   it('should stop monitoring all monitored elements upon destroy', () => {

src/lib/input/autofill.ts

@@ -6,8 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, EventEmitter, Injectable, OnDestroy, Output} from '@angular/core';
+import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Injectable,
+  NgZone,
+  OnDestroy,
+  Output
+} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
+import {empty as observableEmpty} from 'rxjs/observable/empty';
 import {Subject} from 'rxjs/Subject';
 
 
@@ -25,6 +35,10 @@ type MonitoredElementInfo = {
 };
 
 
+/** Options to pass to the animationstart listener. */
+const listenerOptions: any = supportsPassiveEventListeners() ? {passive: true} : false;
+
+
 /**
  * An injectable service that can be used to monitor the autofill state of an input.
  * Based on the following blog post:
@@ -34,7 +48,13 @@ type MonitoredElementInfo = {
 export class AutofillMonitor implements OnDestroy {
   private _monitoredElements = new Map<Element, MonitoredElementInfo>();
 
+  constructor(private _platform: Platform, private _ngZone: NgZone) {}
+
   monitor(element: Element): Observable<AutofillEvent> {
+    if (!this._platform.isBrowser) {
+      return observableEmpty();
+    }
+
     const info = this._monitoredElements.get(element);
     if (info) {
       return info.subject.asObservable();
@@ -51,13 +71,15 @@ export class AutofillMonitor implements OnDestroy {
       }
     };
 
-    element.addEventListener('animationstart', listener);
+    this._ngZone.runOutsideAngular(() => {
+      element.addEventListener('animationstart', listener, listenerOptions);
+    });
     element.classList.add('mat-input-autofill-monitored');
 
     this._monitoredElements.set(element, {
       subject: result,
       unlisten: () => {
-        element.removeEventListener('animationstart', listener);
+        element.removeEventListener('animationstart', listener, listenerOptions);
       }
     });
 
@@ -90,9 +112,10 @@ export class AutofillMonitor implements OnDestroy {
 export class MatAutofill implements OnDestroy {
   @Output() matAutofill = new EventEmitter<AutofillEvent>();
 
-  constructor(private _elementRef: ElementRef, private _autofillMonitor: AutofillMonitor) {
+  constructor(private _elementRef: ElementRef, private _autofillMonitor: AutofillMonitor,
+              ngZone: NgZone) {
     this._autofillMonitor.monitor(this._elementRef.nativeElement)
-        .subscribe(event => this.matAutofill.emit(event));
+        .subscribe(event => ngZone.run(() => this.matAutofill.emit(event)));
   }
 
   ngOnDestroy() {