fix(igxGrid): Hide overlays on scroll + special handling for row edit#17243
fix(igxGrid): Hide overlays on scroll + special handling for row edit#17243MayaKirova wants to merge 8 commits intomasterfrom
Conversation
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR addresses a regression introduced by the overlay refactoring by ensuring grid-related overlays don’t remain floating/mispositioned when their owning (child) grid scrolls out of view due to parent scrolling, while preserving the legacy behavior for the row-editing overlay (keep it open and reposition when possible).
Changes:
- Adjusts overlay tracking/hiding logic to hide overlays on scroll when their target is within the grid body DOM subtree.
- Adds additional row-edit overlay lifecycle handling to close/reopen it when the grid element disconnects/reconnects from the DOM.
- Updates row-editing specs and the hierarchical grid sample to better exercise the affected scenarios.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts |
Updates overlay registration rules for scroll-hiding and adds reconnect/disconnect handling for row-edit overlay. |
projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts |
Adds a regression test asserting the row-edit overlay remains open on vertical scroll. |
src/app/hierarchical-grid/hierarchical-grid.sample.ts |
Imports IgxActionStripComponent to support sample template changes. |
src/app/hierarchical-grid/hierarchical-grid.sample.html |
Updates the sample to include an action strip and advanced filtering toolbar action, and adjusts grid sizing/column editability for reproduction. |
Comments suppressed due to low confidence (3)
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3798
- This change alters which overlays are registered for
hideOverlays()(now based on DOM containment rather than outlet). Please add a regression test covering the reported scenario (e.g. child grid overlay like column hiding/excel filter closes when the parent grid/page scrolls), so future overlay refactors don’t reintroduce the floating overlay behavior.
this._advancedFilteringOverlayId = null;
return;
}
const ind = this.overlayIDs.indexOf(event.id);
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3754
rowInEditModeis aRowType(seeRowTypeinterface) and does not expose anidproperty. Usingthis.crudService.rowInEditMode.idwill beundefined/type-incorrect and can prevent reopening the row editing overlay (or fail compilation under stricter TS settings). Use the row key instead (e.g.rowInEditMode.keyor the underlying edit state id) when callingopenRowOverlay.
}
});
});
this.pipeTriggerNotifier.pipe(takeUntil(this.destroy$)).subscribe(() => this.pipeTrigger++);
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3792
overlaySettings.targetcan be aPointas well as anHTMLElement(perOverlaySettingstyping). The currentclassList.contains(...)check will throw at runtime whentargetis aPoint. Guard with aninstanceof HTMLElement/target instanceof Elementcheck before accessingclassList.
});
this.overlayService.closed.pipe(filter(() => !this._init), destructor).subscribe((event) => {
if (this._advancedFilteringOverlayId === event.id) {
| const inRow = (overlaySettings?.target as HTMLElement)?.classList.contains("igx-grid__tr"); | ||
| // do not hide the overlay if it's attached to a row on scroll | ||
| if (inRow) { |
There was a problem hiding this comment.
There is an extra leading space before this if statement, which looks like a formatting typo and can cause lint/format checks to fail.
… overlay.
Closes #17215
Description
Hide overlays on scroll so that they don't float outside their child grid on parent scroll.
Also add more special handling for row edit overlay so that it matches the old behavior - not closing on scroll, but repositioning to the correct row after grid has been removed from DOM (collapsed, scrolled out of view etc.).
Motivation / Context
Because of the overlay refactoring, bug was introduced.
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)