fix(overlay): only clear duplicate containers from different platform

src/cdk/overlay/fullscreen-overlay-container.ts

@@ -9,6 +9,7 @@
 import {Injectable, Inject, OnDestroy} from '@angular/core';
 import {OverlayContainer} from './overlay-container';
 import {DOCUMENT} from '@angular/common';
+import {Platform} from '@angular/cdk/platform';
 
 
 /**
@@ -23,8 +24,14 @@ export class FullscreenOverlayContainer extends OverlayContainer implements OnDe
   private _fullScreenEventName: string | undefined;
   private _fullScreenListener: () => void;
 
-  constructor(@Inject(DOCUMENT) _document: any) {
-    super(_document);
+  constructor(
+    @Inject(DOCUMENT) _document: any,
+    /**
+     * @deprecated `platform` parameter to become required.
+     * @breaking-change 10.0.0
+     */
+    platform?: Platform) {
+    super(_document, platform);
   }
 
   ngOnDestroy() {

src/cdk/overlay/overlay-container.spec.ts

@@ -53,9 +53,10 @@ describe('OverlayContainer', () => {
         .toBe(false, 'Expected the overlay container not to have class "commander-shepard"');
   });
 
-  it('should ensure that there is only one overlay container on the page', () => {
+  it('should remove overlay containers from the server when on the browser', () => {
     const extraContainer = document.createElement('div');
     extraContainer.classList.add('cdk-overlay-container');
+    extraContainer.setAttribute('platform', 'server');
     document.body.appendChild(extraContainer);
 
     overlayContainer.getContainerElement();
@@ -65,6 +66,33 @@ describe('OverlayContainer', () => {
       extraContainer.parentNode.removeChild(extraContainer);
     }
   });
+
+  it('should remove overlay containers from other unit tests', () => {
+    const extraContainer = document.createElement('div');
+    extraContainer.classList.add('cdk-overlay-container');
+    extraContainer.setAttribute('platform', 'test');
+    document.body.appendChild(extraContainer);
+
+    overlayContainer.getContainerElement();
+    expect(document.querySelectorAll('.cdk-overlay-container').length).toBe(1);
+
+    if (extraContainer.parentNode) {
+      extraContainer.parentNode.removeChild(extraContainer);
+    }
+  });
+
+  it('should not remove extra containers that were created on the browser', () => {
+    const extraContainer = document.createElement('div');
+    extraContainer.classList.add('cdk-overlay-container');
+    document.body.appendChild(extraContainer);
+
+    overlayContainer.getContainerElement();
+
+    expect(document.querySelectorAll('.cdk-overlay-container').length).toBe(2);
+
+    extraContainer.parentNode!.removeChild(extraContainer);
+  });
+
 });
 
 /** Test-bed component that contains a TempatePortal and an ElementRef. */

src/cdk/overlay/overlay-container.ts

@@ -15,21 +15,36 @@ import {
   Optional,
   SkipSelf,
 } from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
 
+/**
+ * Whether we're in a testing environment.
+ * TODO(crisbeto): remove this once we have an overlay testing module.
+ */
+const isTestEnvironment: boolean = typeof window !== 'undefined' && !!window &&
+  !!((window as any).__karma__ || (window as any).jasmine);
 
 /** Container inside which all overlays will render. */
 @Injectable({providedIn: 'root'})
 export class OverlayContainer implements OnDestroy {
   protected _containerElement: HTMLElement;
   protected _document: Document;
 
-  constructor(@Inject(DOCUMENT) document: any) {
+  constructor(
+    @Inject(DOCUMENT) document: any,
+    /**
+     * @deprecated `platform` parameter to become required.
+     * @breaking-change 10.0.0
+     */
+    protected _platform?: Platform) {
     this._document = document;
   }
 
   ngOnDestroy() {
-    if (this._containerElement && this._containerElement.parentNode) {
-      this._containerElement.parentNode.removeChild(this._containerElement);
+    const container = this._containerElement;
+
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
     }
   }
 
@@ -52,16 +67,40 @@ export class OverlayContainer implements OnDestroy {
    * with the 'cdk-overlay-container' class on the document body.
    */
   protected _createContainer(): void {
+    // @breaking-change 10.0.0 Remove null check for `_platform`.
+    const isBrowser = this._platform ? this._platform.isBrowser : typeof window !== 'undefined';
     const containerClass = 'cdk-overlay-container';
-    const previousContainers = this._document.getElementsByClassName(containerClass);
 
-    // Remove any old containers. This can happen when transitioning from the server to the client.
-    for (let i = 0; i < previousContainers.length; i++) {
-      previousContainers[i].parentNode!.removeChild(previousContainers[i]);
+    if (isBrowser || isTestEnvironment) {
+      const oppositePlatformContainers =
+          this._document.querySelectorAll(`.${containerClass}[platform="server"], ` +
+                                          `.${containerClass}[platform="test"]`);
+
+      // Remove any old containers from the opposite platform.
+      // This can happen when transitioning from the server to the client.
+      for (let i = 0; i < oppositePlatformContainers.length; i++) {
+        oppositePlatformContainers[i].parentNode!.removeChild(oppositePlatformContainers[i]);
+      }
     }
 
     const container = this._document.createElement('div');
     container.classList.add(containerClass);
+
+    // A long time ago we kept adding new overlay containers whenever a new app was instantiated,
+    // but at some point we added logic which clears the duplicate ones in order to avoid leaks.
+    // The new logic was a little too aggressive since it was breaking some legitimate use cases.
+    // To mitigate the problem we made it so that only containers from a different platform are
+    // cleared, but the side-effect was that people started depending on the overly-aggressive
+    // logic to clean up their tests for them. Until we can introduce an overlay-specific testing
+    // module which does the cleanup, we try to detect that we're in a test environment and we
+    // always clear the container. See #17006.
+    // TODO(crisbeto): remove the test environment check once we have an overlay testing module.
+    if (isTestEnvironment) {
+      container.setAttribute('platform', 'test');
+    } else if (!isBrowser) {
+      container.setAttribute('platform', 'server');
+    }
+
     this._document.body.appendChild(container);
     this._containerElement = container;
   }

src/material/select/testing/shared.spec.ts

@@ -226,13 +226,11 @@ function getActiveElementId() {
         <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
       </mat-select>
     </mat-form-field>
-
     <mat-form-field>
       <mat-select multiple id="multiple-selection">
         <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
       </mat-select>
     </mat-form-field>
-
     <mat-form-field>
       <mat-select id="grouped">
         <mat-optgroup *ngFor="let group of stateGroups" [label]="group.name">
@@ -242,7 +240,6 @@ function getActiveElementId() {
         </mat-optgroup>
       </mat-select>
     </mat-form-field>
-
     <mat-form-field>
       <mat-select [formControl]="formControl" id="with-form-control">
         <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
@@ -283,4 +280,3 @@ class SelectHarnessTest {
     }
   ];
 }
-

tools/public_api_guard/cdk/overlay.d.ts

@@ -152,7 +152,8 @@ export declare type FlexibleConnectedPositionStrategyOrigin = ElementRef | HTMLE
 };
 
 export declare class FullscreenOverlayContainer extends OverlayContainer implements OnDestroy {
-    constructor(_document: any);
+    constructor(_document: any,
+    platform?: Platform);
     protected _createContainer(): void;
     getFullscreenElement(): Element;
     ngOnDestroy(): void;
@@ -224,7 +225,9 @@ export interface OverlayConnectionPosition {
 export declare class OverlayContainer implements OnDestroy {
     protected _containerElement: HTMLElement;
     protected _document: Document;
-    constructor(document: any);
+    protected _platform?: Platform | undefined;
+    constructor(document: any,
+    _platform?: Platform | undefined);
     protected _createContainer(): void;
     getContainerElement(): HTMLElement;
     ngOnDestroy(): void;