ArrayInput does not show validation errors if using schema validation (with yup)

[tommasogangemi]

Expected result

The ArrayInput shows the related error message when using a resolver for schema validation, as it happens when using the validate prop.

Actual result

When submitting the form the ArrayInput's label turns red, and there is no message shown where it should be (in the place of the helper text).

Steps to reproduce:

Open up this stackblitz project, forked from your simple example.

The TagCreate component has a form with an array input that is validated via the validate prop, and correctly shows the error when trying to submit.

The CommentCreate component has a form with an array input that is validated by a resolver that uses a yup schema, as suggested by your docs. Thevalidation works as expected, but the error message does not correctly pop up under the input, that only shows a red label.

Both the forms extract the error from the field the same way as it's done in the source code of ArrayInput, and the error is logged in the console. Here we can observe that the error retrieved has a different shape in the 2 cases.

Related code:

In this example I try to validate the array with a yup native array schema method and a standard validate prop

In this example I try to validate the array input based on a custom validation function mirrored in the native example and the yup example

Both of them result in the same exact misbehaviour

Other information:

I have recently upgraded the react-admin version from version 4.2.6 to version 4.3.1. The problem was not present in version 4.2.6 and the error message used to show up as expected

Environment

• React-admin version: 4.3.1 (react-hook-form 7.34.2)
• Last version that did not exhibit the issue (if applicable): 4.2.6 (by looking at the ArrayInput commit history in the repo I might stretch out to say it was actually 4.3.0, but I have not tested that version)
• React version: 18.2.0
• Browser: 104.0.5112.101 (Official Build) (64-bit)
• Stack trace (in case of a JS error): ---

[WiXSL]

Thanks for reporting this.
We are going to look into it.

[slax57]

I'm afraid it has high chances of being related to #8118 😬
I'll have a look too

[slax57]

Apparently the issue is limited to controlling the array's size, because adding a control over the array fields like this actually works:

 const innerSchema = yup.object().shape({
-  name: yup.string().optional(),
+  name: yup.string().required('Error 2'),
 });

[tommasogangemi]

@slax57 This though is not the problem I reported. This validation checks on the schema of a single item in the array, and it presents the error messge related to the TextInput, not to the ArrayInput. The problem is when the error is related to the schema of the entire array, and it presents itself even if checking other criteria than the array's length.

Here is an example with a different validation applied mirrored in both cases: https://stackblitz.com/edit/github-mccsfc?file=src%2Ftags%2FTagCreate.tsx,src%2Fcomments%2FCommentCreate.tsx

I'll add it to the issue description as well

[slax57]

Some additional info we'd like to add:

• according to our tests, with yup, errors relating to the array globally take precedence over errors relating to a given field inside the array. This means you won't see any single-field related errors before you fix the global array errors
• we also tried with zod, and with this lib we were able to see both validation errors at the same time: at array level and at single-field level

[tommasogangemi]

@slax57 thank you very much! Will the issue you entioned with yup errors not showing on bot levels be addressed down the line, or will it remain as is? Not that it's a big problem I'd just like to have the info

[slax57]

@tommasogangemi You're welcome.
Since it works with zod, it is likely that the issue is on yup's side, so no we did not plan to do anything about it at our level. Maybe you can try to search in yup's docs and/or issues to see if this is intentional or if there is maybe a technical reason for this.