refactor(cdk/overlay): account for popovers in the global position strategy

Updates the global position strategy to account for it being placed in a popover.

Author: crisbeto

goldens/cdk/overlay/index.api.md

@@ -270,7 +270,7 @@ export class FullscreenOverlayContainer extends OverlayContainer implements OnDe
 
 // @public
 export class GlobalPositionStrategy implements PositionStrategy {
-    constructor(injector: Injector);
+    constructor(injector?: Injector);
     apply(): void;
     // (undocumented)
     attach(overlayRef: OverlayRef): void;

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

@@ -7,11 +7,14 @@ import {
   OverlayRef,
   createOverlayRef,
   createGlobalPositionStrategy,
+  GlobalPositionStrategy,
+  OverlayContainer,
 } from '../index';
 
 describe('GlobalPositonStrategy', () => {
   let overlayRef: OverlayRef;
   let injector: Injector;
+  let portal: ComponentPortal<BlankPortal>;
 
   beforeEach(() => {
     injector = TestBed.inject(Injector);
@@ -25,7 +28,7 @@ describe('GlobalPositonStrategy', () => {
   });
 
   function attachOverlay(config: OverlayConfig): OverlayRef {
-    const portal = new ComponentPortal(BlankPortal);
+    portal = new ComponentPortal(BlankPortal);
     overlayRef = createOverlayRef(injector, config);
     overlayRef.attach(portal);
     TestBed.inject(ApplicationRef).tick();
@@ -469,6 +472,50 @@ 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 {Injector} from '@angular/core';
+import {DOCUMENT, Injector} from '@angular/core';
 import {OverlayRef} from '../overlay-ref';
 import {PositionStrategy} from './position-strategy';
 
@@ -17,10 +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 {
-  // Note: `injector` is unused, but we may need it in
-  // the future which would introduce a breaking change.
-  return new GlobalPositionStrategy();
+export function createGlobalPositionStrategy(injector: Injector): GlobalPositionStrategy {
+  return new GlobalPositionStrategy(injector);
 }
 
 /**
@@ -41,6 +39,13 @@ 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();
@@ -269,4 +274,9 @@ export class GlobalPositionStrategy implements PositionStrategy {
     this._overlayRef = null!;
     this._isDisposed = true;
   }
+
+  /** @docs-private */
+  getPopoverInsertionPoint(): Element {
+    return this._document.body.lastChild as Element;
+  }
 }