React /Formik - How to disable autofocus from the first field in a Formik form?

Question

I have a form build with formik, it is set in a modal. When I open the modal the first field is always focused. This is the form:

   <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
      {({  isValid}) => (
        <Form>
          <FlexRow>
            <FlexColumn className="mr-4 w-36">
              <FormikDate
                icon={<IconFa icon={calendarAlt} />}
                label={i18next.t('timeWindow.customDateLabel')}
                name="date"
                disabledDate={isDayInThePast}
                validate={(value: string) => formikIsValidYYYYMMDDDate(value, 'Date not valid')}
              />
            </FlexColumn>
            <FlexColumn className="mr-4 w-36">
              <FormikTime
                name="timeFrom"
                label={i18next.t('btimeWindow.timeFrom')}
                icon={<IconFa icon={clock} />}
                validate={(value: string) => formikValidationRequired(value, i18next.t('application.required'))}
              />
            </FlexColumn>
            <FlexColumn className="mr-4 w-36">
              <FormikTime
                type="time"
                name="timeTo"
                label={i18next.t('timeWindow.timeTo')}
                icon={<Icon icon={clock} />}
                validate={(value: string) => formikValidationRequired(value, i18next.t('application.required'))}
              />
            </FlexColumn>
          </FlexRow>
          <hr className="w-full mt-8    border-t border-gray-300 border-0 border-solid" />
          <FlexRow justifyContent="end" gap="8">
            <ButtonBase variant="secondary" onClick={toggleCustomTimeView} type="button">
              {i18next.t('button.cancel')}
            </ButtonBase>
            <ButtonBase
              variant="primary"
              type="submit"
              disabled={!isValid}
            >
              {i18next.t('timeWindow.timeSlot')}
            </ButtonBase>
          </FlexRow>
        </Form>
      )}
    </Formik>

How can I avoid having first field focused?

Since in my case first field is a DatePicker which then opens its own modal with calendar and I don't want it to be open without clicking on the field first.

Answer 1

I don't know... but I can try to suggest a couple of attempts.

1st attempt: tabIndex

It seems that Formik does not support the tabIndex attribute: just nest your Formik fileds in a <div> (without any margin, border and padding) with the proper tabIndex.

            <FlexColumn className="mr-4 w-36">
              <div tabIndex="3">
                <FormikDate
                  icon={<IconFa icon={calendarAlt} />}
                  label={i18next.t('timeWindow.customDateLabel')}
                  name="date"
                  disabledDate={isDayInThePast}
                  validate={(value: string) => ...}
                />
              </div>
            </FlexColumn>

A possible attempt to completely avoid a field to be focused could be to add an empty <div tabIndex="0"> inside the <Formik> - before any form field - and setting tabIndex greather than 0 for all other fields.

2nd attempt: throug code

useEffect(() => document.activeElement.blur(), []);