feat(cdk/overlay): Add option to insert overlay after an element instead of at root

Author: adolgachev

src/cdk/overlay/overlay-config.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {ElementRef} from '@angular/core';
 import {PositionStrategy} from './position/position-strategy';
 import {Direction, Directionality} from '../bidi';
 import {ScrollStrategy, NoopScrollStrategy} from './scroll/index';
@@ -30,6 +31,9 @@ export class OverlayConfig {
   /** Whether to disable any built-in animations. */
   disableAnimations?: boolean;
 
+  /** If specified, insert overlay after this element, instead of using the global overlay container. */
+  insertOverlayAfter?: ElementRef;
+
   /** The width of the overlay panel. If a number is provided, pixel units are assumed. */
   width?: number | string;
 

src/cdk/overlay/overlay.ts

@@ -48,13 +48,21 @@ export function createOverlayRef(injector: Injector, config?: OverlayConfig): Ov
   const appRef = injector.get(ApplicationRef);
   const directionality = injector.get(Directionality);
 
+  // Create the overlay pane and a parent which will then be attached to the document.
   const host = doc.createElement('div');
   const pane = doc.createElement('div');
-
   pane.id = idGenerator.getId('cdk-overlay-');
   pane.classList.add('cdk-overlay-pane');
   host.appendChild(pane);
-  overlayContainer.getContainerElement().appendChild(host);
+
+  // Insert after the specified element, or onto the global overlay container.
+  if (config?.insertOverlayAfter) {
+    const element = config.insertOverlayAfter.nativeElement;
+    element.after(host);
+    element.parentElement.style.position = 'relative';
+  } else {
+    overlayContainer.getContainerElement().appendChild(host);
+  }
 
   const portalOutlet = new DomPortalOutlet(pane, appRef, injector);
   const overlayConfig = new OverlayConfig(config);

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

@@ -581,6 +581,14 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;
     }
 
+    // Adjust the overly position when it is placed inline relative to its parent.
+    const insertOverlayAfter = this._overlayRef.getConfig().insertOverlayAfter;
+    if (insertOverlayAfter) {
+      const rect = insertOverlayAfter!.nativeElement.parentElement.getBoundingClientRect();
+      overlayStartX -= rect.left;
+      overlayStartY -= rect.top;
+    }
+
     // The (x, y) coordinates of the overlay.
     return {
       x: originPoint.x + overlayStartX,
@@ -889,11 +897,26 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     if (this._hasExactPosition()) {
       styles.top = styles.left = '0';
       styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = '';
-      styles.width = styles.height = '100%';
+
+      if (this._overlayRef.getConfig().insertOverlayAfter) {
+        styles.width = coerceCssPixelValue(boundingBoxRect.width);
+        styles.height = coerceCssPixelValue(boundingBoxRect.height);
+      } else {
+        // TODO(andreyd): can most likley remove this for common case
+        styles.width = styles.height = '100%';
+      }
     } else {
       const maxHeight = this._overlayRef.getConfig().maxHeight;
       const maxWidth = this._overlayRef.getConfig().maxWidth;
 
+      // Adjust the overly position when it is placed inline relative to its parent.
+      const insertOverlayAfter = this._overlayRef.getConfig().insertOverlayAfter;
+      if (insertOverlayAfter) {
+        const rect = insertOverlayAfter!.nativeElement.parentElement.getBoundingClientRect();
+        boundingBoxRect.left -= rect.left;
+        boundingBoxRect.top -= rect.top;
+      }
+
       styles.height = coerceCssPixelValue(boundingBoxRect.height);
       styles.top = coerceCssPixelValue(boundingBoxRect.top);
       styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom);