Merge pull request #9982 from IgniteUI/pbozhinov/fix-9917

Prevents child overlay from disappearing when scrolling in hierarchical grid

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -91,7 +91,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     public toolbarTemplate: TemplateRef<IgxGridToolbarTemplateContext>;
 
     /** @hidden @internal */
-    @ContentChildren(IgxPaginatorComponent, {descendants: true})
+    @ContentChildren(IgxPaginatorComponent, { descendants: true })
     public paginatorList: QueryList<IgxPaginatorComponent>;
 
     @ViewChild('toolbarOutlet', { read: ViewContainerRef })
@@ -206,7 +206,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     /** @hidden @internal */
     public get paginator() {
         const id = this.id;
-        return  (!this.parentIsland && this.paginationComponents?.first) || this.rootGrid.paginatorList?.find((pg) =>
+        return (!this.parentIsland && this.paginationComponents?.first) || this.rootGrid.paginatorList?.find((pg) =>
             pg.nativeElement.offsetParent?.id === id);
     }
 
@@ -296,7 +296,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      * @param rowIndex
      * @param index
      */
-     @DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
+    @DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
     public getCellByColumnVisibleIndex(rowIndex: number, index: number): CellType {
         const row = this.getRowByIndex(rowIndex);
         const column = this.columnList.find((col) => col.visibleIndex === index);
@@ -340,6 +340,15 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
+    /**
+     * @hidden
+     */
+    public get parentRowOutletDirective() {
+        // Targeting parent outlet in order to prevent hiding when outlet
+        // is present at a child grid and is attached to a row.
+        return this.parent ? this.parent.rowOutletDirective : this.outlet;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

@@ -1405,6 +1405,45 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
 
     });
 
+    it(`Should keep the overlay when scrolling an igxHierarchicalGrid with an opened 
+            row island with <= 2 data records`, async () => {
+        hierarchicalGrid.primaryKey = 'ID';
+        hierarchicalGrid.rowEditable = true;
+        hierarchicalGrid.getRowByIndex(0).expanded = true;
+        fixture.detectChanges();
+
+        const secondLevelGrid = hierarchicalGrid.hgridAPI.getChildGrids()[0];
+        expect(secondLevelGrid).not.toBeNull();
+        secondLevelGrid.getRowByIndex(0).expanded = true;
+        fixture.detectChanges();
+
+        const thirdLevelGrid = secondLevelGrid.hgridAPI.getChildGrids()[0];
+        thirdLevelGrid.primaryKey = 'ID';
+        thirdLevelGrid.rowEditable = true;
+        fixture.detectChanges();
+
+        expect(thirdLevelGrid).not.toBeNull();
+        expect(thirdLevelGrid.data.length).toBe(2);
+
+        const cellElem = thirdLevelGrid.gridAPI.get_cell_by_index(0, 'ChildLevels');
+        const row = thirdLevelGrid.gridAPI.get_row_by_index(0);
+
+        UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
+        fixture.detectChanges();
+        expect(row.inEditMode).toBe(true);
+        fixture.detectChanges();
+
+        let overlay = GridFunctions.getRowEditingOverlay(fixture);
+        expect(overlay).not.toBeNull();
+
+        await hierarchicalGrid.dragScroll({ left: 0, top: 10 });
+        fixture.detectChanges();
+        await wait(30);
+
+        overlay = GridFunctions.getRowEditingOverlay(fixture);
+        expect(overlay).not.toBeNull();
+    });
+
 });
 
 describe('IgxHierarchicalGrid custom template #hGrid', () => {