FormikOnBlur: debounce submissions
import { FormikConfig, FormikProvider, FormikValues, useFormik } from 'formik';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useCallback } from 'react';
export function FormikOnBlur<
Values extends FormikValues = FormikValues,
ExtraProps = {}
>(props: FormikConfig<Values> & ExtraProps) {
const formikBag = useFormik<Values>({ ...props, validateOnBlur: true });
- const [submitting, setSubmitting] = useState(false);
- useEffect(() => {
+ const trySubmit = useCallback(_.debounce((formikBag) => {
if (
Object.keys(formikBag.errors || {}).length === 0 &&
formikBag.dirty &&
- !formikBag.isSubmitting &&
- !submitting
+ !formikBag.isSubmitting
) {
- setSubmitting(true);
- const { values } = formikBag;
- formikBag.validateForm(values)
- .then(valid => valid ?
- formikBag.submitForm().then(() => {
- formikBag.resetForm({ values });
- setSubmitting(false);
- }) : null
- );
+ formikBag.submitForm();
}
+ }, 100), []);
+
+ useEffect(() => {
+ trySubmit(formikBag);
}, [
- formikBag.errors,
- formikBag.dirty,
- submitting,
- formikBag.isSubmitting
+ formikBag.values,
+ formikBag.errors
]);
useEffect(() => {
