ag-grid loses focus after refresh

Question

I'm using ag-grid in Angular 4.x. Whenever the grid is refreshed it loses focus. This seems to be a bug in ag-grid.

Is there any workaround, like setting the focus back to the grid, so that keyboard navigation still functions?

Cheers, Seeschorle

score 10 · Accepted Answer · answered Nov 24 '17 at 06:24

Here is my solution:

   private bringFocusBack() {
      let cell = this.gridOptions.api.getFocusedCell();

      if ( cell ) {
         this.gridOptions.api.setFocusedCell( cell.rowIndex, cell.column );
      }
   }

Call this method after doing the refresh:

this.gridOptions.api.refreshRows( rowsToRefresh );
this.bringFocusBack();

score 2 · Answer 2 · edited Nov 23 '17 at 09:25

2

Before Refreshing the grid, save the rowIndex of selectedRow

   let CellRowIndex = selectedRow.rowIndex;

After Refreshing,

     if (this.GridOptions.api != undefined ) {            
        this.GridOptions.api.selectIndex(CellRowIndex, false, false);
    }

edited Nov 23 '17 at 09:25

Nigel Ren

56,122
11
43
55

answered Nov 23 '17 at 07:41

bensonissac

635
5
10

1

There are no rows selected. The grid is used without row selection. – Seeschorle Nov 24 '17 at 06:21
1

Then You can try , this.GridOptions.api.setFocusedCell(CellRowIndex, "ColumnName"); – bensonissac Nov 24 '17 at 07:14

score 1 · Answer 3 · answered Sep 22 '20 at 07:54

Ive also been using similar solution (in react tho) to approved answer, however this may generate some bugs (that i encounter now). After grid refreshes it will force focus a cell - that is a browser level focus it seems, so if you had an input focused it will lose it. Same if you had a dropdown list opened - it might close as browser thinks that you focused/clicked cell in grid.

ag-grid loses focus after refresh

3 Answers3