Merge pull request #4456 from IgniteUI/mkirova/fix-4447

fix(Grid): Fixing navigation in scenarios where there is only 1 visible row in grid.
IgniteUI · Apr 5, 2019 · 4f3435b · 4f3435b
2 parents b359762 + 83d0d4f
commit 4f3435b
Showing 1 changed file with 21 additions and 31 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -299,21 +299,7 @@ export class IgxGridNavigationService {
     }
 
     protected focusPreviousElement(currentRowEl, visibleColumnIndex) {
-        if (currentRowEl.previousElementSibling.tagName.toLowerCase() === 'igx-grid-groupby-row') {
-            currentRowEl.previousElementSibling.focus();
-        } else {
-            const isSummaryRow = currentRowEl.previousElementSibling.tagName.toLowerCase() === 'igx-grid-summary-row';
-            if (this.isColumnFullyVisible(visibleColumnIndex) && this.isColumnLeftFullyVisible(visibleColumnIndex)) {
-                const cellSelector = this.getCellSelector(visibleColumnIndex, isSummaryRow);
-                const cell = currentRowEl.previousElementSibling
-                    .querySelector(`${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
-                cell.focus();
-                return;
-            }
-            this.grid.nativeElement.focus({ preventScroll: true });
-            this.performHorizontalScrollToCell(parseInt(
-                currentRowEl.previousElementSibling.getAttribute('data-rowindex'), 10), visibleColumnIndex, isSummaryRow);
-        }
+        this.focusElem(currentRowEl.previousElementSibling, visibleColumnIndex);
     }
 
     public navigateDown(rowElement, currentRowIndex, visibleColumnIndex) {
@@ -327,41 +313,40 @@ export class IgxGridNavigationService {
             containerHeight + rowHeight;
         this.grid.nativeElement.focus({ preventScroll: true });
         if (containerHeight && containerHeight < targetEndTopOffset) {
-            this.grid.verticalScrollContainer.scrollTo(currentRowIndex + 1);
+            const nextIndex = currentRowIndex + 1;
+            this.grid.verticalScrollContainer.scrollTo(nextIndex);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first())
                 .subscribe(() => {
-                    const tag = rowElement.tagName.toLowerCase();
-                    const rowSelector = this.getRowSelector();
-                    if (tag === rowSelector || tag === 'igx-grid-summary-row') {
-                        rowElement = this.getRowByIndex(currentRowIndex, tag);
-                    } else {
-                        rowElement = this.grid.nativeElement.querySelector(
-                            `igx-grid-groupby-row[data-rowindex="${currentRowIndex}"]`);
-                    }
-                    this.focusNextElement(rowElement, visibleColumnIndex);
+                    rowElement = this.getNextRowByIndex(nextIndex);
+                    this.focusElem(rowElement, visibleColumnIndex);
                 });
         } else {
             this.focusNextElement(rowElement, visibleColumnIndex);
         }
     }
 
-    protected focusNextElement(rowElement, visibleColumnIndex) {
-        if (rowElement.nextElementSibling.tagName.toLowerCase() === 'igx-grid-groupby-row') {
-            rowElement.nextElementSibling.focus();
+    protected focusElem(rowElement, visibleColumnIndex) {
+        if (rowElement.tagName.toLowerCase() === 'igx-grid-groupby-row') {
+            rowElement.focus();
         } else {
-            const isSummaryRow = rowElement.nextElementSibling.tagName.toLowerCase() === 'igx-grid-summary-row';
+            const isSummaryRow = rowElement.tagName.toLowerCase() === 'igx-grid-summary-row';
             if (this.isColumnFullyVisible(visibleColumnIndex) && this.isColumnLeftFullyVisible(visibleColumnIndex)) {
                 const cellSelector = this.getCellSelector(visibleColumnIndex, isSummaryRow);
-                const cell = rowElement.nextElementSibling.querySelector(`${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
+                const cell = rowElement.querySelector(`${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
                 cell.focus();
                 return cell;
             }
+            this.grid.nativeElement.focus({ preventScroll: true });
             this.performHorizontalScrollToCell(parseInt(
-                rowElement.nextElementSibling.getAttribute('data-rowindex'), 10), visibleColumnIndex, isSummaryRow);
+            rowElement.getAttribute('data-rowindex'), 10), visibleColumnIndex, isSummaryRow);
         }
     }
 
+    protected focusNextElement(rowElement, visibleColumnIndex) {
+        return  this.focusElem(rowElement.nextElementSibling, visibleColumnIndex);
+    }
+
     public goToFirstCell() {
         const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll();
         const horizontalScroll = this.grid.dataRowList.first.virtDirRow.getHorizontalScroll();
@@ -573,6 +558,11 @@ export class IgxGridNavigationService {
                 `${selector}[data-rowindex="${index}"]`);
     }
 
+    protected getNextRowByIndex(nextIndex) {
+        return this.grid.tbody.nativeElement.querySelector(
+            `[data-rowindex="${nextIndex}"]`);
+    }
+
     private getAllRows() {
         const selector = this.getRowSelector();
         return this.grid.nativeElement.querySelectorAll(selector);