Date input component not displaying correctly when view in mobile device

[yong2579]

What you were expecting:
DateInput / DateTimeInput component are rendered correctly when view in mobile device

What happened instead:
DateInput / DateTimeInput component is cut off

Steps to reproduce:
To reproduce, simply navigate to https://marmelab.com/react-admin-demo/#/commands using a mobile device (e.g. iphone), then select the filter button and select the filter "Passed Since".

Miscellaneous
I realise if you view it from chrome on a desktop and emulate an iphone device using developer tools, you can see the expected behavior

Additionally if you select a date and rotate the iphone to landscape and rotate it back to portrait, the expected behavior is also achieved

For reference I have also seek for help in stackflow via https://stackoverflow.com/questions/76960417/react-admin-date-input-component-not-displaying-correctly-when-view-in-mobile-de

Note that so far this only happen on mobile device, tested windows surface and is ok.

Also tested using a mac machine running xcode to emulate iphone and the date input component is also cut off.

Environment

• React-admin version: The version as per react-admin demo
• Last version that did not exhibit the issue (if applicable): Unknown, new to react-admin and evaluating for new project
• React version: The version as per react-admin demo
• Browser: safari 16.6 on iphone, chrome 116.0.5845.118 on iphone, edge and chrome on huawei p20
• Stack trace (in case of a JS error): Nil

[slax57]

Thanks for opening this issue.

According to my investigations, this comes from the fact that Safari on mobile does not have a placeholder text for <input type="date"> on mobile.

See: https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/date

In Chrome (desktop):

In Safari mobile:

This, combined with the fact that the input does not seem to have a minWidth, seems to cause the issue.

Can you try using the sx prop to set a minWidth to see if it solves the issue?

[yong2579]

Thanks for the reply!

I set the following on the date time input component and while the input does appear in full width (kind of hacky since it is not fluid anymore), the placeholder dd-mm-yyyy --:-- -- is not available which I does understand is once again due to the browser on mobile issue

<DateTimeInput sx={{ minWidth: "14rem" }} source="occurAt_gte" label="resources.incidents.fields.occurAtStart" />

Is there any workaround to this issue?

Additionally while testing i realised on mobile device, the reset button (which is actually clear when view on non-mobile device) is not able clear the value, it somehow remember the old value. However the clear does work on a non-mobile device.

[slax57]

Okay so setting a minWidth seems to work. we'll could try to add it by default on the component to avoid this issue.

Regarding the missing placeholder, it seems this can be worked around with some CSS: flatpickr/flatpickr#1103 (comment)

Since this is a browser-dependent behaviour, I don't think we should try to fix (or workaround) it in RA.

[fzaninotto]

I think part of the problems reported here should be reported to the material-ui repository.

Otherwise, I'm +1 for solving what can be solved on the react-admin side with a minWidth.

[yong2579]

I totally understand you guys, tested at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date using samsung, iphone, huawei device and we can conclude the behavior differ by settings in operating system (not device, not browser). Guess this cannot by fixed at the root by anyone other than the operating system vendor themselves. Sincerely appreciate you guys comments! Personally I believe react-admin will be an asset to our organisation and trying to convince my management that the organisation should use this framework. Great work guys!