[data grid] Actions grid column type prevents row mode change using tab navigation

[tsmithhisler]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/editing/#full-featured-crud

Steps:

1. Double click first name field placing row in edit mode
2. Hit tab until out of data grid (notice row still in edit mode)
3. Cut and paste the actions column definition in columns array to be any position other than first or last
4. Repeat steps 1 and 2, notice that tab navigation on final column now puts row back in view mode

Current behavior

When editing a row with an actions column as the final column in the data grid, tabbing through the fields causes the focus to break out of the data grid and will not place the row back in the view state upon exit.

Expected behavior

Hitting tab when the focus is on the final column in the data grid while in edit mode should place the current mode back into view mode and move the focus to the next row.

Context

I'm trying to build a data entry table that supports keyboard navigation but has several actions buttons in the final column. When not using the actions column, users can easily edit rows and use tab to move through cells and onto subsequent rows. The actions column as the final column breaks that same navigation sequence.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.52)
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.3 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.37 
    @mui/core-downloads-tracker:  5.15.11 
    @mui/lab: 5.0.0-alpha.166 => 5.0.0-alpha.166 
    @mui/material: 5.15.11 => 5.15.11 
    @mui/private-theming:  5.15.11 
    @mui/styled-engine:  5.15.11 
    @mui/system: 5.15.11 => 5.15.11 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.11 
    @mui/x-data-grid:  6.19.5 
    @mui/x-data-grid-pro: 6.19.5 => 6.19.5
    @mui/x-date-pickers:  6.19.5
    @mui/x-date-pickers-pro: 6.19.5 => 6.19.5
    @mui/x-license-pro: 6.10.2 => 6.10.2
    @types/react: 18.2.60 => 18.2.60
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.3.3 => 5.3.3

Search keywords: Actions Column Focus Row Edit

[michelengelen]

Hey @tsmithhisler I can confirm that this is a bug, or at least an inconsistency.
I will add this to the board for the team to discuss.

Additional note: when tabbing out of the action cell it is not possible to tab back into it from the next cell. See video:

Screen.Recording.2024-03-01.at.12.19.33.mov

[PeturSteinn]

Additional note: when tabbing out of the action cell it is not possible to tab back into it from the next cell.

@michelengelen I came here to find exactly this issue I'm having! Are there any updates on this? It is extremely bad for my users when trying to navigate into a detail panel below the row where they can enter in some data. I have some actions at the end of my row and they can't get past them using TAB.