Trigger submit on change

[marcobiedermann]

Description

It would be great to have an option to call handleSubmit on change instead of form submission.
This would allow the form to be submitted if any of the fields change e.g. auto-save/auto-search.

There is already an option for validation but not for submitting the form.

useForm({
  mode: 'onChange'
})

Listening on change is currently only possible via watch

useEffect(() => {
  const formData = watch()

  console.log({ formData })
}, [watch()])

Proposal

useForm({
  submitMode: 'onChange'
})

References

Formik auto-save: jaredpalmer/formik#1218 (comment)

[bluebill1049]

could you do something like this?

useEffect(() => {
  watch((dta) => {
    // you can throttle the request here as well, and without any render to the UI
    saveData(data)
  })
}, [watch])

[andrevinsky]

@bluebill1049 kindly asking to please explain your reluctance to include such option in the library itself. I.e. the file's onChange is one of the cases where the functionality to submit will come right off handy. Not naming other reasons I came across while searching for solution to my task.

[marcobiedermann]

@bluebill1049 works, TypeScript is just complaining about some types

[k-zakhariy]

https://codesandbox.io/s/react-hook-form-auto-save-xgulp?file=/src/AutoSave.tsx

[wj127]

As of today no official answer...it would have been very nice seeing this feature added into the library

[xkomiks]

I agree that this is a necessary feature in such a popular library.

[florinkrasniqi]

After trying out @k-zakhariy's method, which worked but for my case didn't see the need of having a custom file for that, I just tweaked the code a bit and used it in one of my form like this:

import { useDeepCompareEffect } from 'use-deep-compare';
import debounce from 'lodash.debounce';

const debouncedSave = useCallback(
  debounce(() => {
    form.handleSubmit(props.onSubmit)();
  }, 1000),
  [form, props.onSubmit],
);

const watchedData = form.watch();

useDeepCompareEffect(() => {
  if (form.formState.isDirty) {
    debouncedSave();
  }
}, [watchedData]);