'Shift+Enter' keys navigation sets focus to two cells in the editable column of ag-Grid in Angular 9

Question

I am using a ag-Grid with an editable column named 'Cost'. The requirements are mentioned below:

If the user edits a value in any cell of this column and presses 'Enter' key, the focus should move to the cell below in the same column and turn it into edit mode (I am able to achieve this without any issues)
If the user edits a value in any cell of this column and presses 'Shift + Enter' keys, the focus should move to the cell above in the same column and convert it into edit mode

In the 'Shift + Enter' scenario, the focus moves to the cell above and turns it into edit mode but the focus is also set to a cell two rows below in the same column i.e two cells in the column now have focus, one in edit mode(I need this) and one in non-edit mode(I shouldn't have this) as shown in the image below

The code in the html file is:

<ag-grid-angular
   #agGrid
   style="width:100%; height:100vh"
   id="myGrid"
   class="ag-theme-balham-dark"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
   [singleClickEdit]="true"
   [enterMovesDown]="true"
   [enterMovesDownAfterEdit]="true"
   [autoGroupColumnDef]="autoGroupColumnDef"
   [treeData]="true"
   [rowData]="rowData"
   [groupDefaultExpanded]="groupDefaultExpanded"
   [getDataPath]="getDataPath"
   (cellValueChanged)="onCellValueChanged($event)"
   (keyup)="onKeyUp($event)"
   (gridReady)="onGridReady($event)"
   >
</ag-grid-angular>

I am using 'keyup' event for this and the code inside 'onKeyUp' function in the component file is:

onKeyUp(e) {
  if(e.key === 'Enter') {
    if(e.shiftKey) {
      this.gridApi.startEditingCell({
        rowIndex: (this.gridApi.getFocusedCell().rowIndex - 2),
        colKey: this.gridApi.getFocusedCell().column.colId
      });
    }
    else {
      this.gridApi.startEditingCell({
        rowIndex: this.gridApi.getFocusedCell().rowIndex,
        colKey: this.gridApi.getFocusedCell().column.colId
      });
    }
  }
}

I want to get rid of the focus set to cell two rows below the actual cell in edit mode as shown in the image. Please help me with this.

suvenk suvenk · Accepted Answer · 2020-05-30T13:31:09

I was finally able to solve the problem. Find 'rowIndex' and 'colKey' for current row and then use clearFocusedCell() to clear the non-required focus before converting the required cell into edit mode.

onKeyUp(e) {
 if(e.key === 'Enter') {
  if(e.shiftKey) {
     var rowIndex = this.gridApi.getFocusedCell().rowIndex;  <-- Added line 
     var colKey = this.gridApi.getFocusedCell().column.colId  <-- Added line
     this.gridApi.clearFocusedCell();  <-- Added line

     this.gridApi.startEditingCell({
       rowIndex: (rowIndex - 2),
       colKey: colKey
     });
  }
  else {
     this.gridApi.startEditingCell({
       rowIndex: this.gridApi.getFocusedCell().rowIndex,
       colKey: this.gridApi.getFocusedCell().column.colId
     });
  }
 }
}

'Shift+Enter' keys navigation sets focus to two cells in the editable column of ag-Grid in Angular 9

1 Answers