Open flaviendelangle opened 3 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.
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.
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.
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?
Duplicates
Latest version
Current behavior 😯
Follow up on #2854
On a
date
ordatetime-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:
Last login
columnTab