How to submit with React Hook Form when having mode onBlur?

Question

This is not like what this question is asking.

Basically, I have a form that I want to auto-submit whenever fields are changed. I.e. I do not want a submit button.

So, having this:

const {
  formState,
  handleSubmit
} = useForm<TSaveInputSchema>({
  mode: "onBlur",
  reValidateMode: "onChange",
  criteriaMode: "firstError",
  resolver: zodResolver(saveInputSchema),
});

const handleSave = useCallback<HandleSaveCallback>(
  (data) => {
    console.log("DATA SUBMIT", data);
  }
), []);

And HTML like this:

<form onSubmit={handleSubmit(handleSave)}>
  <input {...register("name")} />
</form>

does not call the handleSave function when the input field is blurred.

How can this be done, if possible? Or do I have to manually trigger the submit through other means (e.g. using useEffect)?

Answer 1

Too much refactor for the day, the solution was dumb:

Replace

<form onSubmit={handleSubmit(handleSave)}>
  <input {...register("name")} />
</form>

with

<input {...register("name", { onBlur:handleSubmit(handleSave) )} />

Answer 2

Found this: https://github.com/orgs/react-hook-form/discussions/2494#discussioncomment-1843760

Fiddled around and looks like this is just working (now?):

<form onBlur={handleSubmit(handleSave)}>