We have had to override the standard navigation service's handleNavigation method to address some other issues in the grid (trying to navigate while in the details area, pressing enter in a textarea while editing a cell), so we have just extended this functionality to also support tabbing off of a cell that is not editable.

This support includes determining whether the column is not editable or the cell could not enter edit mode because of rules enforced in cellEditEnter.

In addition to setting focus on the next tab, we also call the method associated with onCellClick to ensure that this cell navigation is treated like tabbing from an editable cell.

Basically:

        const activeNode = this.grid.navigation.activeNode;

        let newCellPosition: ICellPosition;
        if (event.shiftKey) {
            newCellPosition = this.grid.getPreviousCell(activeNode.row, activeNode.column);
        } else {
            newCellPosition = this.grid.getNextCell(activeNode.row, activeNode.column);
        }

        this.grid.navigateTo(newCellPosition.rowIndex, newCellPosition.visibleColumnIndex);
        const newCell = this.grid.getCellByColumnVisibleIndex(newCellPosition.rowIndex, newCellPosition.visibleColumnIndex);
        if (!newCell) {
            return;
        }

        newCell.activate(event);

        this.handleCellClick(newCell);

        event.preventDefault();