fix(overlay): clear element reference on destroy (#10486)

Clears out the references to the overlay element once the overlay ref is destroyed, avoiding the detached DOM tree potentially being retained in memory. This also revealed a few tests where we were referring to leftover overlay refs from previous tests.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -186,6 +186,8 @@ export class OverlayRef implements PortalOutlet {
       this._host = null!;
     }
 
+    this._pane = null!;
+
     if (isAttached) {
       this._detachments.next();
     }

src/cdk/overlay/overlay.spec.ts

@@ -259,7 +259,7 @@ describe('Overlay', () => {
   });
 
   it('should default to the ltr direction', () => {
-    const overlayRef = overlay.create({hasBackdrop: true});
+    const overlayRef = overlay.create();
     expect(overlayRef.getConfig().direction).toBe('ltr');
   });
 
@@ -268,6 +268,22 @@ describe('Overlay', () => {
     expect(overlayRef.getConfig().direction).toBe('ltr');
   });
 
+  it('should clear out all DOM element references on dispose', fakeAsync(() => {
+    const overlayRef = overlay.create({hasBackdrop: true});
+    overlayRef.attach(componentPortal);
+
+    expect(overlayRef.hostElement).toBeTruthy('Expected overlay host to be defined.');
+    expect(overlayRef.overlayElement).toBeTruthy('Expected overlay element to be defined.');
+    expect(overlayRef.backdropElement).toBeTruthy('Expected backdrop element to be defined.');
+
+    overlayRef.dispose();
+    tick(500);
+
+    expect(overlayRef.hostElement).toBeFalsy('Expected overlay host not to be referenced.');
+    expect(overlayRef.overlayElement).toBeFalsy('Expected overlay element not to be referenced.');
+    expect(overlayRef.backdropElement).toBeFalsy('Expected backdrop element not to be referenced.');
+  }));
+
   describe('positioning', () => {
     let config: OverlayConfig;
 

src/cdk/overlay/position/connected-position-strategy.spec.ts

@@ -280,7 +280,6 @@ describe('ConnectedPositionStrategy', () => {
 
       it('should position a panel properly when rtl', () => {
         // must make the overlay longer than the origin to properly test attachment
-        overlayRef.overlayElement.style.width = `500px`;
         originRect = originElement.getBoundingClientRect();
         positionStrategy = overlay.position().connectedTo(
             fakeElementRef,
@@ -289,6 +288,7 @@ describe('ConnectedPositionStrategy', () => {
             .withDirection('rtl');
 
         attachOverlay(positionStrategy);
+        overlayRef.overlayElement.style.width = `500px`;
 
         let overlayRect = overlayRef.overlayElement.getBoundingClientRect();
         expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom));

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -344,9 +344,6 @@ describe('FlexibleConnectedPositionStrategy', () => {
       });
 
       it('should position a panel properly when rtl', () => {
-        // must make the overlay longer than the origin to properly test attachment
-        overlayRef.overlayElement.style.width = `500px`;
-
         const originRect = originElement.getBoundingClientRect();
 
         positionStrategy.withPositions([{
@@ -361,6 +358,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
           direction: 'rtl'
         });
 
+        // must make the overlay longer than the origin to properly test attachment
+        overlayRef.overlayElement.style.width = `500px`;
+
         const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
         expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom));
         expect(Math.floor(overlayRect.right)).toBe(Math.floor(originRect.right));

src/cdk/overlay/position/global-position-strategy.spec.ts

@@ -166,11 +166,13 @@ describe('GlobalPositonStrategy', () => {
       positionStrategy: overlay.position().global()
     });
 
-    expect(document.body.contains(overlayRef.overlayElement.parentNode!)).toBe(true);
+    const parent = overlayRef.overlayElement.parentNode!;
+
+    expect(document.body.contains(parent)).toBe(true);
 
     overlayRef.dispose();
 
-    expect(document.body.contains(overlayRef.overlayElement.parentNode!)).toBe(false);
+    expect(document.body.contains(parent)).toBe(false);
   });
 
   it('should set the element width', () => {