Merge pull request #10421 from marmelab/fix-array-input-dirty

Fix ArrayInput makes the form dirty in strict mode
marmelab · Dec 19, 2024 · cd440fd · cd440fd
2 parents a1b7be0 + ce33414
commit cd440fd
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 96 deletions.
diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx
@@ -4,8 +4,6 @@ import userEvent from '@testing-library/user-event';
 import {
     RecordContextProvider,
     ResourceContextProvider,
-    minLength,
-    required,
     testDataProvider,
 } from 'ra-core';
 
@@ -23,6 +21,7 @@ import {
     NestedInline,
     WithReferenceField,
     NestedInlineNoTranslation,
+    Validation,
 } from './ArrayInput.stories';
 import { useArrayInput } from './useArrayInput';
 
@@ -136,66 +135,19 @@ describe('<ArrayInput />', () => {
     });
 
     it('should apply validation to both itself and its inner inputs', async () => {
-        render(
-            <AdminContext dataProvider={testDataProvider()}>
-                <ResourceContextProvider value="bar">
-                    <SimpleForm
-                        onSubmit={jest.fn}
-                        defaultValues={{
-                            arr: [],
-                        }}
-                    >
-                        <ArrayInput
-                            source="arr"
-                            validate={[minLength(2, 'array_min_length')]}
-                        >
-                            <SimpleFormIterator>
-                                <TextInput
-                                    source="id"
-                                    validate={[required('id_required')]}
-                                />
-                                <TextInput
-                                    source="foo"
-                                    validate={[required('foo_required')]}
-                                />
-                            </SimpleFormIterator>
-                        </ArrayInput>
-                    </SimpleForm>
-                </ResourceContextProvider>
-            </AdminContext>
-        );
+        render(<Validation />);
 
-        fireEvent.click(screen.getByLabelText('ra.action.add'));
-        fireEvent.click(screen.getByText('ra.action.save'));
-        await waitFor(() => {
-            expect(screen.queryByText('array_min_length')).not.toBeNull();
-        });
-        fireEvent.click(screen.getByLabelText('ra.action.add'));
-        const firstId = screen.getAllByLabelText(
-            'resources.bar.fields.arr.id *'
-        )[0];
-        fireEvent.change(firstId, {
-            target: { value: 'aaa' },
-        });
-        fireEvent.change(firstId, {
-            target: { value: '' },
-        });
-        fireEvent.blur(firstId);
-        const firstFoo = screen.getAllByLabelText(
-            'resources.bar.fields.arr.foo *'
-        )[0];
-        fireEvent.change(firstFoo, {
-            target: { value: 'aaa' },
-        });
-        fireEvent.change(firstFoo, {
-            target: { value: '' },
-        });
-        fireEvent.blur(firstFoo);
-        expect(screen.queryByText('array_min_length')).toBeNull();
+        fireEvent.click(await screen.findByLabelText('Add'));
+        fireEvent.click(screen.getByText('Save'));
         await waitFor(() => {
-            expect(screen.queryByText('id_required')).not.toBeNull();
-            expect(screen.queryByText('foo_required')).not.toBeNull();
+            // The two inputs in each item are required
+            expect(screen.queryAllByText('Required')).toHaveLength(2);
         });
+        fireEvent.click(screen.getAllByLabelText('Remove')[2]);
+        fireEvent.click(screen.getAllByLabelText('Remove')[1]);
+        fireEvent.click(screen.getByText('Save'));
+
+        await screen.findByText('You need two authors at minimum');
     });
 
     it('should maintain its form value after having been unmounted', async () => {

diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Admin } from 'react-admin';
 import {
+    minLength,
     required,
     Resource,
     testI18nProvider,
@@ -19,6 +20,7 @@ import { AutocompleteInput } from '../AutocompleteInput';
 import { TranslatableInputs } from '../TranslatableInputs';
 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' };
 
@@ -67,17 +69,35 @@ const BookEdit = () => {
                         <TextInput source="role" />
                     </SimpleFormIterator>
                 </ArrayInput>
+                <FormInspector />
             </SimpleForm>
         </Edit>
     );
 };
 
+const FormInspector = () => {
+    const {
+        formState: { defaultValues, isDirty, dirtyFields },
+    } = useFormContext();
+    const values = useWatch();
+    return (
+        <div>
+            <div>isDirty: {isDirty.toString()}</div>
+            <div>dirtyFields: {JSON.stringify(dirtyFields, null, 2)}</div>
+            <div>defaultValues: {JSON.stringify(defaultValues, null, 2)}</div>
+            <div>values: {JSON.stringify(values, null, 2)}</div>
+        </div>
+    );
+};
+
 export const Basic = () => (
-    <TestMemoryRouter initialEntries={['/books/1']}>
-        <Admin dataProvider={dataProvider}>
-            <Resource name="books" edit={BookEdit} />
-        </Admin>
-    </TestMemoryRouter>
+    <React.StrictMode>
+        <TestMemoryRouter initialEntries={['/books/1']}>
+            <Admin dataProvider={dataProvider}>
+                <Resource name="books" edit={BookEdit} />
+            </Admin>
+        </TestMemoryRouter>
+    </React.StrictMode>
 );
 
 export const Disabled = () => (
@@ -669,24 +689,44 @@ export const ActionsLeft = () => (
     </TestMemoryRouter>
 );
 
-const globalValidator = values => {
-    const errors: any = {};
-    if (!values.authors || !values.authors.length) {
-        errors.authors = 'ra.validation.required';
-    } else {
-        errors.authors = values.authors.map(author => {
-            const authorErrors: any = {};
-            if (!author?.name) {
-                authorErrors.name = 'A name is required';
-            }
-            if (!author?.role) {
-                authorErrors.role = 'ra.validation.required';
-            }
-            return authorErrors;
-        });
-    }
-    return errors;
+const BookEditValidation = () => {
+    return (
+        <Edit
+            mutationMode="pessimistic"
+            mutationOptions={{
+                onSuccess: data => {
+                    console.log(data);
+                },
+            }}
+        >
+            <SimpleForm>
+                <ArrayInput
+                    source="authors"
+                    fullWidth
+                    validate={[
+                        required(),
+                        minLength(2, 'You need two authors at minimum'),
+                    ]}
+                    helperText="At least two authors"
+                >
+                    <SimpleFormIterator>
+                        <TextInput source="name" validate={required()} />
+                        <TextInput source="role" validate={required()} />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Edit>
+    );
 };
+
+export const Validation = () => (
+    <TestMemoryRouter initialEntries={['/books/1']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource name="books" edit={BookEditValidation} />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 const BookEditGlobalValidation = () => {
     return (
         <Edit
@@ -712,6 +752,26 @@ const BookEditGlobalValidation = () => {
         </Edit>
     );
 };
+
+const globalValidator = values => {
+    const errors: any = {};
+    if (!values.authors || !values.authors.length) {
+        errors.authors = 'ra.validation.required';
+    } else {
+        errors.authors = values.authors.map(author => {
+            const authorErrors: any = {};
+            if (!author?.name) {
+                authorErrors.name = 'A name is required';
+            }
+            if (!author?.role) {
+                authorErrors.role = 'ra.validation.required';
+            }
+            return authorErrors;
+        });
+    }
+    return errors;
+};
+
 export const GlobalValidation = () => (
     <TestMemoryRouter initialEntries={['/books/1']}>
         <Admin dataProvider={dataProvider}>

diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx
@@ -101,8 +101,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
         : validate;
     const getValidationErrorMessage = useGetValidationErrorMessage();
 
-    const { getFieldState, formState, getValues, register, unregister } =
-        useFormContext();
+    const { getFieldState, formState, getValues } = useFormContext();
 
     const fieldProps = useFieldArray({
         name: finalSource,
@@ -121,25 +120,17 @@ export const ArrayInput = (props: ArrayInputProps) => {
         },
     });
 
-    // We need to register the array itself as a field to enable validation at its level
     useEffect(() => {
-        register(finalSource);
-        formGroups &&
-            formGroupName != null &&
+        if (formGroups && formGroupName != null) {
             formGroups.registerField(finalSource, formGroupName);
+        }
 
         return () => {
-            unregister(finalSource, {
-                keepValue: true,
-                keepError: true,
-                keepDirty: true,
-                keepTouched: true,
-            });
-            formGroups &&
-                formGroupName != null &&
+            if (formGroups && formGroupName != null) {
                 formGroups.unregisterField(finalSource, formGroupName);
+            }
         };
-    }, [register, unregister, finalSource, formGroups, formGroupName]);
+    }, [finalSource, formGroups, formGroupName]);
 
     useApplyInputDefaultValues({
         inputProps: props,