Hello, I’m new to JSON Forms, and I have a project which needs to work on mobile as well as desktop. In trying out a page of my form on mobile, I was happy to see that most of it worked, but I can’t seem to get a date field to accept any input. If I tap the blank where I want to enter a date, no date picker comes up, no keyboard comes up, and there appears to be no way to enter a value into the date field.
Is there some way to have JSON Forms render some control that is compatible with mobile? Perhaps even something that will render HTML that will be picked up by the client’s browser and show the native OS date picker? Either that or show a similar one to the date picker that shows on desktop.
For convenience – I noticed that the problematic behavior is reproducible using just the developer tools mobile view in Chrome.
I would like to avoid writing a custom renderer if possible (especially for a simple date entry).
EDIT: I tried swapping materialRenderers for vanillaRenderers from @jsonforms/vanilla-renderers and that functions, although the form is not very pretty. Is there a way to get pretty Material styling and a functional date field?
I was able to reproduce the problem with the current (hosted) JSON Forms React seed.
It seems that the icon to open the dialog to enter the date is for some reason invisible once any kind of “responsive” device is used. However it’s still there and can be clicked.
So the issue should be reported with Material UI. Once it’s fixed it should also work in JSON Forms.
If you find a workaround with the Material UI Theming support, then you don’t need to adjust any renderer. Alternatively you can use a different date picker or the browser native one by implementing a custom renderer. If you don’t need all the custom storage and display format support, this should be rather simple.
I am also able to reproduce the issue there, but I cannot reproduce what you said here:
However it’s still there and can be clicked.
I have clicked everywhere on there and can’t get anything to pop up.
When I go to the Material UI guide link you provided, it works just fine for me. I’m struggling to know if this is really a Material UI bug or JSON Forms issue since my testing results are different from yours so far.
FWIW, I’ve tested with the same results on:
Chrome 121.0.6167.185
Firefox 122.0.1
Edge 121.0.2277.128
Thanks for your help so far! I hope it’s not just me missing something obvious. I’m still new to JSON Forms and Material UI.
Ah I see where my confusion comes from. The icon is actually supposed to be invisible on mobile and any click into the input opens up the popup. There also seems to be a difference between the versions of the x-date-pickers, as some of them open a popup with the Chrome developer tools and some don’t.
As it works with the latest example from Material Ui itself, we will have to investigate this.
Can you try with the latest prerelease of JSON Forms (3.3.0-alpha.1)? We solved an issue with the date pickers and the described problem should no longer occur.
