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

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

@@ -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) => {
@@ -3747,6 +3747,16 @@ export abstract class IgxGridBaseDirective implements GridType,
                             }
                         }
                         this.notifyChanges(true);
+                        if (this.rowEditable && this.crudService.rowInEditMode && this.rowEditingOverlay &&
+                            this.rowEditingOverlay.collapsed) {
+                            // 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 && this.rowEditingOverlay) {
+                        // disconnected from DOM (possibly cached) & row was in edit mode - close overlay.
+                        this.closeRowEditingOverlay();
                     }
                 });
             });
@@ -3766,22 +3776,23 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.overlayService.opened.pipe(destructor).subscribe((event) => {
             const overlaySettings = this.overlayService.getOverlayById(event.id)?.settings;
 
-            // do not hide the advanced filtering overlay on scroll
-            if (this._advancedFilteringOverlayId === event.id) {
+            // this sets focus to query builder button for some reason...
+             if (this._advancedFilteringOverlayId === event.id) {
                 const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
                 if (instance) {
                     instance.lastActiveNode = this.navigation.activeNode;
                     instance.queryBuilder.setAddButtonFocus();
                 }
-                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) {
                 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);
+            if (isInGrid && this.overlayIDs.indexOf(event.id) === -1) {
                 this.overlayIDs.push(event.id);
             }
         });
@@ -4047,8 +4058,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;
         }

projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts

@@ -116,6 +116,21 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
         }));
 
+        it('Should close Advanced Filtering dialog on vertical scroll.', fakeAsync(() => {
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+            tick(100);
+            fix.detectChanges();
+
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
+
+            (grid as any).verticalScrollHandler({ target: grid.verticalScrollContainer.getScroll() });
+            tick(200);
+            fix.detectChanges();
+
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+        }));
+
         it('Should close Advanced Filtering dialog through API by respecting \'applyChanges\' argument.', fakeAsync(() => {
             grid.openAdvancedFilteringDialog();
             fix.detectChanges();

projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts

@@ -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);

src/app/hierarchical-grid/hierarchical-grid.sample.html

@@ -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>
@@ -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">
@@ -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>
@@ -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">

src/app/hierarchical-grid/hierarchical-grid.sample.ts

@@ -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,
@@ -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')