How to ensure validation mode / reValidateMode is properly reset after successful submit?

[chengmuy]

I'd like to fully reset the form state after a successful submission. In particular, with the defaults for mode and reValidateMode (onSubmit, onChange respectively), after a successful form submission, validation should only occur again with onSubmit rather than onChange.

However, reset() in onSubmit as below doesn't seem to achieve this -- it seems to reset the form before isSubmitted is set to true and before submitCount is incremented, which then causes validation to continue to occur with onChange rather than onSubmit. So, after a successful submission, submitCount == 1 and isSubmitted == true, despite the reset.

Could someone point me towards the right way to achieve this behavior? I also tried something like onSubmit={ handleSubmit(onSubmit)(); reset(); } but that of course resets after every submission rather than only successful ones.

const Form = () => {
  const { register, handleSubmit, errors, reset, formState } = useForm();

  const { isDirty, touched, isSubmitted, submitCount } = formState;

  console.log(isSubmitted, submitCount);
  window.submitCount = submitCount;

  const onSubmit = (data, ev) => {
    console.log(data);
    reset();
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
    >
      <label>Name:</label>
      <input name="Name" ref={register({ required: 'true', minLength: 3, maxLength: 20 })} />
      <label>Description:</label>
      <input
        name="Desc"
        ref={register({
          required: 'Description is required',
          maxLength: { value: 50, message: 'Description may not be more than 50 characters' },
        })}
      />
      {errors.Desc && <p>{errors.Desc.message}</p>}
      <input type="submit" />
      <input type="reset" onClick={reset} />
    </form>
  );
};

[bluebill1049]

can you reproduce this in a codesandbox?

[mariusc23]

In case it helps anyone, I managed to work around this by calling reset in a setTimeout.