Focusing on parent grid using keyboard navigation in IE. (#5308)

* fix(navigation): Focusing on parent grid on keyboard navigation IE #4488

* chore(navigation): Put focus element validation in hgrid service.

* chore(navigation): Added getFocusGrid function for in HGrid navigation service.

* chore(*): Applying review changes.

* chore(*): Fix merge issue.

* chore(*): Fixing more merge issues.

* chore(*): Fixing more merge issues.

* chore(*): Fixing review comments.

* chore(*): In case child grid last row is not visible in parent view port make sure parent grid is first scrolled so that child grid bottom is in view before attempting to focus last cell in child.

* chore(*): Make sure calculation are done based on root grid tbody.

Author: MayaKirova

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

@@ -131,7 +131,7 @@ export class IgxGridNavigationService {
                 if (this.isColumnLeftEdgeVisible(visibleColumnIndex + 1)) {
                     element.nextElementSibling.firstElementChild.focus({ preventScroll: true });
                 } else {
-                    this.grid.nativeElement.focus({ preventScroll: true });
+                    this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
                     this.grid.parentVirtDir.onChunkLoad
                         .pipe(first())
                         .subscribe(() => {
@@ -205,7 +205,7 @@ export class IgxGridNavigationService {
         if (this.grid.pinnedColumns.length || this.displayContainerScrollLeft === 0) {
             firstCell.focus({ preventScroll: true });
         } else {
-            this.grid.nativeElement.focus({ preventScroll: true });
+            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.parentVirtDir.onChunkLoad
                 .pipe(first())
                 .subscribe(() => {
@@ -226,7 +226,7 @@ export class IgxGridNavigationService {
             const allCells = rowElement.querySelectorAll(this.getCellSelector(-1, isSummary));
             allCells[allCells.length - 1].focus({ preventScroll: true });
         } else {
-            this.grid.nativeElement.focus({ preventScroll: true });
+            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.parentVirtDir.onChunkLoad
                 .pipe(first())
                 .subscribe(() => {
@@ -245,7 +245,7 @@ export class IgxGridNavigationService {
                 `${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
             cells[0].focus();
         } else {
-            this.grid.nativeElement.focus({ preventScroll: true });
+           this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.verticalScrollContainer.scrollTo(0);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
@@ -265,7 +265,7 @@ export class IgxGridNavigationService {
                 `${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
             cells[cells.length - 1].focus();
         } else {
-            this.grid.nativeElement.focus({ preventScroll: true });
+           this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
@@ -285,7 +285,7 @@ export class IgxGridNavigationService {
         const containerTopOffset = parseInt(this.verticalDisplayContainerElement.style.top, 10);
         if (!rowElement.previousElementSibling ||
             rowElement.previousElementSibling.offsetTop < Math.abs(containerTopOffset)) {
-            this.grid.nativeElement.focus({ preventScroll: true });
+           this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.verticalScrollContainer.scrollTo(currentRowIndex - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first())
@@ -322,7 +322,7 @@ export class IgxGridNavigationService {
         const targetEndTopOffset = rowElement.nextElementSibling ?
             rowElement.nextElementSibling.offsetTop + rowHeight + parseInt(this.verticalDisplayContainerElement.style.top, 10) :
             containerHeight + rowHeight;
-        this.grid.nativeElement.focus({ preventScroll: true });
+       this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
         if (containerHeight && containerHeight < targetEndTopOffset) {
             const nextIndex = currentRowIndex + 1;
             this.grid.verticalScrollContainer.scrollTo(nextIndex);
@@ -366,7 +366,7 @@ export class IgxGridNavigationService {
             if (!horizontalScroll.clientWidth || parseInt(horizontalScroll.scrollLeft, 10) <= 1 || this.grid.pinnedColumns.length) {
                 this.navigateTop(0);
             } else {
-                this.grid.nativeElement.focus({ preventScroll: true });
+               this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
                 this.horizontalScroll(this.grid.dataRowList.first.index).scrollTo(0);
                 this.grid.parentVirtDir.onChunkLoad
                     .pipe(first())
@@ -385,7 +385,7 @@ export class IgxGridNavigationService {
             const rowIndex = parseInt(rows[rows.length - 1].getAttribute('data-rowIndex'), 10);
             this.onKeydownEnd(rowIndex);
         } else {
-            this.grid.nativeElement.focus({ preventScroll: true });
+           this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
             this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
@@ -598,7 +598,7 @@ export class IgxGridNavigationService {
     public performHorizontalScrollToCell(
         rowIndex: number, visibleColumnIndex: number, isSummary: boolean = false, cb?: () => void) {
         const unpinnedIndex = this.getColumnUnpinnedIndex(visibleColumnIndex);
-        this.grid.nativeElement.focus({ preventScroll: true });
+       this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
         this.grid.parentVirtDir.onChunkLoad
             .pipe(first())
             .subscribe(() => {
@@ -614,6 +614,10 @@ export class IgxGridNavigationService {
         this.horizontalScroll(rowIndex).scrollTo(unpinnedIndex);
     }
 
+    protected getFocusableGrid() {
+        return this.grid;
+    }
+
     protected getRowByIndex(index, selector = this.getRowSelector()) {
         return this.grid.nativeElement.querySelector(
             `${selector}[data-rowindex="${index}"]`);

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

@@ -4,6 +4,7 @@ import { first } from 'rxjs/operators';
 import { FilterMode } from '../grid-base.component';
 import { IgxColumnComponent } from '../../grids/column.component';
 import { ISelectionNode } from '../../core/grid-selection';
+import { isIE } from '../../core/utils';
 
 export class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
     public grid: IgxHierarchicalGridComponent;
@@ -174,6 +175,18 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
                         if (cells.length > 0) { cells[cells.length - 1].focus(); }
                     });
             }
+        } else  if (this.grid.parent !== null) {
+            const childContainer = this.grid.nativeElement.parentNode.parentNode;
+            const diff =
+            childContainer.getBoundingClientRect().bottom - this.grid.rootGrid.tbody.nativeElement.getBoundingClientRect().bottom;
+            const endIsVisible = diff < 0;
+            const scrollable = this.getNextScrollableDown(this.grid);
+            if (!endIsVisible) {
+                this.scrollGrid(scrollable.grid, diff,
+                    () => super.navigateBottom(visibleColumnIndex));
+            } else {
+                super.navigateBottom(visibleColumnIndex);
+            }
         } else {
             super.navigateBottom(visibleColumnIndex);
         }
@@ -423,6 +436,10 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         }
     }
 
+    public getFocusableGrid() {
+        return (isIE() && this.grid.rootGrid) ? this.grid.rootGrid : this.grid;
+    }
+
     private getLastGridElem(trContainer) {
         const children = trContainer.children;
         const closestChild = children[children.length - 1].children[0].children[0];
@@ -720,7 +737,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         grid.dataRowList.toArray()[0].virtDirRow.scrollTo(unpinnedIndex);
     }
     private scrollGrid(grid, target, callBackFunc) {
-        grid.nativeElement.focus({ preventScroll: true });
+        this.getFocusableGrid().nativeElement.focus({preventScroll: true});
         requestAnimationFrame(() => {
             if (typeof target === 'number') {
                 grid.verticalScrollContainer.addScrollTop(target);