SlickGrid not shifting focus away from grid when tabbing out of last cell that is editable

Question

When a SlickGrid is set up with:

enableAddRow: false,
enableCellNavigation: true,
autoEdit: true

and the last column in that SlickGrid is configured with:

editor: null,
focusable: false,
selectable: false

When attempting to tab out of the SlickGrid by tabbing out of the second to last column in the last row, I would expect the focus to be moved to the next focusable element outside of the grid, but it does not.

See this example, and try to tab out of the grid from the last row. I would expect the focus to shift to the textboxes below the grid, but it does not and instead focus is lost while the active cell in the grid is not reset.

Is there a way to fix this? To ensure, when tabbing out of an editable cell that is followed by an uneditable unfocusable cell, that focus is moved out of the grid?

A workaround would be to make the last column focusable: true, but that is not an option since it breaks the user experience forcing the user to tab through an uneditable cell before reaching an editable cell.

Answer 1

Can you try below if it works for you.

yourGrid.onKeyDown.subscribe(function(event) {
  if (event.keyCode === 9 && event.shiftKey === false) { // check its only tab not shift tab
    if (yourGrid.getActiveCell().cell === lastCol) { // check if the current cell is the last editable column 
      $("#b").trigger('focus'); // this or below line should work for focus, "b" is your text input
      document.getElementById("b").focus(); // either this or above line
      event.stopImmediatePropagation();
    }
  }
});

UPDATE

Fixed it by changing the code in the plugin. The issue were coming and I think its a bug in the Slickgrid. After the change in below function your example is working in my local. Please replace the below function code and let me know if this is working for you.

function setActiveCellInternal(newCell, opt_editMode) {
      var lastActiveCell = null;
      var lastActiveRow = null;
      if (activeCellNode !== null) {
        makeActiveCellNormal();
        $(activeCellNode).removeClass("active");
        if (rowsCache[activeRow]) {
          $(rowsCache[activeRow].rowNode).removeClass("active");
        }
        var lastActiveCell = getCellFromNode(activeCellNode); // my added
        lastActiveRow = activeRow;
      }

      var activeCellChanged = (activeCellNode !== newCell);


      activeCellNode = newCell;

      if (activeCellNode != null) {
          //alert('1-3')
        activeRow = getRowFromNode(activeCellNode.parentNode);
        activeCell = activePosX = getCellFromNode(activeCellNode);

        if (opt_editMode == null) {
          opt_editMode = (activeRow == getDataLength()) || options.autoEdit;
        }

        $(activeCellNode).addClass("active");
        $(rowsCache[activeRow].rowNode).addClass("active");
        //alert(options.editable +' - '+ opt_editMode);
        if (options.editable && opt_editMode && isCellPotentiallyEditable(activeRow, activeCell) && ((lastActiveCell !== activeCell || lastActiveRow !== activeRow) ) ) { // not sure if need acheck on row also
          clearTimeout(h_editorLoader);

          if (options.asyncEditorLoading) {
            h_editorLoader = setTimeout(function () {
              makeActiveCellEditable();
            }, options.asyncEditorLoadDelay);
          } else {
            makeActiveCellEditable();
          }
          //alert('1-4')
        }
      } else {
        activeRow = activeCell = null;
        //alert('1-5')
      }

      if (activeCellChanged) {
          //alert('1-6')
        trigger(self.onActiveCellChanged, getActiveCell());
      }
    }

Answer 2

See the link below. https://github.com/mleibman/SlickGrid/issues/104

Since you cannot tab out of the last cell, you can try committing the change when you click on save changes

if (Slick.GlobalEditorLock.isActive() && !Slick.GlobalEditorLock.commitCurrentEdit()) return;

Will that work?

Answer 3

Can you try to replace the gotoRight function with below code in slick.grid.js file and try.

function gotoRight(row, cell, posX) {
  if (cell >= columns.length) {
    return null;
  }
  do {
    cell += getColspan(row, cell);
  }
  while (cell < columns.length && !canCellBeActive(row, cell));
  if(cell == columns.length && !canCellBeActive(row, cell)) {
    setActiveCell(row,cell-1)
  }
  if (cell < columns.length) {
    return {
      "row": row,
      "cell": cell,
      "posX": cell
    };
  }
  return null;
}