Skip to content

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

Open
wnvko wants to merge 5 commits intomasterfrom
mvenkov/move-esf-dialog-out-of-dropdown
Open

fix(ESF): move custom dialog out of ESF markup#17136
wnvko wants to merge 5 commits intomasterfrom
mvenkov/move-esf-dialog-out-of-dropdown

Conversation

@wnvko
Copy link
Copy Markdown
Contributor

@wnvko wnvko commented Mar 31, 2026

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

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

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

Comment on lines +142 to +148
this._overlayService.opening.pipe(takeUntil(this.destroy$)).subscribe((args) => {
if (args.id === overlayId) {
customDialog.esf = this.esf;
customDialog.column = this.esf.column;
customDialog.filteringService = this.esf.grid.filteringService;
customDialog.overlayComponentId = overlayId;
customDialog.selectedOperator = eventArgs.newSelection.value;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see a reason for the opening here, can we have mostly the same logic as before that just assigned the customDialog props

modal: false,
closeOnOutsideClick: true,
positionStrategy: new ContainerPositionStrategy(),
scrollStrategy: new AbsoluteScrollStrategy()
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does.. nothing for container strategy?

const overlayId = this._overlayService.attach(IgxExcelStyleCustomDialogComponent, this.esf.grid.viewRef, overlaySettings);
const overlayInfo = this._overlayService.getOverlayById(overlayId);
const customDialog = overlayInfo.componentRef.instance as IgxExcelStyleCustomDialogComponent;
this.esf.grid.tbody.nativeElement.appendChild(overlayInfo.wrapperElement.parentElement);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is needed atm, but we could consider leaving the dialog on the grid container instead as well (separate from the PR);

@wnvko 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 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 dkamburov self-assigned this Mar 31, 2026
Comment on lines 163 to +167
if (this.esf.overlayComponentId) {
this.esf.hide();
}
this.subMenu.close();
this.customDialog.open(this.esf.mainDropdown.nativeElement);
this._overlayService.show(overlayId);
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Do not use overlay outlet internally

3 participants