Register by name breaks validation

[breytex]

Describe the bug
I am trying to connect a SemanticUI controlled component to the hook-form lib.
I am using

  useEffect(() => {
    register({ name: "somename" }, { required: true })
  }, [])

const onChange = (e) => {
    setValue("somename", e.target.value)
  }

to connect it.

However, the validation behaves in a weird way:

• When trying to fill out the input field in a valid way and submit, it works
• When trying to first submit a not valid form, fill it out afterwards and submit, it still gives an validation error

To Reproduce
Minimal example:
https://codesandbox.io/s/rough-pine-p8ypz?fontsize=14

Expected behavior
Validation should work after:

• submitting an invalid form
• input valid data
• submitting again

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome

[bluebill1049]

hey @breytex,

Thanks for the detailed issue reporting :)

because you registered that input manually instead of

<input ref={regsiter} />

so react hook form will not have the reference with the input ref when you start to type in the input, It wouldn't re-validate itself.

with setError you can set error and clear manually

const handleChange = (e) => {
  if (e.target.value) {
    setError('test');
  }
}
<input onChange={handleChange} />

or

triggerValidation({
  name: 'test',
  value: e.target.value,
})

https://codesandbox.io/s/beautiful-hertz-ert5m

[bluebill1049]

hey @breytex

just a quick follow up on this issue, how u doing with it?

cheers
bill

[bluebill1049]

going to close this issue, for now, feel free to reopen if you still have question 👍