react-hook-form: `setValue()` does not blur and therefore `formState.isValid` is not usable
Describe the bug
setValue() does not trigger blur so formState.isValid isn’t true even when mode: blur
But tabbing into (past) the field does make formState.isValid true.
Codesandbox link (Required)
https://codesandbox.io/s/rhf-react-select-setvalue-isvalid-g9dk2?file=/src/index.js was as close as I got but couldn’t get it to actually hide the Submit Button based on formState.isValid even though it’s working for my own project.
Desktop (please complete the following information):
- OS: Mac
- Browser: Edge
- Version: 84.0.522.44
Additional context I also tried:
<Controller ... rules={{ required: true }} ... as React Select ... />reValidateMode: 'all'
FYI: docs site mentions validateCriteriaMode but that seems like it’s maybe an outdated reference???
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (9 by maintainers)
Commits related to this issue
- fix #2406 bug with validation mode on Controller — committed to react-hook-form/react-hook-form by bluebill1049 4 years ago
- 🐞 fix 2406 with Controller's mode for all (#2407) * fix #2406 bug with validation mode on Controller * fix unit tests * update validation test * fix test * make arg optional — committed to react-hook-form/react-hook-form by bluebill1049 4 years ago
omg, tyvm! it worked.
I reread https://react-hook-form.com/api#setValue and see it says “you can set…” but I guess I thought shouldn’t it validate by default?
Is there a reason not to? I get making it a param that can be controlled but why wouldn’t the default behavior be that if I’m setting a value it should trigger validation checking.
Typing it out, I think I’m misunderstanding the parameter… “shouldValidate” means “force validating as true”, not “should trigger validation checking”, correct? Why? Why shouldn’t setValue() trigger all the validation checking so I don’t have to force-set as valid or not?
For example, if I set the value to something that satisfied “required: true”, it should validate even though it didn’t blur. But if I for some reason set it to
""then validation would be false because the required check fails.So, to me,
setValue()should trigger the “is valid?” checking _regardless of the useForm() params, but allow setValue’s params to override this default behavior, such asshouldCheck: false(with a better name for the param).Please share your feedback.
OK, I polished up this ticket’s CSB and was able to reproduce… finally 😃
Same link as before: https://codesandbox.io/s/rhf-react-select-setvalue-isvalid-g9dk2?file=/src/index.js
Notice that the value of the first React Select does get filled (satisfying its Required rule) and then picking something manually for second React Select works for 2nd field but entire form’s
formState.isValidis not true until you manually touch (blur) the 1st field.Thanks for the help. Bedtime for me…
I see it’s been release. Awesome!
Thanks for the quick fix!
I didn’t mean to be misleading; tried my best 😉
Any idea when it would make it to an npm release?