Merge branch 'ddincheva/focuslessKBNav' of https://github.com/IgniteUI/igniteui-angular into ddincheva/focuslessKBNav

Author: nrobakova

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

@@ -211,6 +211,9 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     headerNavigation(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
+        if (!this.activeNode.layout) {
+            this.activeNode.layout = this.layout(this.activeNode.column || 0);
+        }
         if (key.includes('down') || key.includes('up')) {
             event.preventDefault();
             const children = this.parentByChildIndex(this.activeNode.column).children;

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

@@ -201,12 +201,15 @@ export class IgxGridNavigationService {
     focusTbody(event) {
         this.activeNode = !this.activeNode ? { row: 0, column: 0 } : this.activeNode;
         if (!this.activeNode || !(this.activeNode.row < 0 || this.activeNode.row > this.grid.dataView.length - 1)) { return; }
-        this.navigateInBody(0, 0, (obj) => { obj.target.activate(event); });
+        this.navigateInBody(0, 0, (obj) => {
+            this.grid.clearCellSelection();
+            obj.target.activate(event);
+        });
     }
 
     focusFirstCell(header = true) {
         if (this.activeNode && (this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length)) { return; }
-        this.activeNode = { row: header ? -1 : this.grid.dataView.length, column: 0 };
+        this.activeNode = { row: header ? -1 : this.grid.dataView.length, column: 0, level: 0 };
         this.performHorizontalScrollToCell(0);
     }
 

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -40,7 +40,6 @@
         [attr.aria-label]="column.header || column.field"
         [attr.aria-expanded]="column.expanded"
         [attr.aria-selected]="column.selected"
-        tabindex="0"
         [ngClass]="{
             'igx-grid__th--pinned-last': hasLastPinnedChildColumn,
             'igx-grid__th--pinned-first': hasFirstPinnedChildColumn,
@@ -51,6 +50,7 @@
         [ghostHost]="grid.outletDirective.nativeElement"
         [attr.droppable]="true"
         [igxColumnMovingDrop]="column"
+        (pointerdown)="activate()"
         (click)="groupClicked($event)"
         (pointerenter)="onPinterEnter()"
         (pointerleave)="onPointerLeave()"
@@ -80,7 +80,7 @@
 
 <ng-container *ngIf="!column.columnGroup">
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>
-    <igx-grid-header [igxColumnMovingDrag]="column" [ghostHost]="grid.outletDirective.nativeElement" [attr.droppable]="true" [igxColumnMovingDrop]="column" [gridID]="column.grid.id" [column]="column"></igx-grid-header>
+    <igx-grid-header [igxColumnMovingDrag]="column" [ghostHost]="grid.outletDirective.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [igxColumnMovingDrop]="column" [gridID]="column.grid.id" [column]="column"></igx-grid-header>
     <igx-grid-filtering-cell *ngIf="grid.allowFiltering && grid.filterMode == 'quickFilter'" [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
     <span *ngIf="!column.columnGroup && column.resizable" class="igx-grid__th-resize-handle"
           [igxResizeHandle]="column"

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -298,14 +298,15 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
     @HostListener('pointerdown', ['$event'])
     public pointerdown(event): void {
         event.stopPropagation();
-        this.grid.navigation.activeNode = {row: -1, column: this.column.visibleIndex, level: this.column.level,
-            mchCache: {level: this.column.level, visibleIndex: this.column.visibleIndex},
-            layout: this.column.columnLayoutChild ? {
-            rowStart: this.column.rowStart,
-            colStart: this.column.colStart,
-            rowEnd: this.column.rowEnd,
-            colEnd: this.column.colEnd,
-            columnVisibleIndex: this.column.visibleIndex} : null };
+        this.activate();
+    }
+
+    /*
+     * This method is necessary due to some specifics related with implementation of column moving
+     * @hidden
+     */
+    public activate() {
+        this.grid.navigation.activeNode = this.activeNode;
     }
 
     public ngDoCheck() {
@@ -325,6 +326,17 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         this.column.applySelectableClass = false;
     }
 
+    private get activeNode() {
+        return {row: -1, column: this.column.visibleIndex, level: this.column.level,
+            mchCache: {level: this.column.level, visibleIndex: this.column.visibleIndex},
+            layout: this.column.columnLayoutChild ? {
+            rowStart: this.column.rowStart,
+            colStart: this.column.colStart,
+            rowEnd: this.column.rowEnd,
+            colEnd: this.column.colEnd,
+            columnVisibleIndex: this.column.visibleIndex} : null };
+    }
+
     constructor(private cdr: ChangeDetectorRef,
         public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
         public element: ElementRef,