fix(ESF): move custom dialog out of ESF markup by wnvko · Pull Request #17136 · IgniteUI/igniteui-angular

wnvko · 2026-03-31T08:46:45Z

Right now the custom dialog shown in ESF is a child element of the excel-style-conditional-filter component. When custom dialog is shown its parent is closed. This makes the parent of the dialog invisible, marked with display: none. This effectively hides and the dialog. To fix this custom dialog is now removed from excel-style-conditional-filter component. Custom dialog is shown directly via overlay service and is provided as component.

Next step will be to remove the grid outlet used to show the custom dialog in the grid as this will not be needed anymore.

Closes #17039

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

...eui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts

…hub.com/IgniteUI/igniteui-angular into mvenkov/move-esf-dialog-out-of-dropdown

damyanpetev · 2026-03-31T13:45:47Z

...eui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts

        if (this.esf.overlayComponentId) {
            this.esf.hide();
        }
        this.subMenu.close();
-        this.customDialog.open(this.esf.mainDropdown.nativeElement);
+        this._overlayService.show(overlayId);


I know this PR merely moves things around to remove the outlet usage, but this component can really use some refactoring where the onSubMenuSelection is emitted upwards for the root ESF component to handle, close itself and spawn the dialog. And possibly some actual dialog and/or dialog ARIA would be nice. Just 2c

Copilot

Pull request overview

This PR addresses an Excel Style Filtering (ESF) rendering issue where the custom filter dialog could become hidden when its parent ESF component is closed (parent becomes display: none). The fix moves the custom dialog out of the igx-excel-style-conditional-filter markup and shows it via IgxOverlayService.

Changes:

Remove <igx-excel-style-custom-dialog> from excel-style-conditional-filter template and create/show it dynamically through IgxOverlayService.
Refactor the custom dialog component to no longer rely on IgxToggleDirective for open/close lifecycle.
Update affected grid filtering UI tests and helper utilities to match the new overlay behavior.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
projects/igniteui-angular/test-utils/grid-functions.spec.ts	Adjusts operator dropdown indexing used by ESF-related test helpers.
projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts	Updates ESF size-related tests to align with the new custom dialog hosting/overlay behavior.
projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts	Removes toggle-based overlay setup and switches to overlay-service-driven close behavior (incl. detach).
projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.html	Removes `igxToggle` host/event bindings from the dialog root element.
projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts	Dynamically attaches/initializes the custom dialog via `IgxOverlayService` instead of using a child component reference.
projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.html	Removes the embedded custom dialog element from the component template.

...eui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts

projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts

skrustev · 2026-04-02T07:37:55Z

There's seems to be an new issue I am not sure if related, but with this approach the dialog shows out of bounds if the page is scrolled up and the dialog doesn't stick to the grid anymore. I used the gridEsfLoadOnDemand sample for the example:
Old dialog:

New dialog:

…odyVCR

wnvko · 2026-04-02T08:09:13Z

There's seems to be an new issue I am not sure if related, but with this approach the dialog shows out of bounds if the page is scrolled up and the dialog doesn't stick to the grid anymore. I used the gridEsfLoadOnDemand sample for the

Positioning is reverted back to AutoPositionStrategy and this should be fixed now.

Note: it will be nice if ESF custom dialog is dragable as advanced filtering dialog is, but this is a feature request

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

...igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts

…/excel-style-custom-dialog.component.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

...igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts

...eui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts

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

damyanpetev

Still find it a bit odd if the condition item attaches and holds the positioning setup, but the dialog detaches itself (which is fine, since there's no external close control to begin with). Like I said in a previous comment, the ESF dialog looks ripe for some rework, so this can go in like that and should be given a once over when possible.

fix(ESF): move custom dialog out of ESF markup

904b83a

wnvko added ❌ status: awaiting-test PRs awaiting manual verification overlay grid: excel-style-filtering version: 21.1.x labels Mar 31, 2026

wnvko requested a review from damyanpetev March 31, 2026 08:48

wnvko added 2 commits March 31, 2026 11:49

chore(esf): fix imports order

ec2a77e

Merge branch 'master' into mvenkov/move-esf-dialog-out-of-dropdown

4150eb0

damyanpetev reviewed Mar 31, 2026

View reviewed changes

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

wnvko added 2 commits March 31, 2026 14:49

chore(esf): address PR comments

0d54fd2

Merge branch 'mvenkov/move-esf-dialog-out-of-dropdown' of https://git…

e0643fe

…hub.com/IgniteUI/igniteui-angular into mvenkov/move-esf-dialog-out-of-dropdown

wnvko added ❌ status: awaiting-test PRs awaiting manual verification version: 21.2.x and removed 🛠️ status: in-development Issues and PRs with active development on them version: 21.1.x labels Mar 31, 2026

dkamburov self-assigned this Mar 31, 2026

damyanpetev reviewed Mar 31, 2026

View reviewed changes

damyanpetev previously approved these changes Mar 31, 2026

View reviewed changes

dkamburov assigned skrustev Apr 1, 2026

skrustev added 💥 status: in-test PRs currently being tested and removed ❌ status: awaiting-test PRs awaiting manual verification labels Apr 1, 2026

Merge branch 'master' into mvenkov/move-esf-dialog-out-of-dropdown

4ec7224

Copilot AI review requested due to automatic review settings April 1, 2026 12:13

Copilot started reviewing on behalf of wnvko April 1, 2026 12:13 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

fix(esf): focus value input only when needed

173533b

wnvko dismissed damyanpetev’s stale review via 173533b April 1, 2026 14:21

wnvko requested a review from damyanpetev April 1, 2026 14:22

Merge branch 'master' into mvenkov/move-esf-dialog-out-of-dropdown

740b1ef

damyanpetev previously approved these changes Apr 1, 2026

View reviewed changes

Merge branch 'master' into mvenkov/move-esf-dialog-out-of-dropdown

d6a9f1c

wnvko added 3 commits April 2, 2026 10:38

fix(esf): move overlay subscriptions into ESF custom dialog component

e00a741

fix(esf): add ViewContainerRef in grids body

bcf8244

fix(esf): use AutoPositionStrategy for ESF dialog and attach to gridB…

2f58750

…odyVCR

wnvko dismissed damyanpetev’s stale review via 2f58750 April 2, 2026 07:58

wnvko requested review from Copilot and damyanpetev April 2, 2026 08:10

Copilot started reviewing on behalf of wnvko April 2, 2026 08:11 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

...igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts Outdated Show resolved Hide resolved

Update projects/igniteui-angular/grids/core/src/filtering/excel-style…

32aaa0f

…/excel-style-custom-dialog.component.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

wnvko requested a review from Copilot April 2, 2026 08:23

Copilot started reviewing on behalf of wnvko April 2, 2026 08:23 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

skrustev added ✅ status: verified Applies to PRs that have passed manual verification and removed 💥 status: in-test PRs currently being tested labels Apr 2, 2026

damyanpetev reviewed Apr 2, 2026

View reviewed changes

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts Outdated Show resolved Hide resolved

damyanpetev added 2 commits April 2, 2026 19:41

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

3d144d4

Merge branch 'master' into mvenkov/move-esf-dialog-out-of-dropdown

ec303fc

damyanpetev approved these changes Apr 2, 2026

View reviewed changes

damyanpetev merged commit 2b5cc7a into master Apr 2, 2026
6 checks passed

damyanpetev deleted the mvenkov/move-esf-dialog-out-of-dropdown branch April 2, 2026 17:15

Conversation

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

Uh oh!

Additional information (check all that apply):

Checklist:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damyanpetev Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

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!

skrustev commented Apr 2, 2026

Uh oh!

wnvko commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

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!

damyanpetev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wnvko commented Mar 31, 2026 •

edited

Loading

damyanpetev Mar 31, 2026 •

edited

Loading

wnvko commented Apr 2, 2026 •

edited

Loading