Merge pull request #16393 from IgniteUI/mkirkova/fix-16262-20.1.x

Preserve navigation when cellEdit is cancelled and editMode is set to false - 20.1.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -332,8 +332,11 @@ export class IgxCellCrudState {
 
 
     /** Clears cell editing state */
-    public endCellEdit() {
+    public endCellEdit(restoreFocus: boolean = false) {
         this.cell = null;
+        if (restoreFocus) {
+            this.grid.tbody.nativeElement.focus();
+        }
     }
 
     /** Returns whether the targeted cell is in edit mode */

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

@@ -188,7 +188,7 @@ export class IgxGridCell implements CellType {
             // TODO possibly define similar method in gridAPI, which does not emit event
             this.grid.crudService.enterEditMode(this);
         } else {
-            this.grid.crudService.endCellEdit();
+            this.grid.crudService.endCellEdit(true);
         }
         this.grid.notifyChanges();
     }

projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts

@@ -361,6 +361,48 @@ describe('IgxGrid - Cell Editing #grid', () => {
             expect(cell.editMode).toBe(false);
             expect(cell.value).toBe(newValue);
         }));
+
+        it('should preserve the navigation when cancel cellEdit and async set cell.editMode=false', fakeAsync(() => {
+            grid.cellEdit.subscribe((evt: IGridEditEventArgs) => {
+                evt.cancel = true;
+                const rowIndex = evt.cellID.rowIndex;
+                const field = evt.column.field;
+                const target = grid.getCellByColumn(rowIndex, field);
+                setTimeout(() => {
+                    target.editMode = false;
+                }, 100);
+            });
+
+            const cell = grid.gridAPI.get_cell_by_index(0, 'fullName');
+
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell);
+            fixture.detectChanges();
+            tick(16);
+            expect(cell.editMode).toBeTrue();
+
+            const editInput = fixture.debugElement.query(By.css('igx-grid-cell input'));
+            if (editInput) {
+                UIInteractions.clickAndSendInputElementValue(editInput, 'Edited');
+            }
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('enter', gridContent);
+            fixture.detectChanges();
+
+            tick(100);
+            fixture.detectChanges();
+            expect(cell.editMode).toBeFalse();
+
+            expect(document.activeElement).toBe(grid.tbody.nativeElement);
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', document.activeElement as HTMLElement, true);
+            fixture.detectChanges();
+
+            const nextCell = grid.getCellByColumn(0, 'age');
+            const active = (grid as any).navigation.activeNode;
+            expect(active.row).toBe(0);
+            expect(active.column).toBe(nextCell.column.visibleIndex);
+        }));
     });
 
     describe('Scroll, pin and blur', () => {