diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts index b8beb886740..03ac534540e 100644 --- a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts +++ b/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 */ diff --git a/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts b/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts index e327858e99a..5c878475c4c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts +++ b/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(); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts index 5ce3b82948b..9a7e01897e2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts +++ b/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', () => {