I'm using the base flatpickr with a custom MUI Textfield to display the selected date and time.
flatpickr(".startDate", {
onChange: (selectedDates, dateStr, instance) => {
setDate(dateStr);
},
mode: "single",
maxDate: new Date().fp_incr(365),
"locale": Portuguese,
enableTime: true,
wrap: true,
});
<S.DateInputGrid className='startDate'>
<S.Input
hiddenLabel
type='text'
placeholder="Data"
fullWidth
data-input
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<RiCalendarEventFill />
</InputAdornment>
)
}}
/>
</S.DateInputGrid>
When I select the date or change the time, datepicker closes.
This behaviour doesn't occur when I remove the setDate. I've tried using the confirmDatePlugin but the problem remains. Also tried changing to React-Flatpickr, but to use the custom Textfield I must use a ref (as far as I know), and the ref glitches the input value.