Fix ArrayInput root error display on conditional mount

Author: WiXSL

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

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import {
     RecordContextProvider,
     ResourceContextProvider,
+    required,
     testDataProvider,
     useArrayInput,
 } from 'ra-core';
@@ -283,6 +284,56 @@ 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 () => {
+        const submit = jest.fn();
+
+        const FormWithConditionalArrayInput = () => {
+            const [showArrayInput, setShowArrayInput] = React.useState(false);
+
+            return (
+                <>
+                    <button
+                        onClick={() => setShowArrayInput(true)}
+                        type="button"
+                    >
+                        Show array input
+                    </button>
+                    {showArrayInput ? (
+                        <ArrayInput source="authors" validate={required()}>
+                            <SimpleFormIterator>
+                                <TextInput source="name" />
+                            </SimpleFormIterator>
+                        </ArrayInput>
+                    ) : null}
+                </>
+            );
+        };
+
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <ResourceContextProvider value="books">
+                    <SimpleForm mode="onChange" onSubmit={submit}>
+                        <FormWithConditionalArrayInput />
+                    </SimpleForm>
+                </ResourceContextProvider>
+            </AdminContext>
+        );
+
+        fireEvent.click(screen.getByText('Show array input'));
+
+        await screen.findByText('resources.books.fields.authors');
+        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';
@@ -825,6 +825,47 @@ export const GlobalValidation = () => (
     </TestMemoryRouter>
 );
 
+const BookCreateConditionalValidation = () => {
+    const [showArrayInput, setShowArrayInput] = React.useState(false);
+
+    return (
+        <Create>
+            <SimpleForm mode="onChange">
+                <Alert severity="info" sx={{ mb: 2 }}>
+                    Reproduccion del bug 2: mostrar el ArrayInput no debe
+                    pintarlo invalido automaticamente. El error debe aparecer
+                    recien despues de interaccion real o submit invalido.
+                </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}
+            </SimpleForm>
+        </Create>
+    );
+};
+
+export const ConditionalMountOnChangeValidation = () => (
+    <TestMemoryRouter initialEntries={['/books/create']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource name="books" create={BookCreateConditionalValidation} />
+        </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,35 @@ export const ArrayInput = (inProps: ArrayInputProps) => {
     const parentSourceContext = useSourceContext();
     const finalSource = parentSourceContext.getSource(arraySource);
     const { subscribe } = useFormContext();
-
-    const [error, setError] = React.useState<any>();
+    const [displayedError, setDisplayedError] = React.useState<any>();
     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;
+                const nextDisplayedError =
+                    hasBeenInteractedWith || isSubmitted ? error : undefined;
+
+                setDisplayedError(previousError =>
+                    isEqual(previousError, nextDisplayedError)
+                        ? previousError
+                        : nextDisplayedError
+                );
             },
         });
     }, [finalSource, subscribe]);
-    const renderHelperText = helperText !== false || !!error;
+
+    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 +139,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 +164,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>