Validation doesn't run when calling trigger right after reset

[Kadrian]

Hi! I'm working on a form that wants to do an initial .trigger() right away, to see errors right from the start.

Now when resetting the form, I'm doing something like this:

methods.reset({ ...methods.getValues(), ...defaultValues });
methods.trigger(); // <-- won't work / won't trigger the validation

while validation will run and error are showing like this:

methods.reset({ ...methods.getValues(), ...defaultValues });
setTimeout(() => methods.trigger(), 0); // <-- works

is that known / intentional? Is methods.reset doing something async? What could I do instead to avoid the setTimeout?

[Moshyfawn]

It's a known limitation that was partly addressed in issue #9863.

Regarding your specific use case, there are two aspects to consider:

• Firstly, given that your example demonstrates the propagation of user input into the reset values, you can utilize the keepValues property of the reset method to retain the previously entered values:

reset(defaultValues, {
  keepValues: true
});

• Secondly, if it's necessary to validate the user input upon form reset, you can subscribe to the isDirty state of the form. This state should reset along with the form, as you're providing new default values for the form.

Check out this codesandbox for example.

import { useEffect } from "react"
import { useForm } from "react-hook-form"

const defaultValues = {
  name: ""
}

function App() {
  const { formState, handleSubmit, register, reset, trigger } = useForm({
    defaultValues
  })

  const { errors, isDirty } = formState

  useEffect(() => {
    if (!isDirty) {
      trigger()
    }
  }, [isDirty, trigger])

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <label>
        Name
        <input
          {...register("name", {
            required: "REQUIRED",
            minLength: { value: 10, message: "MIN 10 CHAR" }
          })}
        />
      </label>
      {errors.name && <p role="alert">{errors.name.message}</p>}
      <button
        type="button"
        onClick={() => {
          reset(defaultValues, {
            keepValues: true
          })
        }}
      >
        Reset
      </button>
      <button type="submit">Submit</button>
    </form>
  )
}

export default App

[Kadrian]

Thank you for all the explanation!

[tmerve]

Would checking isReady still work with a separate useEffect, to only check initial render?

useEffect(() => {
  if (isReady) {
    form.trigger();
  }
}, [form, isReady]);

and what if we already reset values with useEffect like this?

  useEffect(() => {
    form.reset(defaultValues);
  }, [form, defaultValues]);

in such a case, even if they work fine, two useEffects seems a bit redundant