DayPickerInput: While editing input, onBlur does not reset its state #681
Description
This sandbox could be used to reproduce this issue: https://codesandbox.io/s/n915z85krm
To reproduce:
Delete the day manually and tab out. The input component has invalid date thats hard to reset.
Analysis:
Since the change handlers are only triggered when the change is valid, the parent component's state does not reflect the state internal to the input, hence cannot rerender the input component.
Proposed Fix:
Reset the input box's state with value prop while triggering onBlur event. As mentioned in issue: #600, we need to filter events triggered by month change buttons in onBlur and reset state on rest.
onBlur = (event) => {
if (!(event.relatedTarget && event.relatedTarget.classList.contains('DayPicker-Day'))) {
// The navigation button events are filtered by ^ check
// Reset input state with prop value
// Call onBlur prop with event
}
}
I can look at creating PR this evening. This would fix #600 as well.