Merge pull request #8592 from IgniteUI/ddincheva/colGroupsNav-9.1

Fix: navigation in MCH headers when grid has no data --9.1.x

Author: Lipata

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

@@ -230,7 +230,8 @@ export class IgxGridNavigationService {
     }
 
     protected forOfDir(): IgxForOfDirective<any> {
-        const forOfDir = this.grid.dataRowList.length > 0 ? this.grid.dataRowList.first.virtDirRow : this.grid.headerContainer;
+        const forOfDir = this.grid.dataRowList.length > 0 ? this.grid.dataRowList.first.virtDirRow : this.grid.summariesRowList.length ?
+        this.grid.summariesRowList.first.virtDirRow : this.grid.headerContainer;
         return forOfDir as IgxForOfDirective<any>;
     }
 
@@ -324,6 +325,13 @@ export class IgxGridNavigationService {
     }
 
     public performHorizontalScrollToCell(visibleColumnIndex: number, cb?: () => void) {
+        if (this.grid.rowList < 1 && this.grid.summariesRowList.length < 1 && this.grid.hasColumnGroups) {
+            let column = this.grid.getColumnByVisibleIndex(visibleColumnIndex);
+            while (column.parent) {
+                column = column.parent;
+            }
+            visibleColumnIndex = this.forOfDir().igxForOf.indexOf(column);
+        }
         if (!this.shouldPerformHorizontalScroll(visibleColumnIndex)) { return; }
         this.pendingNavigation = true;
         this.grid.parentVirtDir.onChunkLoad

projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts

@@ -16,6 +16,7 @@ import {
 import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
 import { DebugElement } from '@angular/core';
 import { GridSelectionMode, FilterMode } from '../common/enums';
+import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 
 const DEBOUNCETIME = 30;
 
@@ -1231,5 +1232,42 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => {
 
              expect(GridFunctions.getExcelStyleFilteringComponent(fix)).toBeNull();
         });
+
+        it('MCH Grid with no data: should be able to navigate with arrow keys in the headers', () => {
+            grid.filter('Country', 'Bulgaria', IgxStringFilteringOperand.instance().condition('contains'), true);
+            fix.detectChanges();
+
+            expect(grid.rowList.length).toBe(0);
+
+            let header = GridFunctions.getColumnGroupHeaderCell('General Information', fix);
+            UIInteractions.simulateClickAndSelectEvent(header);
+            fix.detectChanges();
+
+            GridFunctions.verifyHeaderIsFocused(header);
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowRight', gridHeader, false, false, true);
+            fix.detectChanges();
+
+            header = GridFunctions.getColumnGroupHeaderCell('Address Information', fix);
+            GridFunctions.verifyHeaderIsFocused(header);
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridHeader, false, false, false);
+            fix.detectChanges();
+
+            header = GridFunctions.getColumnHeader('Region', fix);
+            GridFunctions.verifyHeaderIsFocused(header.parent);
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowRight', gridHeader, false, false, false);
+            fix.detectChanges();
+
+            header = GridFunctions.getColumnGroupHeaderCell('Country Information', fix);
+            GridFunctions.verifyHeaderIsFocused(header);
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', gridHeader, false, false, true);
+            fix.detectChanges();
+
+            header = GridFunctions.getColumnHeader('CompanyName', fix);
+            GridFunctions.verifyHeaderIsFocused(header.parent);
+        });
     });
 });