React Material Date control not keyboard accessible

[lukasf]

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]

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)

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

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

[lukasf]

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.

[TheZoker]

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).