chore(igx-grid): Add cases for groupbyrow and pinned columns, #2951

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts

@@ -17,6 +17,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
 import { IgxFilteringService, ExpressionUI } from './grid-filtering.service';
 import { KEYS, cloneArray } from '../../core/utils';
 import { IgxGridNavigationService } from '../grid-navigation.service';
+import { IgxGridGroupByRowComponent } from '../grid';
 
 /**
  * @hidden
@@ -105,15 +106,29 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
 
     @HostListener('keydown.tab', ['$event'])
     public onTabKeyDown(eventArgs) {
+        const pinnedColumns = this.filteringService.grid.pinnedColumns;
+        let nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length;
+
         if (this.isLastElementFocused()) {
+            if (nextIndex < this.filteringService.grid.unpinnedColumns.length &&
+                pinnedColumns.indexOf(this.column) === pinnedColumns.length - 1 &&
+                !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex + 1)) {
+                this.ScrollToChip(0, true);
+                eventArgs.stopPropagation();
+                return;
+            }
             if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) {
-                eventArgs.preventDefault();
                 if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) {
+                    if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
+                        eventArgs.stopPropagation();
+                        return;
+                    }
                     this.navService.goToFirstCell();
                 }
-            } else if (!this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
                 eventArgs.preventDefault();
-                this.ScrollToChip(this.column.visibleIndex + 1, true);
+            } else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
+                eventArgs.preventDefault();
+                this.ScrollToChip(nextIndex, true);
             }
         }
         eventArgs.stopPropagation();
@@ -122,9 +137,11 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
     @HostListener('keydown.shift.tab', ['$event'])
     public onShiftTabKeyDown(eventArgs) {
         if (this.isFirstElementFocused()) {
+            let prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length;
+
             if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
                 eventArgs.preventDefault();
-                this.ScrollToChip(this.column.visibleIndex - 1, false);
+                this.ScrollToChip(prevIndex, false);
             } else if (this.column.visibleIndex === 0) {
                 eventArgs.preventDefault();
             }
@@ -301,7 +318,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
 
     private ScrollToChip(columnIndex: number, shouldFocusNext: boolean) {
         this.filteringService.grid.nativeElement.focus({preventScroll: true});
-        this.filteringService.columnToFocus = this.filteringService.grid.visibleColumns[columnIndex];
+        this.filteringService.columnToFocus = this.filteringService.grid.unpinnedColumns[columnIndex];
         this.filteringService.shouldFocusNext = shouldFocusNext;
         this.filteringService.grid.headerContainer.scrollTo(columnIndex);
     }

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

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { IgxGridBaseComponent } from './grid-base.component';
 import { first } from 'rxjs/operators';
 import { IgxColumnComponent } from './column.component';
+import { IgxGridRowComponent } from './grid/grid-row.component';
 
 enum MoveDirection {
     LEFT = 'left',
@@ -414,22 +415,26 @@ export class IgxGridNavigationService {
         }
     }
 
+    public moveFocusToFilterCell() {
+        this.grid.rowList.find(row => row instanceof  IgxGridRowComponent).cells.first._clearCellSelection();
+        const visColLength = this.grid.unpinnedColumns.length;
+        if (this.isColumnFullyVisible(visColLength - 1)) {
+            this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList.last.column.field, false);
+        } else {
+            this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1];
+            this.grid.filteringService.shouldFocusNext = false;
+            this.grid.headerContainer.scrollTo(visColLength - 1);
+        }
+    }
+
     public performShiftTabKey(currentRowEl, rowIndex, visibleColumnIndex) {
         if (visibleColumnIndex === 0) {
                 if (this.isRowInEditMode(rowIndex)) {
                     this.grid.rowEditTabs.last.element.nativeElement.focus();
                     return;
                 }
                 if (rowIndex === 0 && this.grid.allowFiltering) {
-                    this.grid.rowList.first.cells.first._clearCellSelection();
-                    const visColLength = this.grid.visibleColumns.length;
-                    if (this.grid.headerContainer.getItemCountInView() === visColLength) {
-                        this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList.last.column.field, false);
-                    } else {
-                        this.grid.filteringService.columnToFocus = this.grid.visibleColumns[visColLength - 1];
-                        this.grid.filteringService.shouldFocusNext = false;
-                        this.grid.headerContainer.scrollTo(visColLength - 1);
-                    }
+                    this.moveFocusToFilterCell();
                 } else {
                     this.navigateUp(currentRowEl, rowIndex,
                         this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);

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

@@ -207,8 +207,12 @@ export class IgxGridGroupByRowComponent {
                 break;
             case 'tab':
                 if (event.shiftKey) {
-                    this.grid.navigation.navigateUp(this.nativeElement, this.index,
-                        this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);
+                    if (this.index === 0) {
+                        this.grid.navigation.moveFocusToFilterCell();
+                    } else {
+                        this.grid.navigation.navigateUp(this.nativeElement, this.index,
+                            this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);
+                    }
                 } else {
                     this.grid.navigation.navigateDown(this.nativeElement, this.index, 0);
                 }