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

Currently we clear all overlay containers when we create a new one as a way to avoid duplicate content coming in from the server. Our current approach is a little too aggressive, because it can pick up containers from different apps. These changes add an extra attribute to the container so that we can determine which platform it's coming from.

Fixes #16851.

Author: crisbeto

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,15 +53,29 @@ 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();
 
     expect(document.querySelectorAll('.cdk-overlay-container').length).toBe(1);
   });
+
+  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,6 +15,7 @@ import {
   Optional,
   SkipSelf,
 } from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
 
 
 /** Container inside which all overlays will render. */
@@ -23,13 +24,21 @@ 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 +61,28 @@ 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) {
+      const oppositePlatformContainers =
+          this._document.querySelectorAll(`.${containerClass}[platform="server"]`);
+
+      // 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);
+
+    if (!isBrowser) {
+      container.setAttribute('platform', 'server');
+    }
+
     this._document.body.appendChild(container);
     this._containerElement = container;
   }

src/material-experimental/mdc-select/harness/select-harness.spec.ts

@@ -21,6 +21,9 @@ describe('MatSelectHarness', () => {
     beforeEach(async () => {
       await prepareTests(MatSelectModule, SelectHarnessTest);
       harness = MatSelectHarness;
+      inject([OverlayContainer], (oc: OverlayContainer) => {
+        overlayContainer = oc;
+      })();
     });
 
     runTests();
@@ -250,13 +253,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">
@@ -266,7 +267,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>
@@ -307,4 +307,3 @@ class SelectHarnessTest {
     }
   ];
 }
-

tools/public_api_guard/cdk/overlay.d.ts

@@ -134,7 +134,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;
@@ -202,7 +203,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;