fix(dialog): backdrop not being removed if it doesn't have transitions

Fixes the dialog's backdrop not being removed if it's transition have been disabled. Fixes #1607.
angular · Nov 10, 2016 · c68ea6e · c68ea6e
1 parent 547a75d
commit c68ea6e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts
@@ -92,7 +92,9 @@ export class OverlayRef implements PortalHost {
 
     // Add class to fade-in the backdrop after one frame.
     requestAnimationFrame(() => {
-      this._backdropElement.classList.add('md-overlay-backdrop-showing');
+      if (this._backdropElement) {
+        this._backdropElement.classList.add('md-overlay-backdrop-showing');
+      }
     });
   }
 
@@ -101,18 +103,29 @@ export class OverlayRef implements PortalHost {
     let backdropToDetach = this._backdropElement;
 
     if (backdropToDetach) {
+      let onTransitionEnd = () => {
+        if (backdropToDetach) {
+          if (backdropToDetach.parentNode) {
+            backdropToDetach.parentNode.removeChild(backdropToDetach);
+          }
+
+          // It is possible that a new portal has been attached to this overlay since we started
+          // removing the backdrop. If that is the case, only clear the backdrop reference if it
+          // is still the same instance that we started to remove.
+          if (this._backdropElement == backdropToDetach) {
+            this._backdropElement = null;
+          }
+        }
+      };
+
       backdropToDetach.classList.remove('md-overlay-backdrop-showing');
       backdropToDetach.classList.remove(this._state.backdropClass);
-      backdropToDetach.addEventListener('transitionend', () => {
-        backdropToDetach.parentNode.removeChild(backdropToDetach);
-
-        // It is possible that a new portal has been attached to this overlay since we started
-        // removing the backdrop. If that is the case, only clear the backdrop reference if it
-        // is still the same instance that we started to remove.
-        if (this._backdropElement == backdropToDetach) {
-          this._backdropElement = null;
-        }
-      });
+      backdropToDetach.addEventListener('transitionend', onTransitionEnd);
+
+      // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
+      // In this case we make it unclickable and we try to remove it after a delay.
+      backdropToDetach.style.pointerEvents = 'none';
+      setTimeout(onTransitionEnd, 500);
     }
   }
 }

diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
@@ -5,6 +5,7 @@ import {
   flushMicrotasks,
   ComponentFixture,
   TestBed,
+  tick,
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
@@ -207,6 +208,7 @@ describe('MdDialog', () => {
           .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
 
       dialogRef.close();
+      tick(500);
       viewContainerFixture.detectChanges();
       flushMicrotasks();