react-flatpickr
react-flatpickr copied to clipboard
Clear date does not trigger onChange
I've installed react-flatpickr (3.10.13 version) as a dev dependency. When clearing the date via a button, onChange prop does not trigger my custom function. Here's an example of my code:
const TemplateDuration = (props) => {
const [durationTimeIsFilled, setDurationTimeIsFilled] = useState(false);
const refFlatpickr = useRef(null);
const onChangeCuttoffTime = (date) => {
// The chosen date from React Flatpickr is an array.
if (date && date.length > 0) {
setDurationTimeIsFilled(true);
// Some custom logic
} else if (date.length === 0 && !durationTimeIsFilled) {
console.log('Clear date');
}
};
const clearDate = () => {
refFlatpickr.current.flatpickr.clear();
setDurationTimeIsFilled(false);
};
return (
<div>
<Flatpickr
data-testid='input date'
ref={refFlatpickr}
options={{
mode: 'range',
enableTime: false,
dateFormat: timeFormat,
altFormat: timeFormat,
altInput: true,
position: 'below',
parseDate: (dateStr: string, format: string) => {
return dayjs(dateStr, format).toDate();
},
formatDate: (date, format) => {
// locale can also be used
return dayjs(date).format(format);
},
}}
onChange={onChangeCuttoffTime}
/>
{props.durationTimeIsFilled && (
<button onClick={clearDate}>
Clear date
</button>
)}
</div>
Expected result: When clearing date should be logged message "Clear date" Actual result: There is no logged message.
NOTE: Before updating to 3.10.13 version there was no problem.