fix(ripple): fade-out-all should hide all ripples

* When calling `fadeOutAll()`, all currently fading / animating ripples should hide as well.
* Adds some extra tests that ensure that ripples properly fade-in and fade-out (See angular#3398)

Author: devversion

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

@@ -5,6 +5,9 @@ import {RippleConfig, RippleRenderer} from './ripple-renderer';
  */
 export class RippleRef {
 
+  /** Whether the ripple finished it's fade-in animation. */
+  fadedIn: boolean = false;
+
   constructor(
     private _renderer: RippleRenderer,
     public element: HTMLElement,

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

@@ -101,12 +101,15 @@ export class RippleRenderer {
     // Exposed reference to the ripple that will be returned.
     let rippleRef = new RippleRef(this, ripple, config);
 
+    // Add the ripple reference to the list of all active ripples.
+    this._activeRipples.add(rippleRef);
+
     // Wait for the ripple element to be completely faded in.
     // Once it's faded in, the ripple can be hidden immediately if the mouse is released.
     this.runTimeoutOutsideZone(() => {
-      if (config.persistent || this._isMousedown) {
-        this._activeRipples.add(rippleRef);
-      } else {
+      rippleRef.fadedIn = true;
+
+      if (!config.persistent && !this._isMousedown) {
         rippleRef.fadeOut();
       }
     }, duration);
@@ -116,9 +119,12 @@ export class RippleRenderer {
 
   /** Fades out a ripple reference. */
   fadeOutRipple(ripple: RippleRef) {
-    let rippleEl = ripple.element;
+    // For ripples that are not active anymore, don't re-un the fade-out animation.
+    if (!this._activeRipples.delete(ripple)) {
+      return;
+    }
 
-    this._activeRipples.delete(ripple);
+    let rippleEl = ripple.element;
 
     rippleEl.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
     rippleEl.style.opacity = '0';
@@ -163,9 +169,9 @@ export class RippleRenderer {
   private onMouseup() {
     this._isMousedown = false;
 
-    // On mouseup, fade-out all ripples that are active and not persistent.
+    // Fade-out all ripples that are completely faded-in and not persistent.
     this._activeRipples.forEach(ripple => {
-      if (!ripple.config.persistent) {
+      if (!ripple.config.persistent && ripple.fadedIn) {
         ripple.fadeOut();
       }
     });

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

@@ -77,6 +77,39 @@ describe('MdRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     }));
 
+    it('should remove ripples after mouseup', fakeAsync(() => {
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      // Fakes the duration of fading-in and fading-out normal ripples.
+      // The fade-out duration has been added to ensure that didn't start fading out.
+      tick(RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+      tick(RIPPLE_FADE_OUT_DURATION);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    }));
+
+    it('should not hide ripples while animating.', fakeAsync(() => {
+      // Calculates the duration for fading-in and fading-out the ripple.
+      let hideDuration = RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION;
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      tick(hideDuration - 10);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      tick(10);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    }));
+
     it('creates ripples when manually triggered', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
 
@@ -270,6 +303,23 @@ describe('MdRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     }));
 
+   it('should remove ripples that are not done fading-in', fakeAsync(() => {
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+      rippleDirective.launch(0, 0);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      tick(RIPPLE_FADE_IN_DURATION / 2);
+
+      rippleDirective.fadeOutAll();
+
+      tick(RIPPLE_FADE_OUT_DURATION);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to be active after calling fadeOutAll.');
+    }));
+
   });
 
   describe('configuring behavior', () => {