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

Author: adolgachev

goldens/cdk/overlay/index.api.md

@@ -54,6 +54,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     growAfterOpen: boolean;
     hasBackdrop: boolean;
     height: number | string;
+    insertOverlayAfter?: ElementRef;
     lockPosition: boolean;
     minHeight: number | string;
     minWidth: number | string;
@@ -92,7 +93,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     viewportMargin: ViewportMargin;
     width: number | string;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkConnectedOverlay, "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", ["cdkConnectedOverlay"], { "origin": { "alias": "cdkConnectedOverlayOrigin"; "required": false; }; "positions": { "alias": "cdkConnectedOverlayPositions"; "required": false; }; "positionStrategy": { "alias": "cdkConnectedOverlayPositionStrategy"; "required": false; }; "offsetX": { "alias": "cdkConnectedOverlayOffsetX"; "required": false; }; "offsetY": { "alias": "cdkConnectedOverlayOffsetY"; "required": false; }; "width": { "alias": "cdkConnectedOverlayWidth"; "required": false; }; "height": { "alias": "cdkConnectedOverlayHeight"; "required": false; }; "minWidth": { "alias": "cdkConnectedOverlayMinWidth"; "required": false; }; "minHeight": { "alias": "cdkConnectedOverlayMinHeight"; "required": false; }; "backdropClass": { "alias": "cdkConnectedOverlayBackdropClass"; "required": false; }; "panelClass": { "alias": "cdkConnectedOverlayPanelClass"; "required": false; }; "viewportMargin": { "alias": "cdkConnectedOverlayViewportMargin"; "required": false; }; "scrollStrategy": { "alias": "cdkConnectedOverlayScrollStrategy"; "required": false; }; "open": { "alias": "cdkConnectedOverlayOpen"; "required": false; }; "disableClose": { "alias": "cdkConnectedOverlayDisableClose"; "required": false; }; "transformOriginSelector": { "alias": "cdkConnectedOverlayTransformOriginOn"; "required": false; }; "hasBackdrop": { "alias": "cdkConnectedOverlayHasBackdrop"; "required": false; }; "lockPosition": { "alias": "cdkConnectedOverlayLockPosition"; "required": false; }; "flexibleDimensions": { "alias": "cdkConnectedOverlayFlexibleDimensions"; "required": false; }; "growAfterOpen": { "alias": "cdkConnectedOverlayGrowAfterOpen"; "required": false; }; "push": { "alias": "cdkConnectedOverlayPush"; "required": false; }; "disposeOnNavigation": { "alias": "cdkConnectedOverlayDisposeOnNavigation"; "required": false; }; }, { "backdropClick": "backdropClick"; "positionChange": "positionChange"; "attach": "attach"; "detach": "detach"; "overlayKeydown": "overlayKeydown"; "overlayOutsideClick": "overlayOutsideClick"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkConnectedOverlay, "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", ["cdkConnectedOverlay"], { "origin": { "alias": "cdkConnectedOverlayOrigin"; "required": false; }; "positions": { "alias": "cdkConnectedOverlayPositions"; "required": false; }; "positionStrategy": { "alias": "cdkConnectedOverlayPositionStrategy"; "required": false; }; "offsetX": { "alias": "cdkConnectedOverlayOffsetX"; "required": false; }; "offsetY": { "alias": "cdkConnectedOverlayOffsetY"; "required": false; }; "width": { "alias": "cdkConnectedOverlayWidth"; "required": false; }; "height": { "alias": "cdkConnectedOverlayHeight"; "required": false; }; "minWidth": { "alias": "cdkConnectedOverlayMinWidth"; "required": false; }; "minHeight": { "alias": "cdkConnectedOverlayMinHeight"; "required": false; }; "backdropClass": { "alias": "cdkConnectedOverlayBackdropClass"; "required": false; }; "panelClass": { "alias": "cdkConnectedOverlayPanelClass"; "required": false; }; "viewportMargin": { "alias": "cdkConnectedOverlayViewportMargin"; "required": false; }; "scrollStrategy": { "alias": "cdkConnectedOverlayScrollStrategy"; "required": false; }; "open": { "alias": "cdkConnectedOverlayOpen"; "required": false; }; "disableClose": { "alias": "cdkConnectedOverlayDisableClose"; "required": false; }; "transformOriginSelector": { "alias": "cdkConnectedOverlayTransformOriginOn"; "required": false; }; "hasBackdrop": { "alias": "cdkConnectedOverlayHasBackdrop"; "required": false; }; "lockPosition": { "alias": "cdkConnectedOverlayLockPosition"; "required": false; }; "flexibleDimensions": { "alias": "cdkConnectedOverlayFlexibleDimensions"; "required": false; }; "growAfterOpen": { "alias": "cdkConnectedOverlayGrowAfterOpen"; "required": false; }; "insertOverlayAfter": { "alias": "cdkConnectedOverlayInsertAfter"; "required": false; }; "push": { "alias": "cdkConnectedOverlayPush"; "required": false; }; "disposeOnNavigation": { "alias": "cdkConnectedOverlayDisposeOnNavigation"; "required": false; }; }, { "backdropClick": "backdropClick"; "positionChange": "positionChange"; "attach": "attach"; "detach": "detach"; "overlayKeydown": "overlayKeydown"; "overlayOutsideClick": "overlayOutsideClick"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkConnectedOverlay, never>;
 }
@@ -324,6 +325,7 @@ export class OverlayConfig {
     disposeOnNavigation?: boolean;
     hasBackdrop?: boolean;
     height?: number | string;
+    insertOverlayAfter?: ElementRef;
     maxHeight?: number | string;
     maxWidth?: number | string;
     minHeight?: number | string;

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-directives.ts

@@ -209,6 +209,10 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input({alias: 'cdkConnectedOverlayGrowAfterOpen', transform: booleanAttribute})
   growAfterOpen: boolean = false;
 
+  /** Whether or not the overlay should attach a backdrop. */
+  @Input('cdkConnectedOverlayInsertAfter')
+  insertOverlayAfter?: ElementRef;
+
   /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */
   @Input({alias: 'cdkConnectedOverlayPush', transform: booleanAttribute}) push: boolean = false;
 
@@ -327,6 +331,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       scrollStrategy: this.scrollStrategy,
       hasBackdrop: this.hasBackdrop,
       disposeOnNavigation: this.disposeOnNavigation,
+      insertOverlayAfter: this.insertOverlayAfter,
     });
 
     if (this.width || this.width === 0) {

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);