fix(igHierarchicalGrid): Fix navigating down to partially visible cell with index available in previous expanded grid. #5251

Author: skrustev

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;

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() {

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;
 
     /**

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];

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;
 
     /**

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()