Code bug using react-hook-form

[Ekeu]

Hello community

I'm a junior software developer that just started using react-hooks form a few weeks ago.

I don't really know if I'm actually doing something wrong or it's a bug with react-hook-form. ( I'm pretty sure I'm doing something wrong 😅 )

I was actually building a form as you can see on the image below:

While using react-hook-form, I used Yup for my schema validation:

Where I actually have a problem is when I try to submit the form empty.

In the below image, if I remove the photo section, and submit the for with empty fields, everything works as expected .i.e errors appear:

When I try the same thing on adding the photo section, I have the following error:

When I click on the photo section and choose a file, and then try to submit empty fields everything works as expected:

And when I fill everything (fields and adding an immage) everything also works as expected and I get my data:

While sending all fields empty (including the image field) I'm actually suppose to get an error but I don't know why I'm getting that error.

Here is my file input:

Please I need help 🙏🏽. I've actually been trying to figure out what's wrong since morning with no avail.

Thank you!

[bluebill1049]

could you share your pakcage.json for the lib version?

[Ekeu]

Here it is:

[bluebill1049]

interesting, can you reproduce this in a codesandbox?

[Ekeu]

Ok I'm going to try. I've actually never used it before 😅

[Ekeu]

Here is the link to the codesandbox. I actually used a sandbox that I opened from the docs just to have it well styled.

https://codesandbox.io/s/react-hook-form-reset-v7-forked-ywwzk?file=/src/index.js

[leapful]

@Ekeu

The root cause is from line 19 of index.js, the method "test()" is using "value[0]" but at initial time, "value" is undefined therefore the validation will fail as an unexpected error.

While yup resolver from @hookform/resolvers is using "try catch" to wrap the execution of all validation rules, the unexpected error is catch but its error object from "catch" statement is not a validation error object (which is object with array data) and failed again with reduce method.

Just correcting the custom validation at line 19 will fix the error.

Working sample: https://codesandbox.io/s/react-hook-form-reset-v7-forked-i5ht5?file=/src/index.js

@bluebill1049 @jorisre

What do you think about a double check when try catch error for resolver ? We just need to check if the error is expected validation error or not, if not, we re-throw new error with more clear context for the unexpected one.

[Ekeu]

Hey @leapful thanks for your feedback.

But aren't we supposed to have the error "Picture required" in case we send the form with empty fields ??

Because from your sample even if no file is selected we still have "File too large" as error

[leapful]

@Ekeu

You are using input type "file", the value of this element is always empty FileList when there is no selected file, that's why it can bypass the built-in method "required" from yup. You need to implement a custom required validation rule for this case.

[Ekeu]

Ok thank you very much!

[bluebill1049]

What do you think about a double check when try catch error for resolver ? We just need to check if the error is expected validation error or not, if not, we re-throw new error with more clear context for the unexpected one.

@leapful Thanks very much for looking into it, It was late last night and I went to bed. I think it's a good solution to provide better DX to users.