useFormik validation doesn't change isValidating

[fireridlle]

🐛 Bug report

Current Behavior

When use async validation withFormik(), it doesn't change isValidating

Expected behavior

isValidating should be true when validation in pending state

Reproducible example

https://codesandbox.io/s/formik-playground-m92iv?file=/src/index.js

[pirquessa]

Got the same issue. Did you find a solution @fireridlle ?

[fireridlle]

@pirquessa kinda of

  const validate = ({ data }: Data) => {
    if (!data) return Promise.resolve()
    formik.setStatus({ isValidating: true })
async validation
 formik.setStatus({ isValidating: false })
  }

then at the component

<Button
      loading={formik.isSubmitting || formik.status?.isValidating}
      className="mt-6 mb-4"
      disabled={!formik.isValid}
      stretched
    >
      Continue
    </Button>

[pirquessa]

How did you get a ref on formik instance ?

[fireridlle]

didn't get your question. you can pass formik to validate method as a prop, or in my case I have custom hook

export const useIntroduceYourselfForm = (props: Props) => {
  const onSubmit = useOnSubmit(props)

  const validate = ({ promoCode }: PromoCodeParam) => {
    if (!promoCode) return Promise.resolve()
    formik.setStatus({ isValidating: true })

    return new Promise(resolve => {
      debouncedValidatePromoCode(
        { ...props.otpVerification, promoCode },
        (error: ApiAxiosError | ValidationError) => {
          formik.setStatus({ isValidating: false })
          resolve(error)
        }
      )
    })
      .then(onlyValidationError(({ fields }) => fields))
      .catch(defaultOnError)
  }
  const formik = useFormik({
    initialValues: {
      fullName: '',
      email: '',
      promoCode: '',
      emailSubscriptionStatus: true,
    },
    validate,
    onSubmit: data => onSubmit(data).catch(defaultOnError),
  })

  return formik
}