fix(snack-bar): Clear duration timeout on dismiss

When a duration is passed to MdSnackBar.prototype.openFromComponent(),
a timeout is created. This timeout is now cleared when dismissing the
snackbar.

Fixes #4859

Author: Sven Reglitzki

src/lib/snack-bar/snack-bar-ref.ts

@@ -31,6 +31,12 @@ export class MdSnackBarRef<T> {
   /** Subject for notifying the user that the snack bar action was called. */
   private _onAction: Subject<any> = new Subject();
 
+  /**
+   * Timeout ID for the duration setTimeout call. Used to clear the timeout if the snackbar is 
+   * dismissed before the duration passes.
+   */
+  private _durationTimeoutId: number;
+
   constructor(instance: T,
               containerInstance: MdSnackBarContainer,
               private _overlayRef: OverlayRef) {
@@ -47,6 +53,12 @@ export class MdSnackBarRef<T> {
     if (!this._afterClosed.closed) {
       this.containerInstance.exit();
     }
+    clearTimeout(this._durationTimeoutId);
+  }
+
+  /** Dismisses the snack bar after some duration */
+  _dismissAfter(duration: number): void {
+    this._durationTimeoutId = setTimeout(() => this.dismiss(), duration);
   }
 
   /** Marks the snackbar action clicked. */

src/lib/snack-bar/snack-bar.spec.ts

@@ -5,7 +5,8 @@ import {
   TestBed,
   fakeAsync,
   flushMicrotasks,
-  tick
+  tick,
+  flush
 } from '@angular/core/testing';
 import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
@@ -328,6 +329,19 @@ describe('MdSnackBar', () => {
     expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
   }));
 
+  it('should clear the dismiss timeout when dismissed before timeout expiration', fakeAsync(() => {
+    let config = new MdSnackBarConfig();
+    config.duration = 1000;
+    let snackBarRef = snackBar.open('content', 'test', config);
+
+    setTimeout(() => snackBar.dismiss(), 500);
+
+    const elapsed = flush();
+    viewContainerFixture.detectChanges();
+    flushMicrotasks();
+    expect(elapsed).toEqual(500, 'The timeout microtask should have been cancelled.');
+  }));
+
   it('should add extra classes to the container', () => {
     snackBar.open(simpleMessage, simpleActionLabel, {
       viewContainerRef: testViewContainerRef,

src/lib/snack-bar/snack-bar.ts

@@ -81,7 +81,7 @@ export class MdSnackBar {
     // If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
     if (config.duration > 0) {
       snackBarRef.afterOpened().subscribe(() => {
-        setTimeout(() => snackBarRef.dismiss(), config.duration);
+        snackBarRef._dismissAfter(config.duration);
       });
     }