Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tab key functionality is broken when using DatePicker within the MUI DataGrid #15965

Open
vlastocom opened this issue Dec 21, 2024 · 2 comments · May be fixed by #15967
Open

Tab key functionality is broken when using DatePicker within the MUI DataGrid #15965

vlastocom opened this issue Dec 21, 2024 · 2 comments · May be fixed by #15967
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page

Comments

@vlastocom
Copy link

vlastocom commented Dec 21, 2024 •
edited by github-actions bot
Loading

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 vlastocom added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Dec 21, 2024
@vlastocom
Copy link
Author

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 k-rajat19 linked a pull request Dec 21, 2024 that will close this issue
Open
1 task
@k-rajat19
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[docs] Fix EditingWithDatePickers demo k-rajat19/mui-x
2 participants
@vlastocom @k-rajat19