fixup! WIP: attempt to use MutationObserver to detach overlay

Author: mmalerba

src/cdk/overlay/overlay-ref.ts

@@ -44,6 +44,8 @@ export class OverlayRef implements PortalOutlet {
   private _scrollStrategy: ScrollStrategy | undefined;
   private _locationChanges: SubscriptionLike = Subscription.EMPTY;
   private _backdropRef: BackdropRef | null = null;
+  private _detachContentMutationObserver: MutationObserver | undefined;
+  private _detachContentAfterRenderRef: AfterRenderRef | undefined;
 
   /**
    * Reference to the parent of the `_host` at the time it was detached. Used to restore
@@ -163,7 +165,7 @@ export class OverlayRef implements PortalOutlet {
 
     // Only emit the `attachments` event once all other setup is done.
     this._attachments.next();
-    this._detachWhenEmptyMutationObserver?.disconnect();
+    this._completeDetachContent();
 
     // Track this overlay by the keyboard dispatcher
     this._keyboardDispatcher.add(this);
@@ -224,7 +226,7 @@ export class OverlayRef implements PortalOutlet {
 
     // Only emit after everything is detached.
     this._detachments.next();
-    this._detachWhenEmptyMutationObserver?.disconnect();
+    this._completeDetachContent();
 
     // Remove this overlay from keyboard dispatcher tracking.
     this._keyboardDispatcher.remove(this);
@@ -264,7 +266,7 @@ export class OverlayRef implements PortalOutlet {
     }
 
     this._detachments.complete();
-    this._detachWhenEmptyMutationObserver?.disconnect();
+    this._completeDetachContent();
   }
 
   /** Whether the overlay has attached content. */
@@ -470,7 +472,20 @@ export class OverlayRef implements PortalOutlet {
     }
   }
 
-  private _detachWhenEmptyMutationObserver: MutationObserver | null = null;
+  /** Detaches the overlay once the content finishes animating and is removed from the DOM. */
+  private _detachContentWhenEmpty() {
+    // Attempt to detach on the next render.
+    this._detachContentAfterRenderRef = afterNextRender(() => this._detachContent(), {
+      injector: this._injector,
+    });
+    // Otherwise wait until the content finishes animating out and detach.
+    if (globalThis.MutationObserver && this._pane) {
+      this._detachContentMutationObserver ||= new globalThis.MutationObserver(() => {
+        this._detachContent();
+      });
+      this._detachContentMutationObserver.observe(this._pane, {childList: true});
+    }
+  }
 
   private _detachContent() {
     // Needs a couple of checks for the pane and host, because
@@ -485,19 +500,14 @@ export class OverlayRef implements PortalOutlet {
         this._host.remove();
       }
 
-      this._detachWhenEmptyMutationObserver?.disconnect();
+      this._completeDetachContent();
     }
   }
 
-  /** Detaches the overlay content next time the zone stabilizes. */
-  private _detachContentWhenEmpty() {
-    if (globalThis.MutationObserver && this._pane) {
-      this._detachWhenEmptyMutationObserver ||= new globalThis.MutationObserver(() => {
-        this._detachContent();
-      });
-      this._detachWhenEmptyMutationObserver.observe(this._pane, {childList: true});
-    }
-    this._detachContent();
+  private _completeDetachContent() {
+    this._detachContentAfterRenderRef?.destroy();
+    this._detachContentAfterRenderRef = undefined;
+    this._detachContentMutationObserver?.disconnect();
   }
 
   /** Disposes of a scroll strategy. */