Open marnixlenoble opened 1 year ago
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}
/>
)}
/>
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:
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):
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.