feat(overlay): do not move overlay element out of its place

Author: wnvko

CHANGELOG.md

@@ -7,17 +7,9 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 
 - `IgxOverlayService`
-    - Added `moveToOverlayContainer` property to `OverlaySettings`. When set to `false` (default), the overlay element stays in its original DOM position using the HTML Popover API to promote it to the top layer in-place. When set to `true`, the element is moved to the overlay container.
+    - The overlay service now always renders content in place using the HTML Popover API, eliminating the need for outlet containers.
 
-        ```typescript
-        const overlaySettings: OverlaySettings = {
-            moveToOverlayContainer: false,
-            positionStrategy: new ConnectedPositioningStrategy(),
-            scrollStrategy: new AbsoluteScrollStrategy()
-        };
-        ```
-
-    - **Deprecation** - The `outlet` property in `OverlaySettings` has been deprecated and will be removed in a future version. Set `moveToOverlayContainer` to `false` (or leave it unset) to keep the overlay in its original DOM position. The `IgxOverlayOutletDirective` and `igxToggleOutlet` input on `IgxToggleActionDirective` are also deprecated.
+    - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are all deprecated. The overlay service now always renders content in place using the HTML Popover API. These will be removed in a future version.
 
 ## 21.1.0
 

projects/igniteui-angular/core/src/services/overlay/README.md

@@ -78,8 +78,7 @@ this.overlay.show(component, overlaySettings);
 | scrollStrategy      | IScrollStrategy                         | Scroll strategy to use with this settings           |
 | modal               | boolean                                 | Set if the overlay should be in modal mode          |
 | closeOnOutsideClick | boolean                                 | Set if the overlay should closed on outside click   |
-| outlet              | IgxOverlayOutletDirective or ElementRef | **Deprecated.** Set `moveToOverlayContainer` to `false` (or leave it unset) to keep the overlay in its original DOM position. Sets the outlet container to attach the overlay to.   |
-| moveToOverlayContainer | boolean                              | When set to `false` (default), the overlay element stays in its original DOM position using the HTML Popover API to promote the element to the top layer in-place. When set to `true`, the element is moved to the overlay container. |
+| outlet              | IgxOverlayOutletDirective or ElementRef | **Deprecated.** No longer has any effect. The overlay service now always renders content in place using the HTML Popover API. This property will be removed in a future version. |
 
 ###### PositionSettings
 
@@ -136,7 +135,7 @@ this.overlay.show(component, overlaySettings);
 | Name            | Description                                                                     | Parameters |
 |-----------------|---------------------------------------------------------------------------------|------------|
 |getPointFromPositionsSettings| Calculates the point from which the overlay should start showing    |settings    |
-|createAbsoluteOverlaySettings| Creates overlay settings with global or container position strategy based on a preset position settings. **Note:** The `outlet` parameter is deprecated; set `moveToOverlayContainer` to `false` in the returned `OverlaySettings` to keep the overlay in place.    |position?, outlet?|
+|createAbsoluteOverlaySettings| Creates overlay settings with global or container position strategy based on a preset position settings. **Note:** The `outlet` parameter is deprecated and no longer has any effect. The overlay service now always renders content in place.    |position?, outlet?|
 |createRelativeOverlaySettings| Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings    |target, strategy?, position?|
 
 

projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts

@@ -117,7 +117,6 @@ export class IgxOverlayService implements OnDestroy {
 
     private _componentId = 0;
     private _overlayInfos: OverlayInfo[] = [];
-    private _overlayElement: HTMLElement;
     private _document: Document;
     private _keyPressEventListener: Subscription;
     private destroy$ = new Subject<boolean>();
@@ -334,14 +333,12 @@ export class IgxOverlayService implements OnDestroy {
         info.initialSize = { width: elementRect.width, height: elementRect.height };
         // Get the size before moving the container into the overlay so that it does not forget about inherited styles.
         this.getComponentSize(info);
-        if (!info.settings.moveToOverlayContainer &&
-            info.elementRef.nativeElement.parentElement &&
-            !info.settings.outlet) {
+        if (info.settings.outlet) {
+            this.moveElementToOutlet(info);
+        } else if (info.elementRef.nativeElement.parentElement) {
             this.wrapElementInPlace(info);
-            info.wrappedInPlace = true;
         } else {
-            info.hook = this.placeElementHook(info.elementRef.nativeElement);
-            this.moveElementToOverlay(info);
+            this.appendElementToDocument(info);
         }
         // Update the container size after wrapping/moving if there is size.
         if (info.size) {
@@ -626,6 +623,7 @@ export class IgxOverlayService implements OnDestroy {
                 if (createSettings) {
                     ({ injector: elementInjector, ...overlaySettings } = createSettings);
                 }
+                console.warn('Overlay component is created without a ViewContainerRef. The element will be outside the Angular component tree and may not inherit styles. Prefer using the ViewContainerRef overload or provide an outlet.');
                 dynamicComponent = createComponent(component, { environmentInjector, elementInjector });
                 this._appRef.attachView(dynamicComponent.hostView);
             }
@@ -656,10 +654,12 @@ export class IgxOverlayService implements OnDestroy {
         return hook;
     }
 
-    private moveElementToOverlay(info: OverlayInfo) {
+    private moveElementToOutlet(info: OverlayInfo) {
+        info.hook = this.placeElementHook(info.elementRef.nativeElement);
         info.wrapperElement = this.getWrapperElement();
         const contentElement = this.getContentElement(info.wrapperElement, info.settings.modal);
-        this.getOverlayElement(info).appendChild(info.wrapperElement);
+        const outlet = info.settings.outlet.nativeElement || info.settings.outlet;
+        outlet.appendChild(info.wrapperElement);
         contentElement.appendChild(info.elementRef.nativeElement);
     }
 
@@ -672,6 +672,14 @@ export class IgxOverlayService implements OnDestroy {
         contentElement.appendChild(element);
     }
 
+    private appendElementToDocument(info: OverlayInfo) {
+        info.wrapperElement = this.getWrapperElement();
+        const contentElement = this.getContentElement(info.wrapperElement, info.settings.modal);
+        this._document.body.appendChild(info.wrapperElement);
+        contentElement.appendChild(info.elementRef.nativeElement);
+        info.appendedToBody = true;
+    }
+
     private getWrapperElement(): HTMLElement {
         const wrapper: HTMLElement = this._document.createElement('div');
         wrapper.classList.add('igx-overlay__wrapper');
@@ -700,18 +708,6 @@ export class IgxOverlayService implements OnDestroy {
         return content;
     }
 
-    private getOverlayElement(info: OverlayInfo): HTMLElement {
-        if (info.settings.outlet) {
-            return info.settings.outlet.nativeElement || info.settings.outlet;
-        }
-        if (!this._overlayElement) {
-            this._overlayElement = this._document.createElement('div');
-            this._overlayElement.classList.add('igx-overlay');
-            this._document.body.appendChild(this._overlayElement);
-        }
-        return this._overlayElement;
-    }
-
     private updateSize(info: OverlayInfo) {
         if (info.componentRef) {
             //  if we are positioning component this is first time it gets visible
@@ -750,14 +746,18 @@ export class IgxOverlayService implements OnDestroy {
 
     private cleanUp(info: OverlayInfo) {
         const child: HTMLElement = info.elementRef.nativeElement;
-        if (info.wrappedInPlace) {
+        if (info.appendedToBody) {
+            // Element was appended to document body as a fallback (no outlet, no parent).
+            // Just remove the wrapper; the dynamic component will be destroyed below.
+            info.wrapperElement?.parentElement?.removeChild(info.wrapperElement);
+        } else if (!info.settings.outlet) {
             // Unwrap: move element back to wrapper's parent position, then remove wrapper
             if (info.wrapperElement?.parentElement) {
                 info.wrapperElement.parentElement.insertBefore(child, info.wrapperElement);
                 info.wrapperElement.parentElement.removeChild(info.wrapperElement);
             }
         } else {
-            const outlet = this.getOverlayElement(info);
+            const outlet = info.settings.outlet.nativeElement || info.settings.outlet;
             // if same element is shown in other overlay outlet will not contain
             // the element and we should not remove it form outlet
             if (outlet.contains(child)) {
@@ -778,12 +778,7 @@ export class IgxOverlayService implements OnDestroy {
         const index = this._overlayInfos.indexOf(info);
         this._overlayInfos.splice(index, 1);
 
-        // this._overlayElement.parentElement check just for tests that manually delete the element
         if (this._overlayInfos.length === 0) {
-            if (this._overlayElement && this._overlayElement.parentElement) {
-                this._overlayElement.parentElement.removeChild(this._overlayElement);
-                this._overlayElement = null;
-            }
             this.removeCloseOnEscapeListener();
         }
 

projects/igniteui-angular/core/src/services/overlay/overlay.ts

@@ -7,7 +7,7 @@ Position strategies determine where to display the component in the provided Igx
 |:---------------------------|:-------------------------|
 | HorizontalAlignment.Center | VerticalAlignment.Middle |
 
-2) **Container** - Positions the element inside the containing outlet based on the directions passed in through PositionSettings. These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection. **Note:** The `outlet` property in `OverlaySettings` is deprecated; set `moveToOverlayContainer` to `false` (or leave it unset) to keep overlays in their original DOM position instead. Defaults to:
+2) **Container** - Positions the element inside the containing outlet based on the directions passed in through PositionSettings. These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection. **Note:** The `outlet` property in `OverlaySettings` is deprecated and no longer has any effect. The overlay service now always renders content in place using the HTML Popover API. Defaults to:
 
 | horizontalDirection        | verticalDirection        |
 |:---------------------------|:-------------------------|

projects/igniteui-angular/core/src/services/overlay/position/README.md

@@ -132,10 +132,9 @@ export interface OverlaySettings {
     closeOnEscape?: boolean;
     /* blazorSuppress */
     /**
-     * @deprecated The `outlet` property is deprecated. There is no direct 1:1 replacement for attaching overlays to an arbitrary outlet
-     * container. If you only used `outlet` to keep the overlay in its current DOM position (i.e. not moved to the overlay container),
-     * set `moveToOverlayContainer` to `false` or leave it unset, as `false` is the default.
-     * Set the outlet container to attach the overlay to.
+     * @deprecated The `outlet` property is deprecated and no longer has any effect.
+     * The overlay service now always renders content in place using the HTML Popover API.
+     * This property will be removed in a future version.
      */
     outlet?: IgxOverlayOutletDirective | ElementRef;
     /**
@@ -144,13 +143,6 @@ export interface OverlaySettings {
      * Clicking on the elements in this collection will not close the overlay when closeOnOutsideClick = true.
      */
     excludeFromOutsideClick?: HTMLElement[];
-    /**
-     * When set to false (default), the overlay element stays in its original DOM position
-     * using the HTML Popover API to promote the element to the top layer in-place.
-     * When set to true, the element is moved to the overlay container.
-     * Defaults to false.
-     */
-    moveToOverlayContainer?: boolean;
 }
 
 export interface OverlayEventArgs extends IBaseEventArgs {
@@ -212,8 +204,8 @@ export interface OverlayInfo {
     transformY?: number;
     event?: Event;
     wrapperElement?: HTMLElement;
-    wrappedInPlace?: boolean;
-    size?: string
+    size?: string;
+    appendedToBody?: boolean
 }
 
 /** @hidden */

projects/igniteui-angular/core/src/services/overlay/utilities.ts

@@ -113,7 +113,7 @@ The date picker also supports binding through `ngModel` if two-way date-bind is
 | `overlaySettings` | Changes the default overlay settings used by the `IgxDatePickerComponent`. | OverlaySettings |
 | `placeholder` | Sets the placeholder text for empty input. | string |
 | `disabled` | Disables or enables the picker. | boolean |
-| `outlet` | **Deprecated.** Set `moveToOverlayContainer` to `false` in `overlaySettings` (or leave it unset) to keep the overlay in its original DOM position. The container used for the pop up element. | IgxOverlayOutletDirective \| ElementRef |
+| `outlet` | **Deprecated.** No longer has any effect. The overlay service now always renders content in place using the HTML Popover API. This property will be removed in a future version. | IgxOverlayOutletDirective \| ElementRef |
 | `type` | Determines how the picker will be styled. | IgxInputGroupType |
 | `spinLoop` | Determines if the currently spun date segment should loop over. | boolean |
 | `spinDelta` | Delta values used to increment or decrement each editor date part on spin actions. All values default to `1`. | DatePartDeltas |

projects/igniteui-angular/date-picker/src/date-picker/README.md

@@ -244,9 +244,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     public spinDelta: Pick<DatePartDeltas, 'date' | 'month' | 'year'>;
 
     /**
-     * @deprecated The `outlet` property is deprecated. There is no direct 1:1 replacement for attaching overlays to an arbitrary outlet
-     * container. If you only used `outlet` to keep the overlay in its current DOM position (i.e. not moved to the overlay container),
-     * set `moveToOverlayContainer` to `false` in `overlaySettings` to keep the overlay in its original DOM position.
+     * @deprecated The `outlet` property is deprecated and no longer has any effect.
+     * The overlay service now always renders content in place using the HTML Popover API.
+     * This property will be removed in a future version.
      *
      * Gets/Sets the container used for the popup element.
      *
@@ -510,14 +510,12 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         positionStrategy: new AutoPositionStrategy({
             openAnimation: fadeIn,
             closeAnimation: fadeOut
-        }),
-        moveToOverlayContainer: false
+        })
     };
     private _dialogOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: true,
-        closeOnEscape: true,
-        moveToOverlayContainer: false
+        closeOnEscape: true
     };
     private _calendarFormat: IFormattingOptions = {
         day: 'numeric',

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts

@@ -186,9 +186,9 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     }
 
     /**
-     * @deprecated The `outlet` property is deprecated. There is no direct 1:1 replacement for attaching overlays to an arbitrary outlet
-     * container. If you only used `outlet` to keep the overlay in its current DOM position (i.e. not moved to the overlay container),
-     * set `moveToOverlayContainer` to `false` in `overlaySettings` to keep the overlay in its original DOM position.
+     * @deprecated The `outlet` property is deprecated and no longer has any effect.
+     * The overlay service now always renders content in place using the HTML Popover API.
+     * This property will be removed in a future version.
      *
      * The container used for the pop-up element.
      *

projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts

@@ -116,7 +116,7 @@ With projected inputs:
 | mode             | PickerInteractionMode    | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. Default is `dialog` |
 | minValue | Date \| string | The minimum value in a valid range. |
 | maxValue | Date \| string | The maximum value in a valid range. |
-| outlet | IgxOverlayOutletDirective \| ElementRef<any> | **Deprecated.** Set `moveToOverlayContainer` to `false` in `overlaySettings` (or leave it unset) to keep the overlay in its original DOM position. Gets/Sets the container used for the popup element.
+| outlet | IgxOverlayOutletDirective \| ElementRef<any> | **Deprecated.** No longer has any effect. The overlay service now always renders content in place using the HTML Popover API. This property will be removed in a future version.
 | overlaySettings  | OverlaySettings    | Changes the default overlay settings used by the `IgxDateRangePickerComponent`. | 
 | placeholder      | string             | Sets the `placeholder` for single-input `IgxDateRangePickerComponent`. |
 | weekStart        | number             | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |