From 79bacf2019f18daa7b81f1f320a6d811eb034d1c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 12 Jul 2018 16:42:06 +0200
Subject: [PATCH] fix(overlay): remove panelClass when the overlay is detached
 (#12142)

Removes the `panelClass` when the overlay is detached. This ensures that any overlay styling that targets the panel isn't left behind while the panel is detached.

Relates to #12099.
---
 src/cdk/overlay/overlay-ref.ts  |  6 +++++-
 src/cdk/overlay/overlay.spec.ts | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
index f55a36abcfb..3ff749565ed 100644
--- a/src/cdk/overlay/overlay-ref.ts
+++ b/src/cdk/overlay/overlay-ref.ts
@@ -164,12 +164,16 @@ 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.
     this._detachments.next();
 
-    // Remove this overlay from keyboard dispatcher tracking
+    // Remove this overlay from keyboard dispatcher tracking.
     this._keyboardDispatcher.remove(this);
 
     return detachmentResult;
diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts
index dbcfc6b51d6..bde5039aaf3 100644
--- a/src/cdk/overlay/overlay.spec.ts
+++ b/src/cdk/overlay/overlay.spec.ts
@@ -628,6 +628,26 @@ describe('Overlay', () => {
       expect(pane.classList).toContain('custom-class-one');
       expect(pane.classList).toContain('custom-class-two');
     });
+
+    it('should remove the custom panel class when the overlay is detached', () => {
+      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');
+
+      overlayRef.detach();
+      viewContainerFixture.detectChanges();
+      expect(pane.classList).not.toContain('custom-panel-class');
+
+      overlayRef.attach(componentPortal);
+      viewContainerFixture.detectChanges();
+      expect(pane.classList).toContain('custom-panel-class');
+    });
+
   });
 
   describe('scroll strategy', () => {