fix(hierarchical-grid): hide child row editing overlay on scroll - master#17302
fix(hierarchical-grid): hide child row editing overlay on scroll - master#17302georgianastasov wants to merge 6 commits into
Conversation
georgianastasov
added
❌ status: awaiting-test
There was a problem hiding this comment.
Pull request overview
Fixes Hierarchical Grid child row-editing overlay visibility while scrolling, so the overlay doesn’t remain visible outside the grid’s visible area (issue #17275).
Changes:
- Update the Hierarchical Grid scroll handling to re-evaluate child grids’ row-editing overlay visibility during scroll.
- Add a new unit test covering the parent vertical scroll scenario for hiding/showing a child row-editing overlay.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts | Adds scroll-time logic to hide/show/reposition child row-edit overlays when the edited row moves in/out of view. |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts | Adds a unit test validating overlay hide/show behavior when parent scrolling moves an edited child row out of view. |
There was a problem hiding this comment.
The issue is not fixed.
- Go to http://localhost:4200/hierarchicalGridAddRow
- Expand the first row
Product: A0and scroll until you see the second nested island.
root hGrid
-> rowIsland lvl 1 (first nested island)
-> rowIsland lvl 1 (second nested island)
- In the first nested island, scroll and expand any of the middle records, for example,
Product: A14. - Enter edit mode for any row in the inner island (lvl 2), for example,
Product: A1.
root hGrid
-> rowIsland lvl 1
-> rowIsland lvl 2 (inner island)
-> rowIsland lvl 1
- Scroll up and down on the first nested island lvl 1.
georgianastasov
added
🛠️ status: in-development
georgianastasov
added
✅ status: resolved
RivaIvanova
left a comment
RivaIvanova
left a comment
There was a problem hiding this comment.
Is this behavior reproducible for the grid and the tree grid, too? In what scenarios? I tested them before the fix and didn't notice. If it is reproducible, then there should be tests for them too. If not, adding the clip logic that is relevant only for the hierarchical grid for all grids does not seem optimal. Maybe extend the strategy and plug the updateContentClip logic wherever needed?
Good point. I checked flat Grid and Tree Grid and I don’t see the same issue there. In Tree Grid there is a small delayed hide while scrolling near the bottom edge, but it is not the same visual escape that happens in nested Hierarchical Grid row islands. The problematic case is specific to child Hierarchical Grids, where the row edit overlay is rendered in the top layer while the child grid itself is clipped by parent grid bodies. So I agree that applying this clipping logic unconditionally through the shared row edit strategy is broader than needed. I’ll scope it to hierarchical child grids only. |
Closes #17275
Description
Fixes an issue where a row editing overlay could remain visible outside the grid boundaries while scrolling, especially in nested Hierarchical Grid row islands.
The fix clips the row editing overlay to the effective visible grid area after it is positioned. Since the overlay is rendered in the top layer, it no longer relies on the grid body overflow to hide it when the edited row scrolls out of view.
The clipping area is calculated from the row edit container and its clipping ancestors, so nested grids respect their parent grid scroll bounds.
Motivation / Context
When row editing is started inside a child grid and the user scrolls a parent or nested grid, the editing overlay could visually escape the grid body and appear detached from the edited row.
This happened because the overlay is positioned outside the normal grid body clipping context. The fix keeps the overlay visually constrained to the same visible area as the edited row.
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Added unit tests for Hierarchical Grid child row editing overlay behavior during scroll.
Test Configuration:
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)