Skip to content

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

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

Open
MayaKirova wants to merge 8 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ee7633c
fix(igxGrid): Hide overlays on scroll + special handling for row edit…
MayaKirova Apr 22, 2026
7f5a007
chore(*): Add back some focus handling for adv.filter.
MayaKirova Apr 22, 2026
3e2d5da
chore(*): Apply suggestions from code review
MayaKirova Apr 22, 2026
c316860
test(grid): add scroll overlay regression coverage
Copilot Apr 22, 2026
8c2b94e
test(grid): refine row overlay scroll regression test
Copilot Apr 22, 2026
b2fe805
chore(*): Adjust logic so that adv.filtering does not close.
MayaKirova Apr 22, 2026
f684c82
chore(*): Remove copilot test.
MayaKirova Apr 22, 2026
3dae42f
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
20 changes: 11 additions & 9 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 Down Expand Up @@ -3767,7 +3767,7 @@ export abstract class IgxGridBaseDirective implements GridType,
const overlaySettings = this.overlayService.getOverlayById(event.id)?.settings;

// do not hide the advanced filtering overlay on scroll
if (this._advancedFilteringOverlayId === event.id) {
if (this._advancedFilteringOverlayId === event.id) {
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
if (instance) {
instance.lastActiveNode = this.navigation.activeNode;
Expand All @@ -3776,12 +3776,14 @@ export abstract class IgxGridBaseDirective implements GridType,
return;
}

// do not hide the overlay if it's attached to a row
if (this.rowEditingOverlay?.overlayId === 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) {
Comment on lines +3779 to +3781
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.
return;
}

if (overlaySettings?.outlet === this.outlet && this.overlayIDs.indexOf(event.id) === -1) {
const isInGrid = overlaySettings?.target instanceof Node && this.tbody.nativeElement.contains(overlaySettings?.target);
if (isInGrid && this.overlayIDs.indexOf(event.id) === -1) {
this.overlayIDs.push(event.id);
}
});
Expand Down Expand Up @@ -4047,8 +4049,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
15 changes: 15 additions & 0 deletions projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,21 @@ describe('IgxGrid - Row Editing #grid', () => {
cell.editMode = false;
});

it('Overlay position: Should keep row editing overlay open on vertical scroll', fakeAsync(() => {
cell = grid.getCellByColumn(0, 'ProductName');
cell.editMode = true;
fix.detectChanges();

expect(grid.rowEditingOverlay.collapsed).toBeFalse();

(grid as any).verticalScrollHandler({ target: grid.verticalScrollContainer.getScroll() });
tick();
fix.detectChanges();

expect(GridFunctions.getRowEditingOverlay(fix)).toBeTruthy();
expect(grid.rowEditingOverlay.collapsed).toBeFalse();
}));

it('should end row editing when clearing or applying advanced filter', () => {
fix.detectChanges();
const row = grid.gridAPI.get_row_by_index(2);
Expand Down
18 changes: 11 additions & 7 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,9 +53,9 @@ <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'"
[autoGenerate]="false" [allowFiltering]='true' [rowSelection]='selectionMode' [rowEditable]="true"
[expandChildren]="firstLevelExpanded" #layout1 [allowFiltering]="true" filterMode="excelStyleFilter">
<igx-row-island [primaryKey]="'ID'" [rowEditable]="true" [allowAdvancedFiltering]="true" [rowDraggable]="true" [height]="'400px'" [showExpandAll]="true" [key]="'childData'"
[autoGenerate]="false" [allowFiltering]="true" [rowSelection]="selectionMode"
[expandChildren]="firstLevelExpanded" #layout1 filterMode="excelStyleFilter">
<igx-grid-excel-style-filtering [minHeight]="'200px'" [maxHeight]="'360px'">
<igx-excel-style-column-operations>
<igx-excel-style-header [showPinning]="false" [showHiding]="true">
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