resolvers icon indicating copy to clipboard operation
resolvers copied to clipboard

Yup errors are swallowed

Open marcospassos opened this issue 3 years ago • 11 comments

Describe the bug When a field has multiple errors, just the one higher in the hierarchy is reported, despite setting criteriaMode: 'all' and earlyAbort: false.

To Reproduce Steps to reproduce the behavior:

  1. Open the sandbox
  2. Click on Submit
  3. Open the console
  4. Notice there is a single error for the items field: "items field must have at least 2 items"
  5. Now, uncomment line 45
  6. Reload the page
  7. See it now reports errors on items that should have been reported along with the minimum number of items requirement

Codesandbox link (Required) https://codesandbox.io/s/modest-butterfly-7noyn0?file=/src/App.tsx

Expected behavior All errors.

marcospassos avatar Aug 10 '22 22:08 marcospassos

hook form reconcile errors based on the field name, if you want a group level, you can consider to use trigger('group')

bluebill1049 avatar Aug 10 '22 22:08 bluebill1049

I've tried that. It doesn't work either: https://codesandbox.io/s/modest-butterfly-7noyn0?file=/src/App.tsx

marcospassos avatar Aug 10 '22 22:08 marcospassos

Screen Shot 2022-08-11 at 8 50 44 am

then follow the doc try to debug why it's not trigger the error

resolver: async (data, context, options) => {
  // you can debug your validation schema here
  console.log('formData', data)
  console.log('validation result', await anyResolver(schema)(data, context, options))
  return anyResolver(schema)(data, context, options)
},

bluebill1049 avatar Aug 10 '22 22:08 bluebill1049

I can confirm it's an issue related to the Yup resolver:

image

Yup correctly reports the errors: https://codesandbox.io/s/yup-forked-0xsspo?file=/src/index.js

image

marcospassos avatar Aug 10 '22 23:08 marcospassos

I've updated the code sandbox to make the issue more explicit: image

marcospassos avatar Aug 10 '22 23:08 marcospassos

It doesn't look like the errors object has associated with the field name, going back to the original comment hook form will require errors to be associated with fields.

https://github.com/react-hook-form/resolvers/blob/master/yup/src/yup.ts#L14-L39

bluebill1049 avatar Aug 10 '22 23:08 bluebill1049

Even associating a field name it doesn't work: image

marcospassos avatar Aug 10 '22 23:08 marcospassos

I meant the schema, does the schema errors return the field associate path to that field array? Please refer to the source code which i posted above.

bluebill1049 avatar Aug 10 '22 23:08 bluebill1049

Yes: image

Is it because Yup uses square bracket notation? I don't think so, since the errors are correctly reported when no errors above exist.

marcospassos avatar Aug 10 '22 23:08 marcospassos

Here's what this function returns:

image

All errors are there.

marcospassos avatar Aug 10 '22 23:08 marcospassos

Ok, I found the problem. The set method is overriding the item[0] error since it's reported before the item.

This is the value of fieldErrors at each iteration:

image

Could you please reopen the issue?

marcospassos avatar Aug 10 '22 23:08 marcospassos