Merge branch '8.2.x' into mkirova/fix-flicker-8.2.x

Author: ChronosSF

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

@@ -1,7 +1,6 @@
 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-gridid="${this.grid.id}"]`);
+            `[data-rowindex="${nextIndex}"]`);
     }
 
     private getAllRows() {

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

@@ -83,7 +83,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

@@ -806,4 +806,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.component.ts

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