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

Open
MayaKirova wants to merge 9 commits into
base: 21.2.x
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
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
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;
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev Apr 22, 2026

Choose a reason for hiding this comment

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

This should stay (see https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering behavior) and the new test should go

}

// 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) {
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) {
Comment thread
MayaKirova marked this conversation as resolved.
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