React-dates: Disable free text typing on DateInput

[sag1v]

Hi, is there a way to disable free text typing on DateInput?
Couldn't find it on the Docs.

[chris-pearce]

I was wondering this also.

Currently it's unusable as you cannot see what you're typing, i.e., no visible cursor, due to the input having opacity: 0 to show the <div> (.DateInput__display-text) underneath it.

Basically to disable you want to apply the readonly attribute to the inputs which I see there's CSS for: https://github.com/airbnb/react-dates/blob/master/css/DateInput.scss#L54-L59. Seems there's no prop to apply this?

I actually don't want to disable user input as it's a nice UX feature but due to the non-visible cursor it's unavoidable.

Great work on this lib though, really powerful and easy to customise 👍 .

[chris-pearce]

In local dev I've been getting a console warning too when doing CMD + A to select all (and some other key entries):

[erin-doyle]

I've submitted a PR adding a readOnly prop to the SingleDatePicker. Hopefully, it's acceptable. :crossed_fingers:

[majapw]

Should be fixed in 11.2.0

[sag1v]

Good job people! though i don't see an example on storybook, am i blind and missed it?
is this site running the latest version?

[majapw]

I don't think we added an example (whoops!) but the readOnly prop is available to use. :P

[ljharb]

See #504

[erin-doyle]

Yeah, there are a number of props that there aren't examples for in the storybook so I just figured an example wasn't needed for this. But one certainly could be added if it is thought to be significant enough. Or the knobs plugin could be added to the storybook to allow people to play with the props themselves.