Merge pull request #6033 from IgniteUI/mdragnev/fix-4780-master

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

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -10,7 +10,6 @@ export interface IGridDataBindable {
  * @internal
  */
 export interface GridType extends IGridDataBindable {
-    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-gridid="${this.grid.id}"]`);
+            `[data-rowindex="${nextIndex}"]`);
     }
 
     private getAllRows() {

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

@@ -84,7 +84,6 @@ export class IgxGridGroupByRowComponent {
      * ```
      */
     @Input()
-    @HostBinding('attr.data-gridID')
     public gridID: string;
 
     /**

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

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

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

@@ -916,6 +916,33 @@ describe('IgxHierarchicalGrid Complex Navigation #hGrid', () => {
             expect(lastCell.rowIndex).toBe(4);
 
         }));
+
+        it('should navigate to the first cell of next row using Tab from last cell in the row above', (async () => {
+            hierarchicalGrid.expandChildren = false;
+            hierarchicalGrid.height = '600px';
+            hierarchicalGrid.width = '1000px';
+            fixture.componentInstance.rowIsland.height = '350px';
+            fixture.detectChanges();
+            await wait(100);
+
+            const row = hierarchicalGrid.getRowByIndex(0);
+            (row as IgxHierarchicalRowComponent).toggle();
+            await wait(100);
+            fixture.detectChanges();
+
+            const cell = hierarchicalGrid.getCellByColumn(2, 'childData2');
+            cell.nativeElement.dispatchEvent(new Event('focus'));
+            await wait(100);
+            fixture.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('Tab', cell.nativeElement, true);
+            await wait(100);
+            fixture.detectChanges();
+
+            const currentCell = hierarchicalGrid.getCellByColumn(3, 'ID');
+            expect(currentCell.focused).toBe(true);
+            expect(currentCell.rowIndex).toBe(3);
+        }));
 });
 
 describe('IgxHierarchicalGrid Multi-layout Navigation #hGrid', () => {

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -62,7 +62,6 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      * @hidden
      */
     @Input()
-    @HostBinding('attr.data-gridID')
     public gridID: string;
 
     /**

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts

@@ -33,7 +33,6 @@ export class IgxSummaryRowComponent implements DoCheck  {
     public summaries: Map<string, IgxSummaryResult[]>;
 
     @Input()
-    @HostBinding('attr.data-gridID')
     public gridID;
 
     @Input()