Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dkamburov merged 9 commits into from
May 13, 2026
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3676400
fix(igxGrid): Hide overlays on scroll + special handling for row edit…
MayaKirova Apr 22, 2026
449a15c
chore(*): Add back some focus handling for adv.filter.
MayaKirova Apr 22, 2026
09d1cd9
chore(*): Apply suggestions from code review
MayaKirova Apr 22, 2026
5acdcab
test(grid): add scroll overlay regression coverage
Copilot Apr 22, 2026
a66b6b1
test(grid): refine row overlay scroll regression test
Copilot Apr 22, 2026
3000d73
chore(*): Adjust logic so that adv.filtering does not close.
MayaKirova Apr 22, 2026
1d95dcb
Merge branch 'mkirova/fix-17215' of https://github.com/IgniteUI/ignit…
MayaKirova Apr 22, 2026
3eb2868
chore(*): Remove copilot test.
MayaKirova Apr 22, 2026
b1987b1
chore(*): Remove open/close logic on detach/attach.
MayaKirova Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3717,10 +3717,10 @@ export abstract class IgxGridBaseDirective implements GridType,
filter(() => !this._init),
throttle(() =>
this.throttleTime$.pipe(
take(1),
switchMap(time => timer(time, this.throttleScheduler))
take(1),
switchMap(time => timer(time, this.throttleScheduler))
)
),
),
destructor
)
.subscribe((event) => {
Expand All @@ -3747,6 +3747,15 @@ export abstract class IgxGridBaseDirective implements GridType,
}
}
this.notifyChanges(true);
if (this.rowEditable && this.crudService.rowInEditMode && this.rowEditingOverlay.collapsed) {
Comment thread
MayaKirova marked this conversation as resolved.
Outdated
// connected to DOM, row is in edit mode, but overlay is closed - reopen.
this.openRowOverlay(this.crudService.rowInEditMode.id);
}
}

if (!this.nativeElement.isConnected && this.rowEditable && this.crudService.rowInEditMode) {
Comment thread
MayaKirova marked this conversation as resolved.
Outdated
// disconnected from DOM (possibly cached) & row was in edit mode - close overlay.
this.closeRowEditingOverlay();
}
});
});
Expand All @@ -3766,22 +3775,14 @@ export abstract class IgxGridBaseDirective implements GridType,
this.overlayService.opened.pipe(destructor).subscribe((event) => {
const overlaySettings = this.overlayService.getOverlayById(event.id)?.settings;

Comment thread
MayaKirova marked this conversation as resolved.
// do not hide the advanced filtering overlay on scroll
if (this._advancedFilteringOverlayId === event.id) {
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
if (instance) {
instance.lastActiveNode = this.navigation.activeNode;
instance.queryBuilder.setAddButtonFocus();
}
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) {
return;
Comment thread
damyanpetev marked this conversation as resolved.
}

// do not hide the overlay if it's attached to a row
if (this.rowEditingOverlay?.overlayId === event.id) {
return;
}

if (overlaySettings?.outlet === this.outlet && this.overlayIDs.indexOf(event.id) === -1) {
// check whole grid, since some overlays like the advanced filtering, are outside the body.
const isInGrid = this.nativeElement.contains(overlaySettings?.target as Node);

@damyanpetev damyanpetev Apr 22, 2026

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.

Check overlaySettings?.target is Node instead of cast, as contains can throw

if (isInGrid && this.overlayIDs.indexOf(event.id) === -1) {
Comment thread
MayaKirova marked this conversation as resolved.
Outdated
Comment thread
MayaKirova marked this conversation as resolved.
this.overlayIDs.push(event.id);
}
Comment thread
MayaKirova marked this conversation as resolved.
Outdated
});
Expand Down Expand Up @@ -4047,8 +4048,8 @@ export abstract class IgxGridBaseDirective implements GridType,
const activeRow = this.navigation.activeNode?.row;

const selectedCellIndexes = this.selectionService.selection
? Array.from(this.selectionService.selection.keys())
: [];
? Array.from(this.selectionService.selection.keys())
: [];
this._activeRowIndexes = [activeRow, ...selectedCellIndexes];
return this._activeRowIndexes;
}
Expand Down
14 changes: 9 additions & 5 deletions src/app/hierarchical-grid/hierarchical-grid.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h4 class="sample-title">Sample One</h4>
<button igxButton="contained" (click)="getState()">Get state</button>
<igx-hierarchical-grid [batchEditing]="true" #grid1 [data]="localData" [showExpandAll]="true" [pinning]="{rows: 0}" class="hgrid"
[rowSelection]="selectionMode" [autoGenerate]="false" [allowFiltering]="true"
[rowDraggable]="true" [height]="'800px'" filterMode="excelStyleFilter" [width]="'100%'" [expandChildren]="rootExpanded"
[rowDraggable]="true" [height]="'500px'" filterMode="excelStyleFilter" [width]="'100%'" [expandChildren]="rootExpanded"
#hGrid [rowClasses]="rowClasses">
<igx-grid-excel-style-filtering [minHeight]="'200px'" [maxHeight]="'500px'">
<igx-excel-style-column-operations>
Expand Down Expand Up @@ -53,7 +53,7 @@ <h4 class="sample-title">Sample One</h4>
<ng-template igxRowCollapsedIndicator>
<igx-icon role="button" family="default" name="add"></igx-icon>
</ng-template>
<igx-row-island [rowDraggable]="true" [height]="'400px'" [showExpandAll]="true" [key]="'childData'"
<igx-row-island [primaryKey]="'ID'" [rowEditable]="true" [allowAdvancedFiltering]="true" [rowDraggable]="true" [height]="'400px'" [showExpandAll]="true" [key]="'childData'"
[autoGenerate]="false" [allowFiltering]='true' [rowSelection]='selectionMode' [rowEditable]="true"
[expandChildren]="firstLevelExpanded" #layout1 [allowFiltering]="true" filterMode="excelStyleFilter">
Comment thread
MayaKirova marked this conversation as resolved.
Outdated
<igx-grid-excel-style-filtering [minHeight]="'200px'" [maxHeight]="'360px'">
Expand All @@ -66,10 +66,14 @@ <h4 class="sample-title">Sample One</h4>
<igx-excel-style-search></igx-excel-style-search>
</igx-excel-style-filter-operations>
</igx-grid-excel-style-filtering>

<igx-action-strip>
<igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
</igx-action-strip>
<igx-grid-toolbar *igxGridToolbar>
<igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
Expand All @@ -79,8 +83,8 @@ <h4 class="sample-title">Sample One</h4>
</igx-paginator>
<igx-column field="ID" [hasSummary]="false" [dataType]="'number'"></igx-column>
<igx-column-group header="Information2">
<igx-column field="ChildLevels" [resizable]="true" [groupable]="true"></igx-column>
<igx-column field="ProductName" [resizable]="true" [groupable]="true"></igx-column>
<igx-column field="ChildLevels" [resizable]="true" [groupable]="true" ></igx-column>
<igx-column field="ProductName" [resizable]="true" [groupable]="true" [editable]="true"></igx-column>
</igx-column-group>
<ng-template let-data igxRowDragGhost>
<div class="dragGhost">
Expand Down
3 changes: 2 additions & 1 deletion src/app/hierarchical-grid/hierarchical-grid.sample.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, HostBinding } f
import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component';
import {
IgxRowIslandComponent,
IgxActionStripComponent,
IgxHierarchicalGridComponent,
IGridCellEventArgs,
GridSelectionMode,
Expand All @@ -16,7 +17,7 @@ import {
selector: 'app-hierarchical-grid-sample',
styleUrls: ['hierarchical-grid.sample.scss'],
templateUrl: 'hierarchical-grid.sample.html',
imports: [GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES]
imports: [GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES, IgxActionStripComponent]
})
export class HierarchicalGridSampleComponent implements AfterViewInit {
@HostBinding('style.--ig-size')
Expand Down
Loading