Flatpickr closes when calling a setState inside onChange, how to fix this?

95 Views Asked by At

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.

0

There are 0 best solutions below