resolvers icon indicating copy to clipboard operation
resolvers copied to clipboard

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

Open marnixlenoble opened this issue 2 years ago • 1 comments

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):

  • 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.

marnixlenoble avatar Apr 18 '23 15:04 marnixlenoble

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

marnixlenoble avatar Apr 19 '23 09:04 marnixlenoble