remove ripple after timeout outside the angular zone

Author: tinayuangao

src/lib/core/ripple/ripple-renderer.ts

@@ -1,5 +1,6 @@
 import {
   ElementRef,
+  NgZone,
 } from '@angular/core';
 
 /** TODO: internal */
@@ -44,7 +45,9 @@ export class RippleRenderer {
   private _triggerElement: HTMLElement;
   _opacity: string;
 
-  constructor(_elementRef: ElementRef, private _eventHandlers: Map<string, (e: Event) => void>) {
+  constructor(_elementRef: ElementRef,
+              private _eventHandlers: Map<string, (e: Event) => void>,
+              private _ngZone: NgZone) {
     this._rippleElement = _elementRef.nativeElement;
     // The background div is created in createBackgroundIfNeeded when the ripple becomes enabled.
     // This avoids creating unneeded divs when the ripple is always disabled.
@@ -143,8 +146,15 @@ export class RippleRenderer {
 
     rippleDiv.addEventListener('transitionend',
         (event: TransitionEvent) => transitionEndCallback(ripple, event));
-    // Remove the ripple after transitions (fade-in, transform, fade-out)
-    setTimeout(() => this.removeRippleFromDom(ripple.rippleElement), fadeInSeconds * 3 * 1000);
+    // Ensure that ripples are always removed, even when transitionend doesn't fire.
+    // Run this outside the Angular zone because there's nothing that Angular cares about.
+    // If it were to run inside the Angular zone, every test that used ripples would have to be
+    // either async or fakeAsync.
+    this._ngZone.runOutsideAngular(() => {
+      // The ripple lasts a time equal to the sum of fade-in, transform, and fade-out (3 * fade-in time).
+      let rippleDuration =  fadeInSeconds * 3 * 1000;
+      setTimeout(() => this.removeRippleFromDom(ripple.rippleElement), rippleDuration);
+    });
   }
 
   /** Fades out a foreground ripple after it has fully expanded and faded in. */

src/lib/core/ripple/ripple.spec.ts

@@ -1,4 +1,4 @@
-import {TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
+import {TestBed, ComponentFixture, async, tick} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {MdRipple, MdRippleModule} from './ripple';
 
@@ -128,12 +128,13 @@ describe('MdRipple', () => {
       expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
     });
 
-    it('removes foreground ripples after timeout', fakeAsync(() => {
+    it('removes foreground ripples after timeout', async(() => {
       rippleElement.click();
       expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(1);
 
-      tick(100);
-      expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
+      setTimeout(() => {
+        expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
+      }, 600);
     }));
 
     it('creates ripples when manually triggered', () => {

src/lib/core/ripple/ripple.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -61,13 +62,13 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
 
   private _rippleRenderer: RippleRenderer;
 
-  constructor(_elementRef: ElementRef) {
+  constructor(_elementRef: ElementRef, _ngZone: NgZone) {
     // These event handlers are attached to the element that triggers the ripple animations.
     const eventHandlers = new Map<string, (e: Event) => void>();
     eventHandlers.set('mousedown', (event: MouseEvent) => this._mouseDown(event));
     eventHandlers.set('click', (event: MouseEvent) => this._click(event));
     eventHandlers.set('mouseleave', (event: MouseEvent) => this._mouseLeave(event));
-    this._rippleRenderer = new RippleRenderer(_elementRef, eventHandlers);
+    this._rippleRenderer = new RippleRenderer(_elementRef, eventHandlers, _ngZone);
   }
 
   /** TODO: internal */

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -1,4 +1,4 @@
-import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive} from '@angular/core';
+import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive, NgZone} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/ripple';
 
@@ -51,7 +51,7 @@ export class MdTabLink {
   selector: '[md-tab-link]',
 })
 export class MdTabLinkRipple extends MdRipple {
-  constructor(private _element: ElementRef) {
-    super(_element);
+  constructor(private _element: ElementRef, private _ngZone: NgZone) {
+    super(_element, _ngZone);
   }
 }