Refactoring filter cell navigation so that it is handled in the navigation service. Handling special scenarios for hierarchical grid in the hierarchical navigation service.

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

@@ -82,46 +82,17 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
 
     @HostListener('keydown.tab', ['$event'])
     public onTabKeyDown(eventArgs) {
-        const nextIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) + 1;
 
         if (this.isLastElementFocused()) {
-            if (this.column === this.getLastPinnedFilterableColumn() &&
-                (!this.isColumnLeftVisible(nextIndex) || !this.isColumnRightVisible(nextIndex))) {
-                this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], false);
-                eventArgs.stopPropagation();
-                return;
-            }
-
-            if (nextIndex >= this.filteringService.unpinnedFilterableColumns.length) {
-                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();
-                }
-                eventArgs.preventDefault();
-            } else if (!this.column.pinned && !this.isColumnRightVisible(nextIndex)) {
-                eventArgs.preventDefault();
-                this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], true);
-            }
+            this.filteringService.grid.navigation.navigateNextFilterCell(this.column, eventArgs);
         }
         eventArgs.stopPropagation();
     }
 
     @HostListener('keydown.shift.tab', ['$event'])
     public onShiftTabKeyDown(eventArgs) {
         if (this.isFirstElementFocused()) {
-            const prevIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) - 1;
-
-            if (prevIndex >= 0 && this.column.visibleIndex > 0 && !this.isColumnLeftVisible(prevIndex) && !this.column.pinned) {
-                eventArgs.preventDefault();
-                this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[prevIndex], false);
-            } else if (this.column.visibleIndex === 0 ||
-                        (prevIndex < 0 && !this.getFirstPinnedFilterableColumn()) ||
-                        this.column === this.getFirstPinnedFilterableColumn()) {
-                eventArgs.preventDefault();
-            }
+            this.filteringService.grid.navigation.navigatePrevFilterCell(this.column, eventArgs);
         }
         eventArgs.stopPropagation();
     }
@@ -345,16 +316,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
         }
     }
 
-    private getLastPinnedFilterableColumn(): IgxColumnComponent {
-        const pinnedFilterableColums =
-            this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
-        return pinnedFilterableColums[pinnedFilterableColums.length - 1];
-    }
-
-    private getFirstPinnedFilterableColumn(): IgxColumnComponent {
-        return this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable)[0];
-    }
-
     private isColumnRightVisible(columnIndex: number): boolean {
         let currentColumnRight = 0;
         for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) {

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

@@ -2399,7 +2399,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         protected resolver: ComponentFactoryResolver,
         protected differs: IterableDiffers,
         protected viewRef: ViewContainerRef,
-        private navigation: IgxGridNavigationService,
+        public navigation: IgxGridNavigationService,
         public filteringService: IgxFilteringService,
         @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
         public summaryService: IgxGridSummaryService,

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

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { IgxGridBaseComponent } from './grid-base.component';
 import { first } from 'rxjs/operators';
-import { IgxColumnComponent } from './column.component';
+import { IgxColumnComponent, IgxColumnGroupComponent } from './column.component';
+import { IgxGridGroupByRowComponent } from './grid/groupby-row.component';
 
 enum MoveDirection {
     LEFT = 'left',
@@ -456,15 +457,68 @@ export class IgxGridNavigationService {
         }
     }
 
-    public moveFocusToFilterCell() {
+    public moveFocusToFilterCell(toStart?: boolean) {
         const columns = this.grid.filteringService.unpinnedFilterableColumns;
-        if (this.isColumnFullyVisible(columns.length - 1)) {
-            this.grid.filteringService.focusFilterCellChip(columns[columns.length - 1], false);
+        const targetIndex = toStart ? 0 : columns.length - 1;
+        const isVisible = toStart ? this.isColumnLeftFullyVisible(targetIndex) : this.isColumnFullyVisible(targetIndex);
+        if (isVisible) {
+            this.grid.filteringService.focusFilterCellChip(columns[targetIndex], false);
         } else {
-            this.grid.filteringService.scrollToFilterCell(columns[columns.length - 1], false);
+            this.grid.filteringService.scrollToFilterCell(columns[targetIndex], false);
         }
     }
 
+    public navigatePrevFilterCell(column: IgxColumnComponent, eventArgs) {
+        const cols = this.grid.filteringService.unpinnedFilterableColumns;
+        const prevFilterableIndex = cols.indexOf(column) - 1;
+        const prevIndex = cols[prevFilterableIndex].visibleIndex;
+        const visibleIndex = column.visibleIndex;
+
+        if (prevIndex >= 0 && visibleIndex > 0 && !this.isColumnLeftFullyVisible(prevIndex) && !column.pinned) {
+            eventArgs.preventDefault();
+            this.grid.filteringService.scrollToFilterCell(cols[prevIndex], false);
+        } else if (column.visibleIndex === 0 ||
+                    (prevIndex < 0 && !this.getFirstPinnedFilterableColumn()) ||
+                    column === this.getFirstPinnedFilterableColumn()) {
+            eventArgs.preventDefault();
+        }
+    }
+
+    public navigateNextFilterCell(column: IgxColumnComponent, eventArgs) {
+        const cols = this.grid.filteringService.unpinnedFilterableColumns;
+        const nextIndex = cols.indexOf(column) + 1;
+        if (column === this.getLastPinnedFilterableColumn() &&
+        !this.isColumnFullyVisible(nextIndex)) {
+        this.grid.filteringService.scrollToFilterCell(cols[nextIndex], false);
+        eventArgs.stopPropagation();
+        return;
+    }
+
+    if (nextIndex >= this.grid.filteringService.unpinnedFilterableColumns.length) {
+        if (!this.grid.filteringService.grid.filteredData || this.grid.filteringService.grid.filteredData.length > 0) {
+            if (this.grid.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
+                eventArgs.stopPropagation();
+                return;
+            }
+            this.goToFirstCell();
+        }
+        eventArgs.preventDefault();
+    } else if (!column.pinned && !this.isColumnFullyVisible(nextIndex)) {
+        eventArgs.preventDefault();
+        this.grid.filteringService.scrollToFilterCell(this.grid.filteringService.unpinnedFilterableColumns[nextIndex], true);
+    }
+    }
+
+    private getLastPinnedFilterableColumn(): IgxColumnComponent {
+        const pinnedFilterableColums =
+            this.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
+        return pinnedFilterableColums[pinnedFilterableColums.length - 1];
+    }
+
+    private getFirstPinnedFilterableColumn(): IgxColumnComponent {
+        return this.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable)[0];
+    }
+
     public performShiftTabKey(currentRowEl, rowIndex, visibleColumnIndex, isSummary = false) {
         if (visibleColumnIndex === 0) {
             if (this.isRowInEditMode(rowIndex)) {

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

@@ -1,6 +1,7 @@
 import { IgxGridNavigationService } from '../grid-navigation.service';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { first } from 'rxjs/operators';
+import { IgxColumnComponent, FilterMode } from '../grid';
 
 export class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
     public grid: IgxHierarchicalGridComponent;
@@ -227,16 +228,63 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
     }
 
     public performTab(currentRowEl, rowIndex, visibleColumnIndex) {
-        if (!this.grid.rowList.find(row => row.index === rowIndex + 1) && this.grid.parent &&
-        this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex === visibleColumnIndex) {
+        const isLastColumn = this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex === visibleColumnIndex;
+        const nextIndex = rowIndex + 1;
+        const virt = this.grid.verticalScrollContainer;
+        const isNextChild = nextIndex <= virt.igxForOf.length - 1 &&
+          this.grid.isChildGridRecord(virt.igxForOf[nextIndex]);
+          if (!this.grid.rowList.find(row => row.index === rowIndex + 1) && this.grid.parent &&
+          this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex === visibleColumnIndex) {
+            const childContainer = this.getChildGridRowContainer();
+            const nextIsSiblingChild = this.grid.parent ? !!childContainer.nextElementSibling : false;
+            if (nextIsSiblingChild) {
+                this.focusNextChildDOMElem(childContainer, this.grid.parent);
+                return;
+            }
             this.navigateDown(currentRowEl, rowIndex, 0);
+          } else if (isLastColumn && isNextChild) {
+            const isInView = virt.state.startIndex + virt.state.chunkSize > nextIndex;
+            if (!isInView) {
+                this.scrollGrid(this.grid, 'next', () => {
+                    this.focusNextChildDOMElem(currentRowEl, this.grid);
+                });
+            } else {
+                this.focusNextChildDOMElem(currentRowEl, this.grid);
+            }
         } else {
             super.performTab(currentRowEl, rowIndex, visibleColumnIndex);
         }
     }
+
+    private focusNextChildDOMElem(currentRowEl, grid) {
+        const gridElem = currentRowEl.nextElementSibling.querySelector('igx-hierarchical-grid');
+        const childGridID = gridElem.getAttribute('id');
+        const childGrid = this.getChildGrid(childGridID, grid);
+        if (childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) {
+            childGrid.navigation.moveFocusToFilterCell(true);
+            return;
+        }
+        this.focusNextChild(currentRowEl.nextElementSibling, 0, grid);
+    }
+
+    public navigatePrevFilterCell(column: IgxColumnComponent, eventArgs) {
+        if (column.visibleIndex === 0 && this.grid.parent) {
+            eventArgs.preventDefault();
+            let targetGrid = this.grid.parent;
+            const prevSiblingChild = this.getChildGridRowContainer().previousElementSibling;
+            if (prevSiblingChild) {
+                const gridElem = prevSiblingChild.querySelectorAll('igx-hierarchical-grid')[0];
+                targetGrid = this.getChildGrid(gridElem.getAttribute('id'), this.grid.parent);
+            }
+            this.focusPrev(targetGrid.unpinnedColumns[targetGrid.unpinnedColumns.length - 1].visibleIndex);
+        } else {
+            super.navigatePrevFilterCell(column, eventArgs);
+        }
+    }
+
     public performShiftTabKey(currentRowEl, rowIndex, visibleColumnIndex) {
         if (visibleColumnIndex === 0 && rowIndex === 0 && this.grid.parent) {
-            if (this.grid.allowFiltering) {
+            if (this.grid.allowFiltering && this.grid.filterMode === FilterMode.quickFilter) {
                 this.moveFocusToFilterCell();
             } else {
                 const prevSiblingChild = this.getChildGridRowContainer().previousElementSibling;

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

@@ -501,6 +501,36 @@ describe('IgxHierarchicalGrid Basic Navigation', () => {
         expect(parentCell.focused).toBeTruthy();
 
     }));
+
+    it('should move focus to/from filter chip when navigat with Tab/Shift+Tab from parent to child that has filtering. ', (async () => {
+        const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
+        child1.allowFiltering = true;
+        fixture.detectChanges();
+
+        const horizontalScrDir = hierarchicalGrid.dataRowList.toArray()[0].virtDirRow;
+        horizontalScrDir.scrollTo(6);
+        await wait(100);
+        fixture.detectChanges();
+
+        const lastParentCell = hierarchicalGrid.getCellByColumn(0, 'childData2');
+        lastParentCell.nativeElement.focus();
+        fixture.detectChanges();
+
+        lastParentCell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+        await wait(100);
+        fixture.detectChanges();
+
+        const filterItems = fixture.debugElement.queryAll(By.css('.igx-chip__item'));
+        const firstFilterItem =  filterItems[0].nativeElement;
+        expect(document.activeElement === firstFilterItem).toBeTruthy();
+
+        firstFilterItem.closest('.igx-grid__filtering-cell').dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
+        await wait(100);
+        fixture.detectChanges();
+
+        expect(lastParentCell.selected).toBeTruthy();
+        expect(lastParentCell.focused).toBeTruthy();
+    }));
 });
 
 

src/app/hierarchical-grid/hierarchical-grid.sample.html

@@ -11,13 +11,13 @@ <h4 class="sample-title">Sample One</h4>
             <igx-column field="ProductName" hasSummary='true'></igx-column>
         </igx-column-group>
 
-        <igx-row-island [key]="'childData'" [autoGenerate]="false" [allowFiltering]='true' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
+        <igx-row-island [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
                 <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
                 <igx-column-group header="Information2">
                     <igx-column field="ChildLevels"  [groupable]='true'></igx-column>
                     <igx-column field="ProductName"  [groupable]='true'></igx-column>
                 </igx-column-group>
-            <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable' >
+            <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable' [allowFiltering]='true' >
                     <igx-column field="ID" [hasSummary]='true'></igx-column>
                     <igx-column-group header="Information3">
                         <igx-column field="ChildLevels"></igx-column>
@@ -48,10 +48,10 @@ <h4 class="sample-title">Sample two</h4>
         <button igxButton="raised" (click)='toggleFirstIsland()'>Toggle level 1</button>
     </div>
     <igx-hierarchical-grid [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
-        <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' >
-            <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable'></igx-row-island>
+        <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable'  [allowFiltering]='true'  >
+            <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true'></igx-row-island>
         </igx-row-island>
-        <igx-row-island [key]="'childData2'" [autoGenerate]="true"></igx-row-island>
+        <igx-row-island [key]="'childData2'" [autoGenerate]="true" [allowFiltering]='true'></igx-row-island>
     </igx-hierarchical-grid>
 
 </div>