fix(cdk/overlay): avoid unnecessary timeouts when disposing of overlay (#23474)

The `OverlayRef.dispose` method is meant to destroy the overlay immediately, without waiting on any events, which is useful for tests or when the overlay has already animated away. The problem is that we use the `detachBackdrop` method which will animate the backdrop away and trigger a `setTimeout` in case the backdrop didn't animate.

These changes avoid timeouts by removing the backdrop immediately on destroy. This reduces the number of `flush` calls that we need to be done by the consumer.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -207,7 +207,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     }
 
     this._disposeScrollStrategy();
-    this.detachBackdrop();
+    this._disposeBackdrop(this._backdropElement);
     this._locationChanges.unsubscribe();
     this._keyboardDispatcher.remove(this);
     this._portalOutlet.dispose();
@@ -419,29 +419,19 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
 
   /** Detaches the backdrop (if any) associated with the overlay. */
   detachBackdrop(): void {
-    let backdropToDetach = this._backdropElement;
+    const backdropToDetach = this._backdropElement;
 
     if (!backdropToDetach) {
       return;
     }
 
     let timeoutId: number;
-    let finishDetach = () => {
+    const finishDetach = () => {
       // It may not be attached to anything in certain cases (e.g. unit tests).
       if (backdropToDetach) {
         backdropToDetach.removeEventListener('click', this._backdropClickHandler);
         backdropToDetach.removeEventListener('transitionend', finishDetach);
-
-        if (backdropToDetach.parentNode) {
-          backdropToDetach.parentNode.removeChild(backdropToDetach);
-        }
-      }
-
-      // It is possible that a new portal has been attached to this overlay since we started
-      // removing the backdrop. If that is the case, only clear the backdrop reference if it
-      // is still the same instance that we started to remove.
-      if (this._backdropElement == backdropToDetach) {
-        this._backdropElement = null;
+        this._disposeBackdrop(backdropToDetach);
       }
 
       if (this._config.backdropClass) {
@@ -518,6 +508,22 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
       }
     }
   }
+
+  /** Removes a backdrop element from the DOM. */
+  private _disposeBackdrop(backdrop: HTMLElement | null) {
+    if (backdrop) {
+      if (backdrop.parentNode) {
+        backdrop.parentNode.removeChild(backdrop);
+      }
+
+      // It is possible that a new portal has been attached to this overlay since we started
+      // removing the backdrop. If that is the case, only clear the backdrop reference if it
+      // is still the same instance that we started to remove.
+      if (this._backdropElement === backdrop) {
+        this._backdropElement = null;
+      }
+    }
+  }
 }
 
 

src/cdk/overlay/overlay.spec.ts

@@ -586,6 +586,28 @@ describe('Overlay', () => {
       expect(strategy.dispose).not.toHaveBeenCalled();
     }));
 
+    it('should not throw when disposing multiple times in a row', () => {
+      const overlayRef = overlay.create();
+      overlayRef.attach(componentPortal);
+
+      expect(overlayContainerElement.textContent).toContain('Pizza');
+
+      expect(() => {
+        overlayRef.dispose();
+        overlayRef.dispose();
+        overlayRef.dispose();
+      }).not.toThrow();
+    });
+
+    it('should not trigger timers when disposing of an overlay', fakeAsync(() => {
+      const overlayRef = overlay.create({hasBackdrop: true});
+      overlayRef.attach(templatePortal);
+      overlayRef.dispose();
+
+      // The assertion here is that `fakeAsync` doesn't flag
+      // any pending timeouts after the test is done.
+    }));
+
   });
 
   describe('size', () => {