Merge pull request #7270 from IgniteUI/ddincheva/kbNavBugFix

Keyboard Navigation bug fixes

Author: rkaraivanov

CHANGELOG.md

@@ -145,7 +145,6 @@ All notable changes for each version of this project will be documented in this
             - The first cell in the first body row;
             - The first cell in column summary if exists;
             - Pager UI;
-    - `onGridKeydown` event is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
 
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.

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

@@ -100,7 +100,6 @@ import { IgxGridColumnResizerComponent } from './resizing/resizer.component';
 import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-row.component';
 import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
 import { IgxColumnResizingService } from './resizing/resizing.service';
-import { DeprecateProperty } from '../core/deprecateDecorators';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import {
     IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
@@ -1342,7 +1341,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      *  <igx-grid (onGridKeydown)="customKeydown($event)"></igx-grid>
      * ```
      */
-    @DeprecateProperty('onGridKeydown event is deprecated. Now you can directly bind to keydown on the IgxGrid component.')
     @Output()
     public onGridKeydown = new EventEmitter<IGridKeydownEventArgs>();
 
@@ -2806,7 +2804,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     _setupListeners() {
         const destructor = takeUntil<any>(this.destroy$);
-
         this.onRowAdded.pipe(destructor).subscribe(args => this.refreshGridState(args));
         this.onRowDeleted.pipe(destructor).subscribe(args => {
             this.summaryService.deleteOperation = true;
@@ -5683,10 +5680,21 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         const shouldScrollVertically = this.navigation.shouldPerformVerticalScroll(rowIndex, visibleColIndex);
         const shouldScrollHorizontally = this.navigation.shouldPerformHorizontalScroll(visibleColIndex, rowIndex);
         if (shouldScrollVertically) {
-            this.navigation.performVerticalScrollToCell(rowIndex, visibleColIndex,
-                () => { this.navigateTo(rowIndex, visibleColIndex, cb); });
+            this.navigation.performVerticalScrollToCell(rowIndex, visibleColIndex, () => {
+                if (shouldScrollHorizontally) {
+                    this.navigation.performHorizontalScrollToCell(visibleColIndex, () =>
+                     this.executeCallback(rowIndex, visibleColIndex, cb));
+                } else {
+                    this.executeCallback(rowIndex, visibleColIndex, cb);
+                }});
         } else if (shouldScrollHorizontally) {
-            this.navigation.performHorizontalScrollToCell(visibleColIndex, () => { this.navigateTo(rowIndex, visibleColIndex, cb); });
+            this.navigation.performHorizontalScrollToCell(visibleColIndex, () => {
+                if (shouldScrollVertically) {
+                    this.navigation.performVerticalScrollToCell(rowIndex, visibleColIndex, () =>
+                        this.executeCallback(rowIndex, visibleColIndex, cb));
+                } else {
+                    this.executeCallback(rowIndex, visibleColIndex, cb);
+                }});
         } else {
             this.executeCallback(rowIndex, visibleColIndex, cb);
         }

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

@@ -3,7 +3,7 @@ import { IgxGridBaseDirective } from './grid-base.directive';
 import { first } from 'rxjs/operators';
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxGridNavigationService } from './grid-navigation.service';
-import { HORIZONTAL_NAV_KEYS } from '../core/utils';
+import { HORIZONTAL_NAV_KEYS, HEADER_KEYS } from '../core/utils';
 
 /** @hidden */
 @Injectable()
@@ -35,11 +35,11 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
                 break;
             case 'arrowleft':
             case 'left':
-                colIndex = ctrl ? this.firstIndexPerRow : this.getNextHorizontalCellPositon(true).column;
+                colIndex = ctrl ? this.firstIndexPerRow : this.getNextHorizontalCellPosition(true).column;
                 break;
             case 'arrowright':
             case 'right':
-                colIndex = ctrl ? this.lastIndexPerRow : this.getNextHorizontalCellPositon().column;
+                colIndex = ctrl ? this.lastIndexPerRow : this.getNextHorizontalCellPosition().column;
                 break;
             case 'arrowup':
             case 'up':
@@ -162,7 +162,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             });
     }
 
-    getNextHorizontalCellPositon(previous = false) {
+    getNextHorizontalCellPosition(previous = false) {
         const parent = this.parentByChildIndex(this.activeNode.column);
         if (!this.hasNextHorizontalPosition(previous, parent)) {
             return { row: this.activeNode.row, column: this.activeNode.column };
@@ -214,11 +214,15 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     headerNavigation(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
+        if (!HEADER_KEYS.has(key)) { return; }
+        event.preventDefault();
         if (!this.activeNode.layout) {
             this.activeNode.layout = this.layout(this.activeNode.column || 0);
         }
-        if (key.includes('down') || key.includes('up')) {
-            event.preventDefault();
+        const alt = event.altKey;
+        const ctrl = event.ctrlKey;
+        this.performHeaderKeyCombination(this.grid.getColumnByVisibleIndex(this.activeNode.column), key, event.shiftKey, ctrl, alt);
+        if (!ctrl && !alt && (key.includes('down') || key.includes('up'))) {
             const children = this.parentByChildIndex(this.activeNode.column).children;
             const col = key.includes('down') ? this.getNextRowIndex(children, false) : this.getPreviousRowIndex(children, false);
             if (!col) { return; }
@@ -232,14 +236,13 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     protected horizontalNav(event: KeyboardEvent, key: string, rowIndex: number) {
         const ctrl = event.ctrlKey;
-        if (!HORIZONTAL_NAV_KEYS.has(key)) { return; }
-        event.preventDefault();
+        if (!HORIZONTAL_NAV_KEYS.has(key) || event.altKey) { return; }
         this.activeNode.row = rowIndex;
         if ((key.includes('left') || key === 'home') && this.activeNode.column > 0) {
-            this.activeNode.column = ctrl || key === 'home' ? this.firstIndexPerRow : this.getNextHorizontalCellPositon(true).column;
+            this.activeNode.column = ctrl || key === 'home' ? this.firstIndexPerRow : this.getNextHorizontalCellPosition(true).column;
         }
         if ((key.includes('right') || key === 'end') && this.activeNode.column !== this.lastIndexPerRow) {
-            this.activeNode.column = ctrl || key === 'end' ? this.lastIndexPerRow : this.getNextHorizontalCellPositon().column;
+            this.activeNode.column = ctrl || key === 'end' ? this.lastIndexPerRow : this.getNextHorizontalCellPosition().column;
         }
         const newLayout = this.layout(this.activeNode.column);
         Object.assign(this.activeNode.layout, {colStart: newLayout.colStart, rowEnd: newLayout.rowEnd});