skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlay): wait for panel to detach before removing panelClass (#13199)

Browse Source 
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.
This commit is contained in:
Kristiyan Kostadinov
2018-10-02 22:20:16 +02:00
committed by vivian-hu
parent d6ba25fb1a
commit 238aef04c3
2 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cdk/overlay/overlay-ref.ts
+4 -4
View File
@@ -189,10 +189,6 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
this._config.scrollStrategy.disable();
}
if (this._config.panelClass) {
this._toggleClasses(this._pane, this._config.panelClass, false);
}
const detachmentResult = this._portalOutlet.detach();
// Only emit after everything is detached.
@@ -463,6 +459,10 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
// Needs a couple of checks for the pane and host, because
// they may have been removed by the time the zone stabilizes.
if (!this._pane || !this._host || this._pane.children.length === 0) {
if (this._pane && this._config.panelClass) {
this._toggleClasses(this._pane, this._config.panelClass, false);
}
if (this._host && this._host.parentElement) {
this._previousHostParent = this._host.parentElement;
this._previousHostParent.removeChild(this._host);
src/cdk/overlay/overlay.spec.ts
+27 -3
View File
@@ -758,17 +758,41 @@ describe('Overlay', () => {
viewContainerFixture.detectChanges();
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.classList).toContain('custom-panel-class');
expect(pane.classList).toContain('custom-panel-class', 'Expected class to be added');
overlayRef.detach();
zone.simulateZoneExit();
viewContainerFixture.detectChanges();
expect(pane.classList).not.toContain('custom-panel-class');
expect(pane.classList).not.toContain('custom-panel-class', 'Expected class to be removed');
overlayRef.attach(componentPortal);
viewContainerFixture.detectChanges();
expect(pane.classList).toContain('custom-panel-class');
expect(pane.classList).toContain('custom-panel-class', 'Expected class to be re-added');
});
it('should wait for the overlay to be detached before removing the panelClass', () => {
const config = new OverlayConfig({panelClass: 'custom-panel-class'});
const overlayRef = overlay.create(config);
overlayRef.attach(componentPortal);
viewContainerFixture.detectChanges();
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.classList).toContain('custom-panel-class', 'Expected class to be added');
overlayRef.detach();
viewContainerFixture.detectChanges();
expect(pane.classList)
.toContain('custom-panel-class', 'Expected class not to be removed immediately');
zone.simulateZoneExit();
expect(pane.classList)
.not.toContain('custom-panel-class', 'Expected class to be removed on stable');
});
});
describe('scroll strategy', () => {