Skip to content

fix(igxGrid): Hide overlays on scroll + special handling for row edit#17243

Open
MayaKirova wants to merge 8 commits intomasterfrom
mkirova/fix-17215-master
Open

fix(igxGrid): Hide overlays on scroll + special handling for row edit#17243
MayaKirova wants to merge 8 commits intomasterfrom
mkirova/fix-17215-master

Conversation

@MayaKirova
Copy link
Copy Markdown
Contributor

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

  • Bug fix
  • New functionality
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring (no functional changes)
  • Documentation
  • Demos
  • CI/CD
  • Tests
  • Changelog
  • Skills/Agents

Component(s) / Area(s) Affected:

  • All grids

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
  • Accessibility (ARIA, keyboard navigation, focus management) has been verified

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

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

  • rowInEditMode is a RowType (see RowType interface) and does not expose an id property. Using this.crudService.rowInEditMode.id will be undefined/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.key or the underlying edit state id) when calling openRowOverlay.
                    }
                });
            });

        this.pipeTriggerNotifier.pipe(takeUntil(this.destroy$)).subscribe(() => this.pipeTrigger++);

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

  • overlaySettings.target can be a Point as well as an HTMLElement (per OverlaySettings typing). The current classList.contains(...) check will throw at runtime when target is a Point. Guard with an instanceof HTMLElement/target instanceof Element check before accessing classList.
        });

        this.overlayService.closed.pipe(filter(() => !this._init), destructor).subscribe((event) => {
            if (this._advancedFilteringOverlayId === event.id) {

Comment on lines +3779 to +3781
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) {
Copy link

Copilot AI Apr 27, 2026

Choose a reason for hiding this comment

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

There is an extra leading space before this if statement, which looks like a formatting typo and can cause lint/format checks to fail.

Copilot uses AI. Check for mistakes.
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.

Hierarchical Grid overlay elements do not close on scroll and position at strange location when scrolling.

4 participants