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

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.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -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

@@ -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', () => {