react-admin
react-admin copied to clipboard
marmelab
Validation does not work as expected on "required" ArrayInput's children
What you were expecting: To be able to pass validate={required()} to both an ArrayInput and its child form inputs, and see the relevant helperText and errors for invalid inputs.
What happened instead: HelperText does not render validation errors and the formState "errors" object does not update for the child form inputs.
Steps to reproduce: Create a form with an ArrayInput, with a SimpleFormIterator as a child, and a standard input as a grandchild. Pass 'validate={required()}' to both the ArrayInput and the form input.
Related code: https://codesandbox.io/s/clever-thunder-zlgtj1 Navigate to Posts create and observe that the "Required" helperText does not render under the "test_title" TextInput.
Environment
- React-admin version: 4.0.1
- Last version that did not exhibit the issue (if applicable): 3.19.10
- React version: 17.0.0
- Browser:
- Stack trace (in case of a JS error):
As you may know, useFieldArray does not support validation so we added some support but we can't fix this issue. However, react-hook-form v8 adds support for validation on the useFieldArray hook so it should be fixed when it is released.
Btw, this issue https://github.com/marmelab/react-admin/issues/7594 is probably a side effect of this.
useFieldArray currently doesn't support validation of the array value, so ArrayInput doesn't either. The workaround proposed by react-hook-form is to use a useEffect to do the validation manually (https://github.com/react-hook-form/react-hook-form/issues/6879). Maybe we could implement that in ArrayInput.
