refactor(overlay): stop moving to body container & deprecate outlet by wnvko · Pull Request #16989 · IgniteUI/igniteui-angular

wnvko · 2026-03-05T08:41:21Z

Closes #16825
Closes #17041
Related #16861

With this PR we are introducing keepInPlace property in OverlaySettings. When set to true overlay will not move the element to be shown out of its position. Instead the element will be wrapped in a content element and in a wrapper element. The new property default value is false to keep the current behavior.

With this PR we also deprecate the outlet property of OverlaySettings. This is not needed anymore as overlay element could be kept in its original position via the new keepInPlace property.

Next steps:

Remove the outlet.
Make keepInPlace default value true and deprecate it.
Remove keepInPlace and always keep the overlay element at its original position.

Additional information (check all that apply):

Checklist:

All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them

Copilot

Pull request overview

Introduces an opt-in keepInPlace flag for OverlaySettings to prevent overlay content from being moved to a centralized overlay container, and begins deprecating OverlaySettings.outlet in favor of the new behavior.

Changes:

Added keepInPlace?: boolean to OverlaySettings and implemented in-place wrapping/unwrapping logic in IgxOverlayService.
Deprecated OverlaySettings.outlet and updated multiple feature READMEs + changelog to document the new option.
Updated grid/pivot-grid filtering overlay settings and adjusted dialog/overlay tests to account for in-place wrapping behavior.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
projects/igniteui-angular/core/src/services/overlay/utilities.ts	Adds `keepInPlace` to `OverlaySettings`; marks `outlet` as deprecated.
projects/igniteui-angular/core/src/services/overlay/overlay.ts	Implements in-place wrapping path for overlays + cleanup changes.
projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts	Adds unit tests validating keep-in-place wrapping/unwrapping and mixed modes.
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts	Sets `keepInPlace` on grid filter and advanced filtering overlay settings.
projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts	Sets `keepInPlace` on pivot grid ESF filter overlay settings.
projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts	Defaults toggle attach to `{ keepInPlace: true, ...overlaySettings }`.
projects/igniteui-angular/dialog/src/dialog/dialog.component.spec.ts	Updates assertions to locate wrapper within the component host when in-place wrapping is used.
projects/igniteui-angular/core/src/services/overlay/README.md	Documents `keepInPlace` and deprecates `outlet` in docs.
projects/igniteui-angular/core/src/services/overlay/position/README.md	Notes outlet deprecation in positioning docs.
projects/igniteui-angular/drop-down/src/drop-down/autocomplete/README.md	Updates autocomplete overlay settings docs; notes outlet deprecation.
projects/igniteui-angular/directives/src/directives/toggle/README.md	Deprecates `igxToggleOutlet` docs and adds `keepInPlace` guidance.
projects/igniteui-angular/date-picker/src/date-picker/README.md	Marks date-picker `outlet` as deprecated in docs.
projects/igniteui-angular/date-picker/src/date-range-picker/README.md	Marks date-range-picker `outlet` as deprecated in docs.
CHANGELOG.md	Adds an entry for the new `keepInPlace` feature and `outlet` deprecation.

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts

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

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

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

Copilot

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 26 comments.

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

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

projects/igniteui-angular/dialog/src/dialog/dialog.component.spec.ts

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts

projects/igniteui-angular/grids/core/src/common/grid.interface.ts

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

projects/igniteui-angular/drop-down/src/drop-down/autocomplete/README.md

projects/igniteui-angular/directives/src/directives/toggle/README.md

projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts

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

projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts

…ts-position

damyanpetev

Might need to discuss the additional container properties, as I missed how that strategy worked before and those might be redundant, which will shift a few more things around.

projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts

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

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

projects/igniteui-angular/grids/grid/src/grid.component.html

CHANGELOG.md

…ts-position

projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts

src/app/overlay/overlay.sample.ts

…ts-position

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

projects/igniteui-angular/grids/grid/src/grid.component.html

damyanpetev · 2026-03-23T08:54:01Z

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

    /**
     * Generates an Id. Provide this Id when calling the `show(id)` method
     *
+     * @note If `viewContainerRef` is not provided, the component is created in the root scope and attached to the document body.


Eh, that's the overload with the viewContainerRef, if you want to add this message, perhaps add it to the other overload without and guide users to prefer using this one.

damyanpetev · 2026-03-23T08:57:20Z

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

+        info.wrapperElement = this.getWrapperElement();
+        const contentElement = this.getContentElement(info.wrapperElement, info.settings.modal);
+        if (info.settings.positionStrategy instanceof ContainerPositionStrategy) {
+            this.moveElementToContainer(info);


Should be mentioned this is to be a temporary measure, no? Also not really moving, merely adding an extra absolute positioned wrapper

damyanpetev · 2026-03-23T09:14:15Z

...iteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts

    @HostListener('keydown.alt.arrowup', ['$event'])
    public onEscape(event) {
        event.preventDefault();
+        event.stopPropagation();


Wouldn't mind a comment why this is here - i.e. to avoid the host picker handler doing this again and possibly should be refactored to avoid the conflicting handlers

damyanpetev · 2026-03-23T09:15:55Z

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

+
+    private get viewContainerRef(): ViewContainerRef {
+        return this._viewContainerRef;
+    }


Mind reverting the getter now that's not needed anymore?

damyanpetev · 2026-03-23T09:18:14Z

...eui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts

+    /**
+     * @deprecated in version 21.2.0. Overlays now use the HTML Popover API and no longer move to the document
+     * body by default, so using outlet is also no longer needed - just define the overlay in the intended
+     * DOM tree position instead or use `container` property instead.
+     */
    @ViewChild('overlayOutlet', { read: IgxOverlayOutletDirective, static: true })
    public overlayOutlet: IgxOverlayOutletDirective;


That's internal component, so this should just be refactored away and removed

damyanpetev · 2026-03-23T09:30:35Z

projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts

+    /**
+     * Gets/Sets the container used for the element.
+     *
+     * @remarks
+     *  `container` is an instance of `HTMLElement`.
+     */
+    @Input()
+    public useContainer: boolean;


Gets/Sets the container used for the element.

Um, moe like setting if the snackbar should position itself relatively to a container (instead of a viewport)

Kinda want to consider alternative names for this one too - possibly position: 'global | relative' = 'global' or just a relative bool flag. Not settled on that yet

damyanpetev · 2026-03-23T10:03:52Z

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

     */
    public showSnackbarFor(index: number) {
        this.addRowSnackbar.actionText = index === -1 ? '' : this.resourceStrings.igx_grid_snackbar_addrow_actiontext;
+        this.addRowSnackbar.useContainer = true;


Could just add this in markup

this should be done in grid, hierarchical grid, tree grid and so on. This is why I prefer to have it at single place here.

…ts-position

wnvko marked this pull request as draft March 5, 2026 08:45

wnvko added 🛠️ status: in-development Issues and PRs with active development on them ❌ status: awaiting-test PRs awaiting manual verification and removed 🛠️ status: in-development Issues and PRs with active development on them labels Mar 5, 2026

wnvko requested review from Copilot, damyanpetev and simeonoff March 5, 2026 09:14

Copilot started reviewing on behalf of wnvko March 5, 2026 09:15 View session

wnvko added overlay version: 21.1.x labels Mar 5, 2026

wnvko marked this pull request as ready for review March 5, 2026 09:15

Copilot AI reviewed Mar 5, 2026

View reviewed changes

mtsvyatkova self-assigned this Mar 5, 2026

mtsvyatkova added 💥 status: in-test PRs currently being tested and removed ❌ status: awaiting-test PRs awaiting manual verification labels Mar 5, 2026

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch from 1b73b1b to 73ce1fa Compare March 5, 2026 13:22

simeonoff previously approved these changes Mar 10, 2026

View reviewed changes

wnvko dismissed simeonoff’s stale review via 724248f March 11, 2026 12:20

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch from 51e13b3 to 62135bb Compare March 12, 2026 10:27

wnvko requested review from Copilot and simeonoff March 12, 2026 10:28

Copilot started reviewing on behalf of wnvko March 12, 2026 10:28 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch from 32e9669 to 7b59366 Compare March 12, 2026 11:02

feat(overlay): do not move overlay element

66c36b1

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch from 7b59366 to 66c36b1 Compare March 12, 2026 11:06

github-code-quality bot found potential problems Mar 13, 2026

View reviewed changes

projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts Fixed Show fixed Hide fixed

feat(overlay): remove outlet from container position strategy

91d3085

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch from 2ded560 to 91d3085 Compare March 13, 2026 12:47

docs(notifications): update snackbar and toast samples

4293ad4

wnvko and others added 2 commits March 13, 2026 15:05

Merge branch 'master' into mvenkov/do-not-move-overlay-element-from-i…

3e0818d

…ts-position

Merge branch 'master' into mvenkov/do-not-move-overlay-element-from-i…

f34760b

…ts-position

damyanpetev changed the title ~~Do not move overlay element out of its place~~ refactor(overlay): stop moving to body container & deprecate outlet Mar 13, 2026

damyanpetev added squash-merge Merge PR with "Squash and Merge" option ❗ behavior-change and removed version: 21.1.x labels Mar 13, 2026

damyanpetev requested changes Mar 13, 2026

View reviewed changes

wnvko added 2 commits March 16, 2026 09:42

chore(overlay): address PR comments

c7a6641

fix(outlet): fix container strategy

5dee6e6

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch 2 times, most recently from 6345acb to 2d07772 Compare March 18, 2026 08:25

Merge branch 'master' into mvenkov/do-not-move-overlay-element-from-i…

5ac8768

…ts-position

wnvko force-pushed the mvenkov/do-not-move-overlay-element-from-its-position branch from 2d07772 to 5ac8768 Compare March 18, 2026 09:29

chore(outlet): move deprecation warning to the end of dev docs

7724bde

wnvko requested a review from damyanpetev March 18, 2026 10:47

wnvko added 2 commits March 18, 2026 13:19

fix(overlay): fix date-range VCR and clean grids

051d39f

feat(overlay): in container strategy position element at place

3c32e6b

github-code-quality bot found potential problems Mar 19, 2026

View reviewed changes

projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts Fixed Show fixed Hide fixed

src/app/overlay/overlay.sample.ts Fixed Show fixed Hide fixed

wnvko added 2 commits March 20, 2026 08:21

Merge branch 'master' into mvenkov/do-not-move-overlay-element-from-i…

ff99c62

…ts-position

chore(overlay): address PR comments

65eff12

simeonoff mentioned this pull request Mar 23, 2026

Grid dragged row colors are off #16861

Open

damyanpetev reviewed Mar 23, 2026

View reviewed changes

wnvko added 3 commits March 23, 2026 16:51

chore(overlay): address PR comments

a1687c1

refactor(overlay): clean up wrapper placement and removal

7177733

Merge branch 'master' into mvenkov/do-not-move-overlay-element-from-i…

c599951

…ts-position

Conversation

wnvko commented Mar 5, 2026 • edited by simeonoff Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional information (check all that apply):

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damyanpetev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wnvko commented Mar 5, 2026 •

edited by simeonoff

Loading