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,30 @@ 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');
+    extraContainer.setAttribute('platform', 'browser');
+    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,21 @@ 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);
+    const oppositePlatformContainers = this._document.querySelectorAll(
+        `.${containerClass}[platform="${isBrowser ? 'server' : 'browser'}"]`);
 
-    // 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]);
+    // 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);
+    container.setAttribute('platform', isBrowser ? 'browser' : 'server');
     this._document.body.appendChild(container);
     this._containerElement = container;
   }

src/material-experimental/mdc-select/BUILD.bazel

@@ -66,6 +66,7 @@ ng_test_library(
         ":mdc-select",
         "//src/cdk-experimental/testing",
         "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/testing",
         "//src/material/form-field",

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

@@ -1,9 +1,10 @@
 import {HarnessLoader} from '@angular/cdk-experimental/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
 import {Component} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule, FormControl, Validators} from '@angular/forms';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {MatSelectModule as MatMdcSelectModule} from '../index';
@@ -13,6 +14,7 @@ import {MatSelectHarness as MatMdcSelectHarness} from './mdc-select-harness';
 let fixture: ComponentFixture<SelectHarnessTest>;
 let loader: HarnessLoader;
 let harness: typeof MatSelectHarness;
+let overlayContainer: OverlayContainer;
 
 describe('MatSelectHarness', () => {
   describe('non-MDC-based', () => {
@@ -31,6 +33,9 @@ describe('MatSelectHarness', () => {
       fixture.detectChanges();
       loader = TestbedHarnessEnvironment.loader(fixture);
       harness = MatSelectHarness;
+      inject([OverlayContainer], (oc: OverlayContainer) => {
+        overlayContainer = oc;
+      })();
     });
 
     runTests();
@@ -63,6 +68,11 @@ describe('MatSelectHarness', () => {
 
 /** Shared tests to run on both the original and MDC-based select. */
 function runTests() {
+  afterEach(() => {
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
+  });
+
   it('should load all select harnesses', async () => {
     const selects = await loader.getAllHarnesses(harness);
     expect(selects.length).toBe(4);
@@ -244,13 +254,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">
@@ -260,7 +268,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>
@@ -301,4 +308,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;