issue: When using reValidateMode: 'onBlur', the form doesn't submit when its single error is fixed

[stowball]

Version Number

7.51.4

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-handlesubmit-v7-forked-wkshgg?file=%2Fsrc%2Findex.jsx

Steps to reproduce

When using reValidateMode: 'onBlur' and your form has 1 error, if your blur event is also clicking the button to submit the form, then the errors are removed, but the submit never happens.

Screencast of below steps:

react-hook-form.mp4

Steps to reproduce:

1. Go to https://codesandbox.io/p/sandbox/react-hook-form-handlesubmit-v7-forked-wkshgg?file=%2Fsrc%2Findex.jsx
2. Click on the Submit button with your mouse
3. Type "a" into focused form field
4. Click on the Submit button with your mouse without performing any other blur action

Expected behaviour

When the form has no errors, it should submit successfully when clicking the submit button

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

The input would need to fire an onBlur event for the revalidate.

[stowball]

But how? It feels very wrong to need to intercept onClick on the submit button, blur, refocus and then submit… if that's even a possible solution to the problem

[bluebill1049]

maybe try to do a trigger on the submit button click?

[stowball]

That doesn't seem to work either. The onClick doesn't seem to fire when there are errors:

const handleClick = () => {
    console.log(Math.radom());
    trigger();
    handleSubmit(onSubmit)();
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        {errors?.firstName ? <p>Enter a valid name</p> : null}
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            {...register("firstName", {
              required: true,
            })}
          />
        </div>
        <input type="submit" onClick={handleClick} />
      </form>
    </div>
  );

The random number gets logged on the first press which initially validates the form, but not on the 2nd.

Was that what you had in mind?

[bluebill1049]

yea that's what i have in mind, why it's not firing tho. it should as the onClick even there.

[erashu212]

Hi @bluebill1049,

If I understood correctly, you want the form to be submitted onBlur if form is valid. This is not expected behavior of reValidationMode. However you can achieve this by using below code snippet.

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const { register, handleSubmit, formState } = useForm({
    mode: "onSubmit",
    reValidateMode: "onBlur",
  });
  const [blurState, setBlurState] = React.useState({})

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  const { onBlur, ...registerProps } = register('firstName', { required: true }); 

  const handBlurEvent = (e) => {
    onBlur(e)
    setBlurState(prevState => ({
      ...prevState,
      "firstName": true
    }))
  };

  const isValidState = blurState["firstName"] && !formState.isValidating && !formState.errors["firstName"]

  React.useEffect(() => {
    if(isValidState) {
      handleSubmit(onSubmit)()
      setBlurState(prevState => ({
        ...prevState,
        "firstName": false
      }))
    }
  }, [
    isValidState,
    onSubmit,
    handleSubmit
  ])

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        {formState.errors && formState.errors.firstName ? (
          <p>Enter a valid name</p>
        ) : null}
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            {...registerProps}
            onBlur={handBlurEvent}
          />
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);