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.16k stars 1.3k forks source link

[DataGrid] Pressing Tab should not leave the cell while editing a date / dateTime field #2930

Open flaviendelangle opened 3 years ago

flaviendelangle commented 3 years ago

Duplicates

Latest version

Current behavior 😯

Follow up on #2854

On a date or datetime-local input, we use the tab key to switch among the date portions (from the year to the month for instance)

The current editing behavior is to move to the next cell when pressing Tab, which makes the input uncomfortable to edit.

Expected behavior 🤔

The browser input should behave like here https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/datetime-local#valeur

To approach it, I see several solutions

Solution 1

Only switch to the next cell when we are already editing the last portion of the date. But the browser API do not seem to tell us which portion is currently highlighted, and even if we had them, it may be buggy depending on the date format.

Solution 2

Never switch to the next cell with "Tab" on the GridEditDateCell

Solution 3

Leave as is

I love none of those solutions, I you have a better idea I am open to suggestions

Steps to reproduce 🕹

Steps:

  1. Go to https://deploy-preview-2918--material-ui-x.netlify.app/components/data-grid/editing/#cell-editing
  2. Start editing a cell in the Last login column
  3. Press Tab
m4theushw commented 2 years ago

On a date or datetime-local input, we use the tab key to switch among the date portions (from the year to the month for instance)

This is not the default behavior of <input type="date" />. The arrow keys are used to navigate between the date components. I don't think we should try to override how Tab behaves. Pressing it should move the focus to the next focusable element and this is what the grid is doing.

flaviendelangle commented 2 years ago

https://user-images.githubusercontent.com/3309670/142370173-8db5a0b8-7a6a-4974-837d-23b802f29287.mp4

When I press Tab on a datetime-local, I am switching between the date portions. And it does not work on the grid because we leave the cell.

m4theushw commented 2 years ago

On Edge, Tab moves the focus to the next focusable element. However, in Chrome and Firefox, they allow to navigate between the date components instead. Each browser implements the date input in a different way. There's no specification saying how keyboard navigation should work in these inputs. In this case, I think they should follow https://www.w3.org/TR/wai-aria-practices/#kbd_general_within. Weirdly, tabbing inside a <input type="number" /> in Firefox doesn't move the focus between the step up/down buttons but it goes to the next focusable element. 🤷‍♂️

The native date input has caused many problems in the past. I don't think it's worth to try to make the Tab work here. We should be using the date picker once it's available. If the user is implementing a custom component, he can stop the propagation and handle this key.

alexfauquette commented 2 years ago

I agree that if the behavior is not consistent between browser, we should keep simple and respect what the documentation says

  • A Escape keydown. It will also roll back changes done in the value of the cell.

@flaviendelangle should we close this issue?