Skip to content

Commit aa5925b

Browse files
crisbetotinayuangao
authored andcommitted
fix(overlay): ensure proper stacking order when attaching (#3581)
Fixes a case where the order of overlays can be invalid if one overlay is detached, while another is destroyed. Next time both of them are open, the one that was disposed will end up beneath the freshly-created one, no matter the order of attachment. This PR adds some logic that will ensure that all each newly-opened overlay will be at the top of the stacking order. Fixes #3574.
1 parent c29f8ca commit aa5925b

File tree

2 files changed

+43
-4
lines changed

2 files changed

+43
-4
lines changed

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,21 @@ export class OverlayRef implements PortalHost {
3030
* @returns The portal attachment result.
3131
*/
3232
attach(portal: Portal<any>): any {
33-
if (this._state.hasBackdrop) {
34-
this._attachBackdrop();
35-
}
36-
3733
let attachResult = this._portalHost.attach(portal);
3834

3935
// Update the pane element with the given state configuration.
36+
this._updateStackingOrder();
4037
this.updateSize();
4138
this.updateDirection();
4239
this.updatePosition();
4340

4441
// Enable pointer events for the overlay pane element.
4542
this._togglePointerEvents(true);
4643

44+
if (this._state.hasBackdrop) {
45+
this._attachBackdrop();
46+
}
47+
4748
return attachResult;
4849
}
4950

@@ -153,6 +154,19 @@ export class OverlayRef implements PortalHost {
153154
});
154155
}
155156

157+
/**
158+
* Updates the stacking order of the element, moving it to the top if necessary.
159+
* This is required in cases where one overlay was detached, while another one,
160+
* that should be behind it, was destroyed. The next time both of them are opened,
161+
* the stacking will be wrong, because the detached element's pane will still be
162+
* in its original DOM position.
163+
*/
164+
private _updateStackingOrder() {
165+
if (this._pane.nextSibling) {
166+
this._pane.parentNode.appendChild(this._pane);
167+
}
168+
}
169+
156170
/** Detaches the backdrop (if any) associated with the overlay. */
157171
detachBackdrop(): void {
158172
let backdropToDetach = this._backdropElement;

src/lib/core/overlay/overlay.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,31 @@ describe('Overlay', () => {
100100
expect(overlayContainerElement.textContent).toBe('');
101101
});
102102

103+
it('should ensure that the most-recently-attached overlay is on top', () => {
104+
let pizzaOverlayRef = overlay.create();
105+
let cakeOverlayRef = overlay.create();
106+
107+
pizzaOverlayRef.attach(componentPortal);
108+
cakeOverlayRef.attach(templatePortal);
109+
110+
expect(pizzaOverlayRef.overlayElement.nextSibling)
111+
.toBeTruthy('Expected pizza to be on the bottom.');
112+
expect(cakeOverlayRef.overlayElement.nextSibling)
113+
.toBeFalsy('Expected cake to be on top.');
114+
115+
pizzaOverlayRef.dispose();
116+
cakeOverlayRef.detach();
117+
118+
pizzaOverlayRef = overlay.create();
119+
pizzaOverlayRef.attach(componentPortal);
120+
cakeOverlayRef.attach(templatePortal);
121+
122+
expect(pizzaOverlayRef.overlayElement.nextSibling)
123+
.toBeTruthy('Expected pizza to still be on the bottom.');
124+
expect(cakeOverlayRef.overlayElement.nextSibling)
125+
.toBeFalsy('Expected cake to still be on top.');
126+
});
127+
103128
it('should set the direction', () => {
104129
const state = new OverlayState();
105130
state.direction = 'rtl';

0 commit comments

Comments
 (0)