React-day-picker: DayPickerInput on mobile triggers focus, which brings the keyboard over the calendar

[dreamyguy]

Strange... I see this problem was previously reported on #100, but I do get this problem with "react-day-picker": "^7.0.5" (upgraded from 6.2.1 30 mins ago).

Isn't anyone else getting this problem? The implementation is done through a DayPickerInput component.

[gpbl]

@dreamyguy the input component always worked like this on mobile. Could you show us the code that was working with v6? Maybe you were passing props to the input component that now should be passed via inputProps?

[dreamyguy]

Sorry I could have been clearer. It was not working on v6 either, so I upgraded to see if it was working with v7. So no changes there.

I got the impression on #100 that this was not an issue with DayPickerInput, as another user suggested the screenshot taken was from another component/project.

So I guess there's no way around it, then?

[gpbl]

Duplicate of https://github.com/gpbl/react-day-picker/issues/583

[dreamyguy]

For reference, I'd just like to point out that passing the property readOnly: true through inputProps made the input get the readonly attribute that prevents direct user input on the input field.

This is great because the keyboard will no longer be triggered on mobile, and therefore will not cover the calendar. This also improve input validation for those who must have it. ✨

<DayPickerInput
  inputProps={{ readOnly: true }}
  placeholder="DD/MM/YYYY"
  format="DD/MM/YYYY"
/>

Change the input style (like cursor: pointer) and you'll end up with an input that will be experienced more like a button.

Big thanks to @gpbl who guided me in the right direction.

[gpbl]

Thanks for writing back @dreamyguy !