From f88056f2c3111a7fb9197d2d0e33e9f673761685 Mon Sep 17 00:00:00 2001
From: skrustev <solstyce33@gmail.com>
Date: Tue, 1 Oct 2019 18:29:22 +0300
Subject: [PATCH] fix(igHierarchicalGrid): Fix navigating down to partially
 visible cell with index available in previous expanded grid. #5251

---
 .../src/lib/grids/common/grid.interface.ts    |  1 +
 .../src/lib/grids/grid-navigation.service.ts  |  2 +-
 .../lib/grids/grid/groupby-row.component.ts   |  1 +
 .../hierarchical-grid.navigation.spec.ts      | 28 +++++++++++++------
 .../src/lib/grids/row.component.ts            |  1 +
 .../grids/summaries/summary-row.component.ts  |  1 +
 6 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
index 6bae484aec3..fe90470636d 100644
--- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -1,6 +1,7 @@
 import { FilterMode } from './enums';
 
 export interface GridType {
+    id: string;
     nativeElement: HTMLElement;
     rowEditable: boolean;
     rootSummariesEnabled: boolean;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
index abaaeede32f..d70bf745c6c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -628,7 +628,7 @@ export class IgxGridNavigationService {
 
     protected getNextRowByIndex(nextIndex) {
         return this.grid.tbody.nativeElement.querySelector(
-            `[data-rowindex="${nextIndex}"]`);
+            `[data-rowindex="${nextIndex}"][data-gridid="${this.grid.id}"]`);
     }
 
     private getAllRows() {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
index e8e96ecc011..c73ca50b69c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
@@ -83,6 +83,7 @@ export class IgxGridGroupByRowComponent {
      * ```
      */
     @Input()
+    @HostBinding('attr.data-gridID')
     public gridID: string;
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts
index a57492403a0..3e7b1132d55 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts
@@ -33,23 +33,35 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
     }));
 
     // simple tests
-    it('should allow navigating down from parent row into child grid.', () => {
-        const fCell = hierarchicalGrid.dataRowList.toArray()[0].cells.toArray()[0].nativeElement;
+    it('should allow navigating down from parent row into child grid.', (async() => {
+        hierarchicalGrid.expandChildren = false;
+        hierarchicalGrid.height = '600px';
+        hierarchicalGrid.width = '800px';
+        fixture.componentInstance.rowIsland.height = '350px';
+        fixture.detectChanges();
+        await wait(100);
+
+        const row1 = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
+        UIInteractions.clickElement(row1.expander);
+        fixture.detectChanges();
+        await wait(100);
+
+        const fCell = hierarchicalGrid.dataRowList.toArray()[1].cells.toArray()[0].nativeElement;
         fCell.focus();
         fixture.detectChanges();
+
         const keyboardEvent = new KeyboardEvent('keydown', {
             code: 'ArrowDown',
             key: 'ArrowDown'
         });
         fCell.dispatchEvent(keyboardEvent);
+        await wait(100);
         fixture.detectChanges();
 
-        const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
-        const childFirstCell =  childGrid.dataRowList.toArray()[0].cells.toArray()[0];
-
-        expect(childFirstCell.selected).toBe(true);
-        expect(childFirstCell.focused).toBe(true);
-    });
+        const sCell = hierarchicalGrid.dataRowList.toArray()[2].cells.toArray()[0];
+        expect(sCell.selected).toBe(true);
+        expect(sCell.focused).toBe(true);
+    }));
 
     it('should allow navigating up from child row into parent grid.', () => {
         const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
diff --git a/projects/igniteui-angular/src/lib/grids/row.component.ts b/projects/igniteui-angular/src/lib/grids/row.component.ts
index 75402875480..adb58cce3e4 100644
--- a/projects/igniteui-angular/src/lib/grids/row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/row.component.ts
@@ -59,6 +59,7 @@ export abstract class IgxRowComponent<T extends IgxGridBaseComponent & IGridData
      * @hidden
      */
     @Input()
+    @HostBinding('attr.data-gridID')
     public gridID: string;
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
index 1264976b74f..929b076f863 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
@@ -32,6 +32,7 @@ export class IgxSummaryRowComponent implements DoCheck  {
     public summaries: Map<string, IgxSummaryResult[]>;
 
     @Input()
+    @HostBinding('attr.data-gridID')
     public gridID;
 
     @Input()