fix(material-experimental/mdc-snack-bar): avoid multiple snack bars on the page if opened in quick succession

Fixes an issue where opening a snack bar while the previous one was being animated caused the former to remain in the DOM. The problem was that MDC always waits for an animation, even if it is interrupted.

Author: crisbeto

src/material-experimental/mdc-snack-bar/snack-bar-container.ts

@@ -29,7 +29,7 @@ import {
 } from '@angular/core';
 import {MatSnackBarConfig, _SnackBarContainer} from '@angular/material/snack-bar';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {MDCSnackbarAdapter, MDCSnackbarFoundation} from '@material/snackbar';
+import {MDCSnackbarAdapter, MDCSnackbarFoundation, cssClasses} from '@material/snackbar';
 import {Platform} from '@angular/cdk/platform';
 import {Observable, Subject} from 'rxjs';
 
@@ -98,10 +98,7 @@ export class MatSnackBarContainer
     addClass: (className: string) => this._setClass(className, true),
     removeClass: (className: string) => this._setClass(className, false),
     announce: () => {},
-    notifyClosed: () => {
-      this._onExit.next();
-      this._mdcFoundation.destroy();
-    },
+    notifyClosed: () => this._finishExit(),
     notifyClosing: () => {},
     notifyOpened: () => this._onEnter.next(),
     notifyOpening: () => {},
@@ -184,16 +181,24 @@ export class MatSnackBarContainer
   }
 
   exit(): Observable<void> {
-    // It's common for snack bars to be opened by random outside calls like HTTP requests or
-    // errors. Run inside the NgZone to ensure that it functions correctly.
-    this._ngZone.run(() => {
-      this._exiting = true;
-      this._mdcFoundation.close();
+    const classList = this._elementRef.nativeElement.classList;
 
-      // If the snack bar hasn't been announced by the time it exits it wouldn't have been open
-      // long enough to visually read it either, so clear the timeout for announcing.
-      clearTimeout(this._announceTimeoutId);
-    });
+    // MDC won't complete the closing sequence if it starts while opening hasn't finished.
+    // If that's the case, destroy immediately to ensure that our stream emits as expected.
+    if (classList.contains(cssClasses.OPENING) || !classList.contains(cssClasses.OPEN)) {
+      this._finishExit();
+    } else {
+      // It's common for snack bars to be opened by random outside calls like HTTP requests or
+      // errors. Run inside the NgZone to ensure that it functions correctly.
+      this._ngZone.run(() => {
+        this._exiting = true;
+        this._mdcFoundation.close();
+      });
+    }
+
+    // If the snack bar hasn't been announced by the time it exits it wouldn't have been open
+    // long enough to visually read it either, so clear the timeout for announcing.
+    clearTimeout(this._announceTimeoutId);
 
     return this._onExit;
   }
@@ -236,6 +241,13 @@ export class MatSnackBarContainer
     }
   }
 
+  /** Finishes the exit sequence of the container. */
+  private _finishExit() {
+    this._onExit.next();
+    this._onExit.complete();
+    this._mdcFoundation.destroy();
+  }
+
   /**
    * Starts a timeout to move the snack bar content to the live region so screen readers will
    * announce it.

src/material-experimental/mdc-snack-bar/snack-bar.spec.ts

@@ -288,15 +288,16 @@ describe('MatSnackBar', () => {
 
     let snackBarRef = snackBar.open(simpleMessage, undefined, config);
     viewContainerFixture.detectChanges();
+    flush();
     expect(overlayContainerElement.childElementCount)
       .withContext('Expected overlay container element to have at least one child')
       .toBeGreaterThan(0);
 
     snackBarRef.afterDismissed().subscribe({complete: dismissCompleteSpy});
+    const messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
 
     snackBarRef.dismiss();
     viewContainerFixture.detectChanges();
-    const messageElement = overlayContainerElement.querySelector('mat-snack-bar-container')!;
     expect(messageElement.hasAttribute('mat-exit'))
       .withContext('Expected the snackbar container to have the "exit" attribute upon dismiss')
       .toBe(true);
@@ -587,6 +588,16 @@ describe('MatSnackBar', () => {
     flush();
   }));
 
+  it('should only keep one snack bar in the DOM if multiple are opened at the same time', fakeAsync(() => {
+    for (let i = 0; i < 10; i++) {
+      snackBar.open('Snack time!', 'Chew');
+      viewContainerFixture.detectChanges();
+    }
+
+    flush();
+    expect(overlayContainerElement.querySelectorAll('mat-snack-bar-container').length).toBe(1);
+  }));
+
   describe('with custom component', () => {
     it('should open a custom component', () => {
       const snackBarRef = snackBar.openFromComponent(BurritosNotification);

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

@@ -651,6 +651,16 @@ describe('MatSnackBar', () => {
     flush();
   }));
 
+  it('should only keep one snack bar in the DOM if multiple are opened at the same time', fakeAsync(() => {
+    for (let i = 0; i < 10; i++) {
+      snackBar.open('Snack time!', 'Chew');
+      viewContainerFixture.detectChanges();
+    }
+
+    flush();
+    expect(overlayContainerElement.querySelectorAll('snack-bar-container').length).toBe(1);
+  }));
+
   describe('with custom component', () => {
     it('should open a custom component', () => {
       const snackBarRef = snackBar.openFromComponent(BurritosNotification);