Skip to content

Commit 714a91a

Browse files
committed
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.
1 parent 547a75d commit 714a91a

File tree

2 files changed

+20
-6
lines changed

2 files changed

+20
-6
lines changed

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ export class OverlayRef implements PortalHost {
9292

9393
// Add class to fade-in the backdrop after one frame.
9494
requestAnimationFrame(() => {
95-
this._backdropElement.classList.add('md-overlay-backdrop-showing');
95+
if (this._backdropElement) {
96+
this._backdropElement.classList.add('md-overlay-backdrop-showing');
97+
}
9698
});
9799
}
98100

@@ -101,18 +103,28 @@ export class OverlayRef implements PortalHost {
101103
let backdropToDetach = this._backdropElement;
102104

103105
if (backdropToDetach) {
104-
backdropToDetach.classList.remove('md-overlay-backdrop-showing');
105-
backdropToDetach.classList.remove(this._state.backdropClass);
106-
backdropToDetach.addEventListener('transitionend', () => {
107-
backdropToDetach.parentNode.removeChild(backdropToDetach);
106+
let onTransitionEnd = () => {
107+
// It may not be attached to anything in certain cases (e.g. unit tests).
108+
if (backdropToDetach && backdropToDetach.parentNode) {
109+
backdropToDetach.parentNode.removeChild(backdropToDetach);
110+
}
108111

109112
// It is possible that a new portal has been attached to this overlay since we started
110113
// removing the backdrop. If that is the case, only clear the backdrop reference if it
111114
// is still the same instance that we started to remove.
112115
if (this._backdropElement == backdropToDetach) {
113116
this._backdropElement = null;
114117
}
115-
});
118+
};
119+
120+
backdropToDetach.classList.remove('md-overlay-backdrop-showing');
121+
backdropToDetach.classList.remove(this._state.backdropClass);
122+
backdropToDetach.addEventListener('transitionend', onTransitionEnd);
123+
124+
// If the backdrop doesn't have a transition, the `transitionend` event won't fire.
125+
// In this case we make it unclickable and we try to remove it after a delay.
126+
backdropToDetach.style.pointerEvents = 'none';
127+
setTimeout(onTransitionEnd, 500);
116128
}
117129
}
118130
}

src/lib/dialog/dialog.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
flushMicrotasks,
66
ComponentFixture,
77
TestBed,
8+
tick,
89
} from '@angular/core/testing';
910
import {By} from '@angular/platform-browser';
1011
import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
@@ -207,6 +208,7 @@ describe('MdDialog', () => {
207208
.not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
208209

209210
dialogRef.close();
211+
tick(500);
210212
viewContainerFixture.detectChanges();
211213
flushMicrotasks();
212214

0 commit comments

Comments
 (0)