Merge branch 'nalipiev/ng-update-9.0.0' of https://github.com/IgniteUI/igniteui-angular into nalipiev/ng-update-9.0.0

Author: Lipata

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -14,6 +14,10 @@ import { IgxCell, IgxRow } from './selection/selection.service';
 import { GridType } from './common/grid.interface';
 import { ColumnType } from './common/column.interface';
 import { IRowToggleEventArgs } from './common/events';
+import {
+    ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS
+} from '../core/utils';
+import { first, debounceTime } from 'rxjs/operators';
 /**
  *@hidden
  */
@@ -578,6 +582,12 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         if (grid.rowEditable) {
             grid.endEdit(true);
         }
+        const eventKey = event && (event as any).key ? (event as any).key.toLowerCase() : null;
+        if (eventKey && this.isToggleKey(eventKey)) {
+            (this.grid as any).zone.onStable.pipe(debounceTime(30)).pipe(first()).subscribe(() => {
+                this.focusActiveCell(rowID);
+            });
+        }
     }
 
     public get_rec_by_id(rowID) {
@@ -588,4 +598,20 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         return this.grid.expansionStates.get(rowID) !== expanded;
     }
 
+    private isToggleKey(key: string): boolean {
+        return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
+    }
+
+    private focusActiveCell(rowID) {
+        // persist focused cell
+        const isVirtualized = !this.grid.verticalScrollContainer.dc.instance.notVirtual;
+        const el = this.grid.selectionService.activeElement;
+        if (isVirtualized && el) {
+            const cell = this.get_cell_by_key(rowID, this.grid.visibleColumns[el.column].field);
+            if (cell) {
+                cell.nativeElement.focus();
+            }
+        }
+    }
+
 }

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

@@ -3400,7 +3400,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.expansionStatesChange.emit(this._expansionStates);
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
-            this._focusActiveCell();
         }
     }
 
@@ -6257,16 +6256,4 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             advancedFilteringDialog.closeDialog();
         }
     }
-
-   protected _focusActiveCell() {
-    // persist focused cell
-    const isVirtualized = !this.verticalScrollContainer.dc.instance.notVirtual;
-    const el = this.selectionService.activeElement;
-    if (isVirtualized && el) {
-        const cell = this.gridAPI.get_cell_by_visible_index(el.row, el.column);
-        if (cell) {
-            cell.nativeElement.focus();
-        }
-    }
-}
 }

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

@@ -93,31 +93,15 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
     dispatchEvent(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
         if (event.altKey && !this.row.added) {
-            const grid = this.gridAPI.grid;
             const collapse = this.row.expanded && (key === 'left' || key === 'arrowleft' || key === 'up' || key === 'arrowup');
             const expand = !this.row.expanded && (key === 'right' || key === 'arrowright' || key === 'down' || key === 'arrowdown');
             if (collapse) {
                 this.gridAPI.set_row_expansion_state(this.row.rowID, false, event);
             } else if (expand) {
                 this.gridAPI.set_row_expansion_state(this.row.rowID, true, event);
             }
-            if (expand || collapse) {
-                const rowID = this.cellID.rowID;
-                grid.cdr.detectChanges();
-                this.persistFocusedCell(rowID);
-            }
             return;
         }
         super.dispatchEvent(event);
     }
-
-    protected persistFocusedCell(rowID) {
-        requestAnimationFrame(() => {
-            // TODO: Test it out
-            const cell = this.gridAPI.get_cell_by_key(rowID, this.column.field);
-            if (cell) {
-                cell.nativeElement.focus();
-            }
-        });
-    }
 }

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

@@ -561,13 +561,15 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
         fixture.detectChanges();
          // collapse
         parentCell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', altKey: true }));
+        fixture.detectChanges();
         await wait(100);
         fixture.detectChanges();
         parentCell = hierarchicalGrid.getCellByColumn(38, 'ID');
         expect(parentCell.focused).toBeTruthy();
 
         // expand
         parentCell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', altKey: true }));
+        fixture.detectChanges();
         await wait(100);
         fixture.detectChanges();
         parentCell = hierarchicalGrid.getCellByColumn(38, 'ID');

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

@@ -408,7 +408,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => {
             TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell);
 
             cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', altKey: true }));
-            await wait(DEBOUNCETIME);
+            await wait(DEBOUNCETIME * 2);
             fix.detectChanges();
 
             rows = TreeGridFunctions.getAllRows(fix);
@@ -427,7 +427,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => {
 
             cell = treeGrid.getCellByColumn(0, 'ID');
             cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', altKey: true }));
-            await wait(DEBOUNCETIME);
+            await wait(DEBOUNCETIME * 2);
             fix.detectChanges();
 
             rows = TreeGridFunctions.getAllRows(fix);
@@ -448,7 +448,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => {
             // Go to the last parent row and expand collapse
             cell = treeGrid.getCellByColumn(0, 'ID');
             cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', ctrlKey: true }));
-            await wait(2 * DEBOUNCETIME);
+            await wait(DEBOUNCETIME * 2);
             fix.detectChanges();
 
             cell = treeGrid.getCellByColumn(9, 'ID');
@@ -458,7 +458,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => {
             cell = treeGrid.getCellByColumn(8, 'ID');
 
             cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', altKey: true }));
-            await wait(DEBOUNCETIME);
+            await wait(DEBOUNCETIME * 2);
             fix.detectChanges();
 
             cell = treeGrid.getCellByColumn(8, 'ID');
@@ -475,7 +475,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => {
             cell = treeGrid.getCellByColumn(8, 'ID');
 
             cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', altKey: true }));
-            await wait(DEBOUNCETIME);
+            await wait(DEBOUNCETIME * 2);
             fix.detectChanges();
 
             cell = treeGrid.getCellByColumn(8, 'ID');