Merge pull request #8276 from marmelab/arrayinput-helpertext

Fix `ArrayInput` throws an error when providing a `helperText`

Author: WiXSL

packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx

@@ -251,6 +251,19 @@ describe('<ArrayInput />', () => {
         });
     });
 
+    it('should allow to have a helperText', () => {
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm onSubmit={jest.fn}>
+                    <ArrayInput source="foo" helperText="test helper text">
+                        <SimpleFormIterator />
+                    </ArrayInput>
+                </SimpleForm>
+            </AdminContext>
+        );
+        expect(screen.queryByText('test helper text')).not.toBeNull();
+    });
+
     describe('used within a form with global validation', () => {
         it('should display an error if the array is required and empty', async () => {
             render(<GlobalValidation />);

packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx

@@ -189,9 +189,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
                         // root property is applicable to built-in validation only,
                         // Resolvers are yet to support useFieldArray root level validation.
                         // Reference: https://react-hook-form.com/api/usefieldarray
-                        error={
-                            error.root ? error.root?.message : error?.message
-                        }
+                        error={error?.root?.message ?? error?.message}
                         helperText={helperText}
                     />
                 </FormHelperText>