Listening to our value prop (and its aliases) in a useEffect to set the flatpickr instance, and enforcing onChange events to update our state on the onChange resulting in our updating the FP instance caused an endless loop. We now JSON.stringify the value prop and its aliases and keep these in our dependency array, so they will only be recognized as changed when they actually have changed, eventually preventing DateTimePicker from going into an endless loop.
Fix calendar icon click
The problem was caused by some weird behavior of the open() method of the flatpickr instance that we used in handleCalendarIconClick. In order to avoid having to use this method, we remove the calendar icon button element completely, and set the calendar icon (or clock icon for pure time pickers) as an inlined background image. By doing this, when users click the icon, they actually click the input element as if they were clicking somewhere else in the DateTimePicker. As a resutl, the open() method of flatpickr is not used at all anymore in our component and can not play up.
Fix #575 Fix #578
Fix endless Loop
Listening to our
valueprop (and its aliases) in auseEffectto set the flatpickr instance, and enforcingonChangeevents to update our state on the onChange resulting in our updating the FP instance caused an endless loop. We now JSON.stringify thevalueprop and its aliases and keep these in our dependency array, so they will only be recognized as changed when they actually have changed, eventually preventing DateTimePicker from going into an endless loop.Fix calendar icon click
The problem was caused by some weird behavior of the
open()method of the flatpickr instance that we used inhandleCalendarIconClick. In order to avoid having to use this method, we remove the calendar icon button element completely, and set the calendar icon (or clock icon for pure time pickers) as an inlined background image. By doing this, when users click the icon, they actually click the input element as if they were clicking somewhere else in the DateTimePicker. As a resutl, theopen()method of flatpickr is not used at all anymore in our component and can not play up.