Merge pull request marmelab#10636 from marmelab/fix/apply_a_default_defalutValue_on_ArrayInput

Fix: Apply a default `defalutValue` on `ArrayInput`

Author: djhi

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

@@ -23,6 +23,7 @@ import {
     NestedInlineNoTranslation,
     Validation,
     Focus,
+    Reset,
 } from './ArrayInput.stories';
 import { useArrayInput } from './useArrayInput';
 
@@ -457,4 +458,23 @@ describe('<ArrayInput />', () => {
             );
         });
     });
+
+    it('should empty the input on form reset', async () => {
+        render(<Reset />);
+        fireEvent.click(await screen.findByRole('button', { name: 'Add' }));
+        fireEvent.change(screen.getByLabelText('Name'), {
+            target: { value: 'Leo Tolstoy' },
+        });
+        fireEvent.change(screen.getByLabelText('Role'), {
+            target: { value: 'Writer' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('Leo Tolstoy')).toBeNull();
+            expect(screen.queryByDisplayValue('Writer')).toBeNull();
+            expect(
+                screen.queryByRole('button', { name: 'Clear the list' })
+            ).toBeNull();
+        });
+    });
 });

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

@@ -1,14 +1,21 @@
 import * as React from 'react';
-import { Admin, DateTimeInput } from 'react-admin';
+import {
+    Admin,
+    DateTimeInput,
+    DeleteButton,
+    SaveButton,
+    Toolbar,
+} from 'react-admin';
 import {
     minLength,
     required,
     Resource,
     testI18nProvider,
     TestMemoryRouter,
+    useCreatePath,
     useSourceContext,
 } from 'ra-core';
-import { Button, InputAdornment } from '@mui/material';
+import { Button, InputAdornment, Stack } from '@mui/material';
 
 import { Edit, Create } from '../../detail';
 import { SimpleForm, TabbedForm } from '../../form';
@@ -925,6 +932,55 @@ export const SetValue = () => (
     </TestMemoryRouter>
 );
 
+const ResetButton = () => {
+    const { reset } = useFormContext();
+
+    return (
+        <>
+            <Button onClick={() => reset()}>Reset</Button>
+        </>
+    );
+};
+
+const BookCreateReset = () => {
+    return (
+        <Create>
+            <SimpleForm
+                toolbar={
+                    <Toolbar>
+                        <div className="RaToolbar-defaultToolbar">
+                            <Stack direction="row" gap={2}>
+                                <SaveButton />
+                                <ResetButton />
+                            </Stack>
+                            <DeleteButton />
+                        </div>
+                    </Toolbar>
+                }
+            >
+                <ArrayInput source="authors">
+                    <SimpleFormIterator inline>
+                        <TextInput source="name" helperText={false} />
+                        <TextInput source="role" helperText={false} />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Create>
+    );
+};
+
+export const Reset = () => {
+    const createPath = useCreatePath();
+    const initialEntrie = createPath({ resource: 'books', type: 'create' });
+    return (
+        <TestMemoryRouter initialEntries={[initialEntrie]}>
+            <Admin dataProvider={dataProvider}>
+                <Resource name="books" create={BookCreateReset} />
+            </Admin>
+        </TestMemoryRouter>
+    );
+};
+
 export const Focus = ({
     input,
 }: {

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

@@ -74,7 +74,7 @@ import { ArrayInputContext } from './ArrayInputContext';
 export const ArrayInput = (props: ArrayInputProps) => {
     const {
         className,
-        defaultValue,
+        defaultValue = [],
         label,
         isFetching,
         isLoading,
@@ -131,7 +131,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
     }, [finalSource, formGroups, formGroupName]);
 
     useApplyInputDefaultValues({
-        inputProps: props,
+        inputProps: { ...props, defaultValue },
         isArrayInput: true,
         fieldArrayInputControl: fieldProps,
     });