[data grid] Tab key functionality is broken when using DatePicker within the MUI DataGrid

[vlastocom]

Related page

https://mui.com/x/react-data-grid/custom-columns/#date-pickers

Kind of issue

Broken demo

Issue description

Well, kind of broken. Integrating MUI DatePickers this way has one downside: If you switch to editMode="row" for your grid, the tab key can no longer be used to move between the fields in the edited row. And if you select a date (dateTime) field, you cannot use the tab key to move out. I wonder if there is an easy way to fix this?

Steps to reproduce:

1. Click on the "open in CodeSandbox" button under the code for the demo in this section
2. Change line 167 to: <DataGrid rows={rows} columns={columns} editMode="row" />
3. Go to the demo pane
4. Double-click the first column in any row (the row will become editable)
5. Use the tab key to move to the next cell (works)
6. Use the tab key to move to the date cell after (broken)
7. Use shift-tab key to move to the first cel again (works)

Context

I simply want to integrate DatePicker (which is much more eye-pleasing and robust to my DataGrid implementation, but have to edit my grid in the "row" mode, not the "cell" mode.

Search keywords: TAB DataGrid DatePicker broken

[vlastocom]

Oh... one more thing. In the above steps, if in the point 4 double-click the row in the third column, the row becomes editable, but the DateTimePicker in the fourth column becomes focused instead (unexpected) and the tab key can't be used at all to move to other editable fields.

[k-rajat19]

Hi,
you have to handle focus manually when the cell receives focus

Oh... one more thing. In the above steps, if in the point 4 double-click the row in the third column, the row becomes editable, but the DateTimePicker in the fourth column becomes focused instead (unexpected) and the tab key can't be used at all to move to other editable fields.

remove autoFocus prop

[michelengelen]

Hi, you have to handle focus manually when the cell receives focus

Oh... one more thing. In the above steps, if in the point 4 double-click the row in the third column, the row becomes editable, but the DateTimePicker in the fourth column becomes focused instead (unexpected) and the tab key can't be used at all to move to other editable fields.

remove autoFocus prop

@vlastocom could you try the provided workaround?

[LukasTy]

Having an autoFocus set with editMore="row" does not sound optimal.
As for when this prop is removed, I think there are still some problems with navigation, could @mui/xgrid check this? 🤔

Screen.Recording.2024-12-23.at.18.14.53.mov