fix(dialog): prevent dialog from opening while another dialog is anim…

…ating (#5769) Prevents dialogs from being opened while other dialogs are animating. Fixes #5713.
angular · Jul 25, 2017 · 36f708c · 36f708c · tom-b-wright · Sep 23, 2017
1 parent b105039
commit 36f708c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
@@ -68,6 +68,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
     '[attr.aria-labelledby]': '_ariaLabelledBy',
     '[attr.aria-describedby]': '_config?.ariaDescribedBy || null',
     '[@slideDialog]': '_state',
+    '(@slideDialog.start)': 'this._isAnimating = true',
     '(@slideDialog.done)': '_onAnimationDone($event)',
   },
 })
@@ -96,6 +97,9 @@ export class MdDialogContainer extends BasePortalHost {
   /** ID of the element that should be considered as the dialog's label. */
   _ariaLabelledBy: string | null = null;
 
+  /** Whether the container is currently mid-animation. */
+  _isAnimating = false;
+
   constructor(
     private _ngZone: NgZone,
     private _elementRef: ElementRef,
@@ -175,5 +179,7 @@ export class MdDialogContainer extends BasePortalHost {
       this._restoreFocus();
       this._onAnimationStateChange.complete();
     }
+
+    this._isAnimating = false;
   }
 }
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
@@ -97,6 +97,11 @@ export class MdDialogRef<T> {
     return this;
   }
 
+  /** Returns whether the dialog is animating. */
+  _isAnimating(): boolean {
+    return this._containerInstance._isAnimating;
+  }
+
   /** Fetches the position strategy object from the overlay ref. */
   private _getPositionStrategy(): GlobalPositionStrategy {
     return this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;

diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
@@ -115,11 +115,19 @@ export class MdDialog {
    */
   open<T>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
           config?: MdDialogConfig): MdDialogRef<T> {
+
+    const inProgressDialog = this._openDialogs.find(dialog => dialog._isAnimating());
+
+    // If there's a dialog that is in the process of being opened, return it instead.
+    if (inProgressDialog) {
+      return inProgressDialog;
+    }
+
     config = _applyConfigDefaults(config);
 
-    let overlayRef = this._createOverlay(config);
-    let dialogContainer = this._attachDialogContainer(overlayRef, config);
-    let dialogRef =
+    const overlayRef = this._createOverlay(config);
+    const dialogContainer = this._attachDialogContainer(overlayRef, config);
+    const dialogRef =
         this._attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);
 
     if (!this._openDialogs.length) {