Fix <ArrayInput> shows validation error on mount when mode="onChange"

examples/simple/package.json

@@ -25,7 +25,7 @@
         "react": "^18.3.1",
         "react-admin": "^5.14.5",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.65.0",
+        "react-hook-form": "^7.72.0",
         "react-router": "^6.28.1",
         "react-router-dom": "^6.28.1"
     },

packages/ra-core/package.json

@@ -53,7 +53,7 @@
         "jscodeshift": "^0.15.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.65.0",
+        "react-hook-form": "^7.72.0",
         "react-router": "^6.28.1",
         "react-router-dom": "^6.28.1",
         "typescript": "^5.1.3",
@@ -65,7 +65,7 @@
         "@tanstack/react-query": "^5.83.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",
-        "react-hook-form": "^7.65.0",
+        "react-hook-form": "^7.72.0",
         "react-router": "^6.28.1 || ^7.1.1",
         "react-router-dom": "^6.28.1 || ^7.1.1"
     },

packages/ra-core/src/form/FilterLiveForm.tsx

@@ -5,7 +5,12 @@ import get from 'lodash/get.js';
 import mergeWith from 'lodash/mergeWith.js';
 import set from 'lodash/set.js';
 import { ReactNode, useEffect } from 'react';
-import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
+import {
+    FieldValues,
+    FormProvider,
+    useForm,
+    UseFormProps,
+} from 'react-hook-form';
 import {
     SourceContextProvider,
     SourceContextValue,
@@ -155,9 +160,12 @@ const HTMLForm = (props: React.HTMLAttributes<HTMLFormElement>) => (
 );
 
 export interface FilterLiveFormProps
-    extends Omit<UseFormProps, 'onSubmit' | 'defaultValues'> {
+    extends Omit<
+        UseFormProps<FieldValues>,
+        'onSubmit' | 'defaultValues' | 'validate'
+    > {
     children: ReactNode;
-    validate?: ValidateForm;
+    validate?: ValidateForm<FieldValues>;
     debounce?: number | false;
     resource?: string;
     formComponent?: React.ComponentType<

packages/ra-input-rich-text/package.json

@@ -56,7 +56,7 @@
         "ra-ui-materialui": "^5.14.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.65.0",
+        "react-hook-form": "^7.72.0",
         "tippy.js": "^6.3.7",
         "typescript": "^5.1.3",
         "zshy": "^0.5.0"

packages/ra-ui-materialui/package.json

@@ -46,7 +46,7 @@
         "ra-language-english": "^5.14.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.65.0",
+        "react-hook-form": "^7.72.0",
         "react-is": "^18.2.0 || ^19.0.0",
         "react-router": "^6.28.1",
         "react-router-dom": "^6.28.1",

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

@@ -25,6 +25,7 @@ import {
     Validation,
     Focus,
     Reset,
+    ConditionalArrayInputValidationContent,
 } from './ArrayInput.stories';
 
 describe('<ArrayInput />', () => {
@@ -283,6 +284,32 @@ describe('<ArrayInput />', () => {
         expect(screen.queryByText('test helper text')).not.toBeNull();
     });
 
+    it('should not display a root-level array error immediately when mounted in onChange mode', async () => {
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <ResourceContextProvider value="books">
+                    <SimpleForm mode="onChange" onSubmit={jest.fn()}>
+                        <ConditionalArrayInputValidationContent />
+                    </SimpleForm>
+                </ResourceContextProvider>
+            </AdminContext>
+        );
+
+        fireEvent.click(screen.getByText('Show array input'));
+
+        await screen.findByLabelText('ra.action.add');
+        expect(screen.queryByText('ra.validation.required')).toBeNull();
+
+        fireEvent.click(await screen.findByLabelText('ra.action.add'));
+        fireEvent.click(await screen.findByLabelText('ra.action.remove'));
+
+        await screen.findByText('ra.validation.required');
+
+        fireEvent.click(screen.getByText('ra.action.save'));
+
+        await screen.findByText('ra.validation.required');
+    });
+
     it('should update the form state to dirty, and allow submit, on updating an array input with default value', async () => {
         render(
             <AdminContext dataProvider={testDataProvider()}>

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

@@ -14,7 +14,7 @@ import {
     TestMemoryRouter,
     useSourceContext,
 } from 'ra-core';
-import { Button, InputAdornment, Stack } from '@mui/material';
+import { Alert, Button, InputAdornment, Stack } from '@mui/material';
 
 import { Edit, Create } from '../../detail';
 import { SimpleForm, TabbedForm } from '../../form';
@@ -29,7 +29,10 @@ import { ReferenceField, TextField, TranslatableFields } from '../../field';
 import { Labeled } from '../../Labeled';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-export default { title: 'ra-ui-materialui/input/ArrayInput' };
+export default {
+    title: 'ra-ui-materialui/input/ArrayInput',
+    excludeStories: ['ConditionalArrayInputValidationContent'],
+};
 
 const dataProvider = {
     getOne: () =>
@@ -825,6 +828,49 @@ export const GlobalValidation = () => (
     </TestMemoryRouter>
 );
 
+export const ConditionalArrayInputValidationContent = () => {
+    const [showArrayInput, setShowArrayInput] = React.useState(false);
+
+    return (
+        <>
+            <Alert severity="info" sx={{ mb: 2 }}>
+                This story renders a required ArrayInput only after clicking
+                &quot;Show array input&quot;. It should not display a validation
+                error when it first appears. To trigger the array-level
+                validation error, add an item, then remove it. The error should
+                also appear after an invalid submit.
+            </Alert>
+            <Button onClick={() => setShowArrayInput(true)} variant="outlined">
+                Show array input
+            </Button>
+            {showArrayInput ? (
+                <ArrayInput source="authors" fullWidth validate={required()}>
+                    <SimpleFormIterator>
+                        <TextInput source="name" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            ) : null}
+        </>
+    );
+};
+
+export const DisplayErrorOnlyAfterInteractionOrInvalidSubmit = () => (
+    <TestMemoryRouter initialEntries={['/books/create']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource
+                name="books"
+                create={() => (
+                    <Create>
+                        <SimpleForm mode="onChange">
+                            <ConditionalArrayInputValidationContent />
+                        </SimpleForm>
+                    </Create>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 const CreateGlobalValidationInFormTab = () => {
     return (
         <Create

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

@@ -18,6 +18,7 @@ import {
     useThemeProps,
 } from '@mui/material';
 import get from 'lodash/get.js';
+import isEqual from 'lodash/isEqual.js';
 
 import { LinearProgress } from '../../layout/LinearProgress';
 import { InputHelperText } from '../InputHelperText';
@@ -88,18 +89,51 @@ export const ArrayInput = (inProps: ArrayInputProps) => {
     const parentSourceContext = useSourceContext();
     const finalSource = parentSourceContext.getSource(arraySource);
     const { subscribe } = useFormContext();
-
-    const [error, setError] = React.useState<any>();
+    const [{ error, hasBeenInteractedWith, isSubmitted }, setArrayInputState] =
+        React.useState<{
+            error: any;
+            hasBeenInteractedWith: boolean;
+            isSubmitted: boolean;
+        }>({
+            error: undefined,
+            hasBeenInteractedWith: false,
+            isSubmitted: false,
+        });
     React.useEffect(() => {
         return subscribe({
-            formState: { errors: true },
-            callback: ({ errors }) => {
+            formState: {
+                dirtyFields: true,
+                errors: true,
+                isSubmitted: true,
+                touchedFields: true,
+            },
+            callback: ({ dirtyFields, errors, isSubmitted, touchedFields }) => {
                 const error = get(errors ?? {}, finalSource);
-                setError(error);
+                const hasBeenInteractedWith =
+                    get(dirtyFields ?? {}, finalSource, false) !== false ||
+                    get(touchedFields ?? {}, finalSource, false) !== false;
+
+                setArrayInputState(previousState =>
+                    isEqual(previousState, {
+                        error,
+                        hasBeenInteractedWith,
+                        isSubmitted: !!isSubmitted,
+                    })
+                        ? previousState
+                        : {
+                              error,
+                              hasBeenInteractedWith,
+                              isSubmitted: !!isSubmitted,
+                          }
+                );
             },
         });
     }, [finalSource, subscribe]);
-    const renderHelperText = helperText !== false || !!error;
+    const displayedError =
+        hasBeenInteractedWith || isSubmitted ? error : undefined;
+    const displayedErrorMessage = (displayedError?.root?.message ??
+        displayedError?.message) as any;
+    const renderHelperText = helperText !== false || !!displayedError;
 
     if (isPending) {
         // We handle the loading state here instead of using the loading prop
@@ -121,14 +155,14 @@ export const ArrayInput = (inProps: ArrayInputProps) => {
                 ArrayInputClasses.root,
                 className
             )}
-            error={!!error}
+            error={!!displayedError}
             {...sanitizeInputRestProps(rest)}
         >
             <InputLabel
                 component="span"
                 className={ArrayInputClasses.label}
                 shrink
-                error={!!error}
+                error={!!displayedError}
             >
                 <FieldTitle
                     label={label}
@@ -146,12 +180,12 @@ export const ArrayInput = (inProps: ArrayInputProps) => {
                 {children}
             </ArrayInputBase>
             {renderHelperText ? (
-                <FormHelperText error={!!error}>
+                <FormHelperText error={!!displayedError}>
                     <InputHelperText
                         // root property is applicable to built-in validation only,
                         // Resolvers are yet to support useFieldArray root level validation.
                         // Reference: https://react-hook-form.com/docs/usefieldarray
-                        error={error?.root?.message ?? error?.message}
+                        error={displayedErrorMessage}
                         helperText={helperText}
                     />
                 </FormHelperText>

packages/react-admin/package.json

@@ -50,7 +50,7 @@
         "ra-i18n-polyglot": "^5.14.5",
         "ra-language-english": "^5.14.5",
         "ra-ui-materialui": "^5.14.5",
-        "react-hook-form": "^7.65.0",
+        "react-hook-form": "^7.72.0",
         "react-router": "^6.28.1 || ^7.1.1",
         "react-router-dom": "^6.28.1 || ^7.1.1"
     },