appfolio
DateInput does not provide the last selected date to onClose callback
Problem
The DateInput component does not return the last selected date in onClose when we use DateInput with a value property and the onClose callback. This happens when we change the month's view to a month that is not the current one and we pick a day in the new month that is not the same one as the day in the original month.
Example
The component is created as follows:
<DateInput onChange={onChange} onClose={onCloseCallback} value={dateValue} />
The value can be controlled by some state management library, useState, etc. based on the value provided by the onChange callback.
- Let's imagine the initial value is today's date 11/16/2022.
- Open the date picker
- Switch to next's month view (December view)
- Pick a day that is not the 16th (the initial day that was provided to the value) so for example December 9th 2022.
Observed Result
The onClose callback is called with 12/16/2022 instead of 12/9/2022.
Desired Result
The onClose callback is called with the last selected date, here it is 12/9/2022
I think the onClose callback can be called before the onChange callback so value won't be updated when onClose is called.
We should probably use getDerivedStateFromProps to sync state.value with props.value as an easy fix.
