react-hook-form / resolvers

📋 Validation resolvers: Yup, Zod, Superstruct, Joi, Vest, Class Validator, io-ts, Nope, computed-types, typanion, Ajv, TypeBox, ArkType, Valibot, effect-ts and VineJS
https://react-hook-form.com/
MIT License
1.81k stars 163 forks source link

Errors not updating when using Joi resolver + useFieldArray + .custom() validation function #545

Open marnixlenoble opened 1 year ago

marnixlenoble commented 1 year ago

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:

  1. Create hook form with useFieldArray
  2. Add joi validator with .custom() validation that throws an error
  3. 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):

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.

marnixlenoble commented 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}
    />
  )}
/>