react-datepicker: BUG: value in input isn't updated when selected prop is reset.

Expected behavior

When the prior initialized picker has the selected property reset on event, the associated input field should be updated accordingly.

Actual behavior

the selected prop is reset, but input text stays static.

Steps to reproduce

initialize a datepicker with a valid controlled selected prop with onChange and onBlur handlers and an editable “value” text input so when initialized, the formatted date will populate the input, e.g., 12/25/2018.
Manually delete all characters in the input.
At this point the selected property should be null.
In the onBlur handler, check for the selected property to be null, and it if is, reinitialize the selected state object.
After event, notice the input remains blank, but the date is set to the selected prop value.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15

Most upvoted comments

@karlkras I worked out something that might fulfill your case. I had to set a prop to your custom component. I’ve worked with react-datepicker using redux and that was how we got the default date to show, because it was stored as a prop in the global state. Hope this helps.

NguyenDa18 on Oct 2, 2018

@karlkras , @gangwar1 The ‘selected’ prop is only set when you trigger the ‘onChange’ prop when you choose a date on the datepicker. The prop ‘onChangeRaw’ is what is actually connected to the input box. When you make a change in the input box, onChangeRaw should do the handling like so:

<Datepicker
 onChangeRaw={e => customHandler(moment(e.target.value))}
onChange={date => handleDateAndSelectedPropUpdated(date)}
/>

Hope this helps!

NguyenDa18 on Oct 1, 2018