search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.15k stars 1.3k forks source link

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

Open tsmithhisler opened 7 months ago

tsmithhisler commented 7 months ago

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 commented 7 months ago

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:

https://github.com/mui/mui-x/assets/32863416/a16ea00c-618f-49c1-9fed-ce4f7420e5e8