resolvers
resolvers copied to clipboard
Errors not updating when using Joi resolver + useFieldArray + .custom() validation function
Describe the bug When using a joiResolver together with a .custom() validation function and mode 'all' it only updates the error state on submit and not on change or on blur
To Reproduce Steps to reproduce the behavior:
- Create hook form with useFieldArray
- Add joi validator with .custom() validation that throws an error
- the error state is only changed onSubmit and not onBlur or onChange even though mode is set to 'all'
Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-error-with-joi-validator-and-fieldarray-upgb54?file=/src/App.tsx
Expected behavior I expect the validation to happen onChange and onBlur as well.
Desktop (please complete the following information):
- OS: [iOS]
- Browser [Brave]
- Version [Version 1.48.158 Chromium: 110.0.5481.77 (Official Build) (x86_64)]
Additional context I did some testing and it seems like it's not to do with Joi or the JoiResolver, the errors it returns on submit and on blur are exactly the same.
Current workaround for me is using Controller and then hooking into the onBlur/onChange and manually calling trigger.
<Controller
key={field.id}
control={control}
name={`colors.${index}.value`}
render={({
field: { onChange, onBlur, value, name, ref },
fieldState: { invalid, isTouched, isDirty, error },
formState
}) => (
<input
onBlur={async () => {
onBlur();
await trigger("colors");
}}
onChange={async (...args) => {
onChange(...args);
await trigger("colors");
}}
value={value}
ref={ref}
/>
)}
/>