Skip to content

Commit 6515008

Browse files
committed
fix(overlay): wait for panel to detach before removing panelClass
Currently we remove the `panelClass` as soon as `detach` is called, however the pane may still be animating. These changes wait for the panel to be done animating and to be removed from the DOM, before removing the class. Fixes #13189.
1 parent 19ce1a1 commit 6515008

File tree

2 files changed

+31
-7
lines changed

2 files changed

+31
-7
lines changed

src/cdk/overlay/overlay-ref.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,10 +174,6 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
174174
this._config.scrollStrategy.disable();
175175
}
176176

177-
if (this._config.panelClass) {
178-
this._toggleClasses(this._pane, this._config.panelClass, false);
179-
}
180-
181177
const detachmentResult = this._portalOutlet.detach();
182178

183179
// Only emit after everything is detached.
@@ -426,6 +422,10 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
426422
// Needs a couple of checks for the pane and host, because
427423
// they may have been removed by the time the zone stabilizes.
428424
if (!this._pane || !this._host || this._pane.children.length === 0) {
425+
if (this._pane && this._config.panelClass) {
426+
this._toggleClasses(this._pane, this._config.panelClass, false);
427+
}
428+
429429
if (this._host && this._host.parentElement) {
430430
this._previousHostParent = this._host.parentElement;
431431
this._previousHostParent.removeChild(this._host);

src/cdk/overlay/overlay.spec.ts

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -674,17 +674,41 @@ describe('Overlay', () => {
674674
viewContainerFixture.detectChanges();
675675

676676
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
677-
expect(pane.classList).toContain('custom-panel-class');
677+
expect(pane.classList).toContain('custom-panel-class', 'Expected class to be added');
678678

679679
overlayRef.detach();
680+
zone.simulateZoneExit();
680681
viewContainerFixture.detectChanges();
681-
expect(pane.classList).not.toContain('custom-panel-class');
682+
expect(pane.classList).not.toContain('custom-panel-class', 'Expected class to be removed');
682683

683684
overlayRef.attach(componentPortal);
684685
viewContainerFixture.detectChanges();
685-
expect(pane.classList).toContain('custom-panel-class');
686+
expect(pane.classList).toContain('custom-panel-class', 'Expected class to be re-added');
687+
});
688+
689+
it('should wait for the overlay to be detached before removing the panelClass', () => {
690+
const config = new OverlayConfig({panelClass: 'custom-panel-class'});
691+
const overlayRef = overlay.create(config);
692+
693+
overlayRef.attach(componentPortal);
694+
viewContainerFixture.detectChanges();
695+
696+
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
697+
expect(pane.classList).toContain('custom-panel-class', 'Expected class to be added');
698+
699+
overlayRef.detach();
700+
viewContainerFixture.detectChanges();
701+
702+
expect(pane.classList)
703+
.toContain('custom-panel-class', 'Expected class not to be removed immediately');
704+
705+
zone.simulateZoneExit();
706+
707+
expect(pane.classList)
708+
.not.toContain('custom-panel-class', 'Expected class to be removed on stable');
686709
});
687710

711+
688712
});
689713

690714
describe('scroll strategy', () => {

0 commit comments

Comments
 (0)