fix(overlay): restore previous host element before attaching (#17855)

Author: dirkluijk

src/cdk/overlay/overlay-ref.ts

@@ -114,15 +114,15 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
   attach(portal: Portal<any>): any {
     let attachResult = this._portalOutlet.attach(portal);
 
-    if (this._positionStrategy) {
-      this._positionStrategy.attach(this);
-    }
-
     // Update the pane element with the given configuration.
     if (!this._host.parentElement && this._previousHostParent) {
       this._previousHostParent.appendChild(this._host);
     }
 
+    if (this._positionStrategy) {
+      this._positionStrategy.attach(this);
+    }
+
     this._updateStackingOrder();
     this._updateElementSize();
     this._updateElementDirection();

src/cdk/overlay/overlay.spec.ts

@@ -444,6 +444,29 @@ describe('Overlay', () => {
       expect(overlayContainerElement.querySelectorAll('.fake-positioned').length).toBe(1);
     }));
 
+    it('should have the overlay in the DOM in position strategy when reattaching', fakeAsync(() => {
+      let overlayPresentInDom = false;
+
+      config.positionStrategy = {
+        attach: (ref: OverlayRef) => overlayPresentInDom = !!ref.hostElement.parentElement,
+        apply: () => {},
+        dispose: () => {}
+      };
+
+      const overlayRef = overlay.create(config);
+
+      overlayRef.attach(componentPortal);
+      expect(overlayPresentInDom).toBeTruthy('Expected host element to be attached to the DOM.');
+
+      overlayRef.detach();
+      zone.simulateZoneExit();
+      tick();
+
+      overlayRef.attach(componentPortal);
+
+      expect(overlayPresentInDom).toBeTruthy('Expected host element to be attached to the DOM.');
+    }));
+
     it('should not apply the position if it detaches before the zone stabilizes', fakeAsync(() => {
       config.positionStrategy = new FakePositionStrategy();