diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
index 8c8eb802ce1..64485b68d21 100644
--- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
+++ b/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) => {
@@ -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;
@@ -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) {
                 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);
             }
         });
@@ -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;
         }
diff --git a/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts
index ba77b0bbd7d..e14f52423bc 100644
--- a/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts
+++ b/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);
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html
index 81ee690a48f..95a8c73db8a 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.sample.html
+++ b/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">
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts
index af746d3344c..96394bbd56b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts
+++ b/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')