refactor(cdk/overlay): keep global overlays inside the container

Keeps global overlays inside the overlay container since it can be breaking for users to move them out.

(cherry picked from commit 8e1890b)

Author: crisbeto

goldens/cdk/overlay/index.api.md

@@ -267,7 +267,7 @@ export function createCloseScrollStrategy(injector: Injector, config?: CloseScro
 export function createFlexibleConnectedPositionStrategy(injector: Injector, origin: FlexibleConnectedPositionStrategyOrigin): FlexibleConnectedPositionStrategy;
 
 // @public
-export function createGlobalPositionStrategy(injector: Injector): GlobalPositionStrategy;
+export function createGlobalPositionStrategy(_injector: Injector): GlobalPositionStrategy;
 
 // @public
 export function createNoopScrollStrategy(): NoopScrollStrategy;
@@ -327,7 +327,6 @@ export class FullscreenOverlayContainer extends OverlayContainer implements OnDe
 
 // @public
 export class GlobalPositionStrategy implements PositionStrategy {
-    constructor(injector?: Injector);
     apply(): void;
     // (undocumented)
     attach(overlayRef: OverlayRef): void;
@@ -336,7 +335,6 @@ export class GlobalPositionStrategy implements PositionStrategy {
     centerVertically(offset?: string): this;
     dispose(): void;
     end(value?: string): this;
-    getPopoverInsertionPoint(): Element;
     // @deprecated
     height(value?: string): this;
     left(value?: string): this;
@@ -525,7 +523,7 @@ export interface PositionStrategy {
     attach(overlayRef: OverlayRef): void;
     detach?(): void;
     dispose(): void;
-    getPopoverInsertionPoint?(): Element;
+    getPopoverInsertionPoint?(): Element | null;
 }
 
 // @public

src/cdk/overlay/overlay-ref.ts

@@ -405,8 +405,12 @@ export class OverlayRef implements PortalOutlet {
 
   private _attachHost() {
     if (!this._host.parentElement) {
-      if (this._config.usePopover && this._positionStrategy?.getPopoverInsertionPoint) {
-        this._positionStrategy.getPopoverInsertionPoint().after(this._host);
+      const customInsertionPoint = this._config.usePopover
+        ? this._positionStrategy?.getPopoverInsertionPoint?.()
+        : null;
+
+      if (customInsertionPoint) {
+        customInsertionPoint.after(this._host);
       } else {
         this._previousHostParent?.appendChild(this._host);
       }

src/cdk/overlay/overlay.ts

@@ -67,8 +67,12 @@ export function createOverlayRef(injector: Injector, config?: OverlayConfig): Ov
     host.classList.add('cdk-overlay-popover');
   }
 
-  if (overlayConfig.usePopover && overlayConfig.positionStrategy?.getPopoverInsertionPoint) {
-    overlayConfig.positionStrategy.getPopoverInsertionPoint().after(host);
+  const customInsertionPoint = overlayConfig.usePopover
+    ? overlayConfig.positionStrategy?.getPopoverInsertionPoint?.()
+    : null;
+
+  if (customInsertionPoint) {
+    customInsertionPoint.after(host);
   } else {
     overlayContainer.getContainerElement().appendChild(host);
   }

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

@@ -7,8 +7,6 @@ import {
   OverlayRef,
   createOverlayRef,
   createGlobalPositionStrategy,
-  GlobalPositionStrategy,
-  OverlayContainer,
 } from '../index';
 
 describe('GlobalPositonStrategy', () => {
@@ -472,50 +470,6 @@ describe('GlobalPositonStrategy', () => {
     expect(elementStyle.marginRight).toBe('');
     expect(parentStyle.justifyContent).toBe('flex-end');
   });
-
-  describe('DOM location', () => {
-    let positionStrategy: GlobalPositionStrategy;
-    let containerElement: HTMLElement;
-
-    beforeEach(() => {
-      containerElement = TestBed.inject(OverlayContainer).getContainerElement();
-      positionStrategy = createGlobalPositionStrategy(injector);
-    });
-
-    it('should place the overlay inside the overlay container by default', () => {
-      attachOverlay({positionStrategy, usePopover: false});
-      expect(containerElement.contains(overlayRef.hostElement)).toBe(true);
-      expect(overlayRef.hostElement.getAttribute('popover')).toBeFalsy();
-    });
-
-    it('should be able to opt into placing the overlay inside a popover element', () => {
-      if (!('showPopover' in document.body)) {
-        return;
-      }
-
-      attachOverlay({positionStrategy, usePopover: true});
-
-      expect(containerElement.contains(overlayRef.hostElement)).toBe(false);
-      expect(document.body.lastChild).toBe(overlayRef.hostElement);
-      expect(overlayRef.hostElement.getAttribute('popover')).toBe('manual');
-    });
-
-    it('should re-attach the popover at the end of the body', () => {
-      if (!('showPopover' in document.body)) {
-        return;
-      }
-
-      attachOverlay({positionStrategy, usePopover: true});
-      expect(document.body.lastChild).toBe(overlayRef.hostElement);
-
-      overlayRef.detach();
-      TestBed.inject(ApplicationRef).tick();
-      expect(overlayRef.hostElement.parentNode).toBeFalsy();
-
-      overlayRef.attach(portal);
-      expect(document.body.lastChild).toBe(overlayRef.hostElement);
-    });
-  });
 });
 
 @Component({

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {DOCUMENT, Injector} from '@angular/core';
+import {Injector} from '@angular/core';
 import {OverlayRef} from '../overlay-ref';
 import {PositionStrategy} from './position-strategy';
 
@@ -17,8 +17,8 @@ const wrapperClass = 'cdk-global-overlay-wrapper';
  * Creates a global position strategy.
  * @param injector Injector used to resolve dependencies for the strategy.
  */
-export function createGlobalPositionStrategy(injector: Injector): GlobalPositionStrategy {
-  return new GlobalPositionStrategy(injector);
+export function createGlobalPositionStrategy(_injector: Injector): GlobalPositionStrategy {
+  return new GlobalPositionStrategy();
 }
 
 /**
@@ -39,13 +39,6 @@ export class GlobalPositionStrategy implements PositionStrategy {
   private _width = '';
   private _height = '';
   private _isDisposed = false;
-  private _document: Document;
-
-  constructor(injector?: Injector) {
-    // TODO(crisbeto): injector should be required, but some internal apps
-    // don't go through `createGlobalPositionStrategy` so they don't provide it.
-    this._document = injector?.get(DOCUMENT) || document;
-  }
 
   attach(overlayRef: OverlayRef): void {
     const config = overlayRef.getConfig();
@@ -274,9 +267,4 @@ export class GlobalPositionStrategy implements PositionStrategy {
     this._overlayRef = null!;
     this._isDisposed = true;
   }
-
-  /** @docs-private */
-  getPopoverInsertionPoint(): Element {
-    return this._document.body.lastChild as Element;
-  }
 }

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

@@ -26,5 +26,5 @@ export interface PositionStrategy {
    * Gets the element in the DOM after which to insert
    * the overlay when it is rendered out as a popover.
    */
-  getPopoverInsertionPoint?(): Element;
+  getPopoverInsertionPoint?(): Element | null;
 }