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.

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

React Material Date control not keyboard accessible #2277

Open
lukasf opened this issue Feb 10, 2024 · 3 comments
Open

React Material Date control not keyboard accessible #2277

lukasf opened this issue Feb 10, 2024 · 3 comments
Assignees
Milestone

Comments

@lukasf
Copy link
Contributor

lukasf commented Feb 10, 2024

Describe the bug

In 3.1.0, keyboard input for date fields was kind of broken (fields were entered in wrong order), but it still worked. In 3.2.0, the keyboard cannot be used at all to input dates.

Interestingly, in the "Array" example page, a totally different date renderer is used. It is perfectly keyboard accessible. I do not see anything special in the schema or uiSchema. Is it possible to use this in normal, non-array forms?

Expected behavior

It should be possible to enter dates using keyboard. This is much faster for people who enter a lot of data.

Steps to reproduce the issue

Open the Control example page. Tab into the date field. See how you cannot use the keyboard at all.

Screenshots

No response

Which Version of JSON Forms are you using?

v3.2.0

Framework

React

RendererSet

Material

Additional context

No response

@sdirix
Copy link
Member

sdirix commented Feb 12, 2024

I'm wondering why it doesn't work for you. For me it works fine within the text input. In the popup the digits don't work but I can use the arrow keys.

Using keyboard in date input (using digits and tab)

EnteringDateInputKeyboard

Using keyboard in date popup (enter, arrows and tab)

EnteringDatePopupKeyboard

I recorded on the JSON Forms website. Does it behave differently for you?

@lukasf
Copy link
Contributor Author

lukasf commented Feb 12, 2024

That's really interesting. On my laptop, when I tab into the date control, my keyboard input does not have any effect. Numbers don't work, and also up/down arrow does not have any effect. I can use left/right to select parts of the date (e.g. year), but then I cannot change it via up/down and also numbers still don't work. When the popup is open, keyboard works inside the popup (select day using arrows, etc). I tried Firefox, Edge and Chrome, all same. I can type numbers in number/integer field and text fields. But not in the text area of date, also not in time or datetime.

When I open the same website on my desktop PC, everything works as expected. Same language/region settings and keyboard layout (all german). I also switched to US keyboard layout on the laptop, still no improvement. Very strange, I have never seen such an issue before.

@sdirix sdirix added this to the 3.x milestone Mar 12, 2024
@TheZoker
Copy link
Collaborator

TheZoker commented Apr 2, 2024

Thanks for reporting this issue!
After further investigation it turns out, that this is default material ui behavior:
https://mui.com/x/react-date-pickers/base-concepts/#responsiveness

If the screen is to small, the date picker will be shown in the mobile variant. The mobile variant does not allow for keyboard input.

If you would like to force the desktop variant all the time, you can use a custom renderer, which will use the DesktopDatePicker instead of the DatePicker (which is responsive by default).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants