How do you debounce the formState's errors? delayError works but there are some issues?

[Peter-AMD]

CSB: https://codesandbox.io/s/useform-delayerror-forked-kvt1o?file=/src/App.js

Conditions for replication:

• input should be registered, and is required using hook-form validation. In my case, I use maxLength: 5 as a validation for my input.
• delayError is enabled in useForm, in my case I put 3000 as value so it's noticeable.
• mode is onChange

Good day, just a question. I tried using delayError from useForm to delay the showing of error to the user.
There are two "issues"(not sure what's the right word) I noticed:

1. When input is empty, then I typed more than 5 characters(which is invalid based on our validation), and then immediately put a valid input(within the timeframe we put on delayError), in my case remove the extra characters so we will have less than 5 characters, then:

   Expected output:
   - hook-form will not consider the input as invalid or has an error

   Actual output:
   - hook-form will list the input as invalid/error

2. When input is invalid, and continue changing the input(still invalid values when changed), then:

   Expected output:
   - component will only render after the time we set on delayError.

   Actual output:
   - component will render immediately as we change the value on input if it is invalid, even though we set delayError.

Let me hear your thoughts on this one.

[bluebill1049]

formState inValid is still instant, we only delay the error message shown to the user. If i understand your question correctly.

[bluebill1049]

yes, debounce would help. delayError is made for UX, so users doesn't get pop with error instantly and constantly.

[Peter-AMD]

yes, debounce would help. delayError is made for UX, so users doesn't get pop with error instantly and constantly.

Is there a way we can debounce the validation of formState errors ?

[bluebill1049]

const { onChange, ...rest } = register()

debounce(onChange())

similar to useController

[Peter-AMD]

Aaaah yeah, that makes sense. Thanks @bluebill1049 , yodabest!

[jordan-rigo]

There is an issue with this one, if the user submits the form before the onChange event runs, that creates an unpleasent situation.
Is there anyway to go around it?

I delay the validation by delaying the onChange event on an input field. So the validation only triggers after the user stops typing and the delay time elapses, but if I type and hit enter to submit the form, There is no submission, because the onChange event has not finished and it says the field is empty