React-day-picker: Can't set empty value for input ( reproduction )

Created on 26 Sep 2018  路  6Comments  路  Source: gpbl/react-day-picker

There was a similar error, but could not reproduce it.

https://codesandbox.io/s/7m6q1y8xmj

reproduction

Image from Gyazo

Most helpful comment

Though I've upgraded to 7.4.8 I don't see this being resolved. When I clear out the value (in a blur function when the entry is deemed to be invalid) the typedValue remains the same. Is there something more that needs to be done besides simply upgrading to 7.4.8?

All 6 comments

Ran into this issue as well. Looks like PR #816 should fix this assuming it gets merged.

This would be a temporary solution.
This error is the one that shows when you try to modify the state:
_Warning: A component is changing a controlled input of type undefined to be uncontrolled_

I have solved it this way, it is not recommended to use refs but ... xD

<DayPickerInput
    value={from}
    ref={(el) => (this.from = el)}
.../>
<DayPickerInput
    value={to}
    ref={(el) => (this.to = el)}
.../>
handleResetClick = () => {
        // this fixed the encapsulated input uncontrolled bug
        this.from.setState({ value: '', typedValue: '' });
        this.to.setState({ value: '', typedValue: '' });
    };

I hope this works for people who still fail.

In order to avoid refs, I used another little hack 馃槄

<DayPickerInput
    value={to || ' '}
.../>

This has been fixed in the latest releases - please upgrade thanks

Though I've upgraded to 7.4.8 I don't see this being resolved. When I clear out the value (in a blur function when the entry is deemed to be invalid) the typedValue remains the same. Is there something more that needs to be done besides simply upgrading to 7.4.8?

The latest release still exhibits this problem when clearing a value that is not a valid Date.

I've played around changing the following line to also set the typed value to the given value & the problem seems to go away.

https://github.com/gpbl/react-day-picker/blob/v7/src/DayPickerInput.js#L198

if (isDate(value)) {
  newState.value = formatDate(value, format, dayPickerProps.locale);
} else {
  newState.value = value;
  newState.typedValue = value;
}

However I'm not a 100% certain this is the best solution, but it seems to work for my use case, where dates are stored in the form state as plain strings.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

davidjbradshaw picture davidjbradshaw  路  3Comments

dreamyguy picture dreamyguy  路  5Comments

samsch picture samsch  路  6Comments

michaelgriffithus picture michaelgriffithus  路  5Comments

thebuilder picture thebuilder  路  3Comments