fix(igxHierarchicalGrid): Fix navigation with tab is not correct #4780

Author: Martin Dragnev

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

@@ -806,4 +806,8 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         }
         return null;
     }
+
+    protected getNextRowByIndex(nextIndex) {
+        return this.grid.dataRowList.filter(element => element.index === nextIndex)[0].element.nativeElement;
+   }
 }

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

@@ -1192,6 +1192,52 @@ describe('IgxHierarchicalGrid Smaller Child Navigation #hGrid', () => {
         expect(secondChildCell.focused).toBe(true);
     }));
 });
+describe('IgxHierarchicalGrid Specific Scenarios Navigation', () => {
+    configureTestSuite();
+    let fixture;
+    let hierarchicalGrid: IgxHierarchicalGridComponent;
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxHierarchicalGridSpecificScenarioComponent
+            ],
+            imports: [
+                NoopAnimationsModule, IgxHierarchicalGridModule]
+        }).compileComponents();
+    }));
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(IgxHierarchicalGridSpecificScenarioComponent);
+        fixture.detectChanges();
+        hierarchicalGrid = fixture.componentInstance.hgrid;
+        setupHierarchicalGridScrollDetection(fixture, hierarchicalGrid);
+    }));
+
+    fit("should navigate to the first cell of next row using Tab from last cell in the row above when the first row is expanded",(async() =>{
+        const row=hierarchicalGrid.getRowByIndex(0);
+        (row as IgxHierarchicalRowComponent).toggle();
+        await wait(100);
+        fixture.detectChanges();
+
+        const cell=hierarchicalGrid.getCellByColumn(2,'ProductName');
+        cell.nativeElement.focus();
+        await wait(100);
+        fixture.detectChanges();
+
+        const keyboardEvent=new KeyboardEvent('keydown',{
+            key: 'Tab'
+        })
+        cell.dispatchEvent(keyboardEvent);
+        await wait(100);
+        fixture.detectChanges();
+
+        const currentCell=hierarchicalGrid.getCellByColumn(3,'ID');
+        expect(currentCell.focused).toBe(true);
+        expect(currentCell.rowIndex).toBe(3);
+
+
+    }));
+
+});
 
 @Component({
     template: `
@@ -1289,3 +1335,31 @@ export class IgxHierarchicalGridMultiLayoutComponent extends IgxHierarchicalGrid
     </igx-hierarchical-grid>`
 })
 export class IgxHierarchicalGridSmallerChildComponent extends IgxHierarchicalGridTestBaseComponent {}
+
+@Component({
+    template: `
+    <igx-hierarchical-grid #grid1 [height]="'400px'" [width]="'500px'" [data]="data" [autoGenerate]="true"
+    [expandChildren]='false' #hierarchicalGrid>
+        <igx-row-island [key]="'childData'" [autoGenerate]="true" [expandChildren]='true' [height]="'200px'" #rowIsland>
+        </igx-row-island>
+    </igx-hierarchical-grid>`
+})
+export class IgxHierarchicalGridSpecificScenarioComponent extends IgxHierarchicalGridTestBaseComponent{
+    constructor(){
+        super();
+        this.data=this.generateData(20,2);
+    }
+    generateData(count: number, level: number) {
+        const prods = [];
+        const currLevel = level;
+        let children;
+        for (let i = 0; i < count; i++) {
+           if (level > 0 ) {
+               children = this.generateData(count / 2 , currLevel - 1);
+           }
+           prods.push({
+            ID: i,  ProductName: 'Product: A' + i, childData: children });
+        }
+        return prods;
+    }
+}