react-flatpickr icon indicating copy to clipboard operation
react-flatpickr copied to clipboard

Clear date does not trigger onChange

Open viktoryoo opened this issue 2 years ago • 0 comments

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.

viktoryoo avatar Aug 10 '22 08:08 viktoryoo