Merge pull request #10716 from marmelab/fix/array-input-reset

Fix `Arrayinput` multiple reset

Author: slax57

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

@@ -459,22 +459,61 @@ 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' },
+    describe('should empty the input on form reset', () => {
+        it('should remove a filled line twice', async () => {
+            render(<Reset />);
+
+            expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+
+            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' },
+            });
+
+            expect(screen.queryAllByRole('listitem')).toHaveLength(1);
+            fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+            await waitFor(() => {
+                expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+            });
+
+            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' },
+            });
+
+            expect(screen.queryAllByRole('listitem')).toHaveLength(1);
+            fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+            await waitFor(() => {
+                expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+            });
         });
-        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();
+
+        it('should remove an empty line twice', async () => {
+            render(<Reset />);
+
+            expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+
+            fireEvent.click(await screen.findByRole('button', { name: 'Add' }));
+
+            expect(screen.queryAllByRole('listitem')).toHaveLength(1);
+            fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+            await waitFor(() => {
+                expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+            });
+
+            fireEvent.click(await screen.findByRole('button', { name: 'Add' }));
+
+            expect(screen.queryAllByRole('listitem')).toHaveLength(1);
+            fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+            await waitFor(() => {
+                expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+            });
         });
     });
 });

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

@@ -12,7 +12,6 @@ import {
     Resource,
     testI18nProvider,
     TestMemoryRouter,
-    useCreatePath,
     useSourceContext,
 } from 'ra-core';
 import { Button, InputAdornment, Stack } from '@mui/material';
@@ -970,10 +969,8 @@ const BookCreateReset = () => {
 };
 
 export const Reset = () => {
-    const createPath = useCreatePath();
-    const initialEntrie = createPath({ resource: 'books', type: 'create' });
     return (
-        <TestMemoryRouter initialEntries={[initialEntrie]}>
+        <TestMemoryRouter initialEntries={['/books/create']}>
             <Admin dataProvider={dataProvider}>
                 <Resource name="books" create={BookCreateReset} />
             </Admin>

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

@@ -18,7 +18,11 @@ import { SimpleForm } from '../../form';
 import { ArrayInput } from './ArrayInput';
 import { TextInput } from '../TextInput';
 import { SimpleFormIterator } from './SimpleFormIterator';
-import { Basic, WithFormDataConsumer } from './SimpleFormIterator.stories';
+import {
+    Basic,
+    DefaultValue,
+    WithFormDataConsumer,
+} from './SimpleFormIterator.stories';
 
 describe('<SimpleFormIterator />', () => {
     // bypass confirm leave form with unsaved changes
@@ -418,22 +422,7 @@ describe('<SimpleFormIterator />', () => {
     });
 
     it('should not reapply default values set at form level after removing and then re-adding one row', async () => {
-        render(
-            <Wrapper>
-                <SimpleForm
-                    defaultValues={{
-                        emails: [{ email: '[email protected]', name: 'test' }],
-                    }}
-                >
-                    <ArrayInput source="emails">
-                        <SimpleFormIterator>
-                            <TextInput source="email" label="Email" />
-                            <TextInput source="name" label="Name" />
-                        </SimpleFormIterator>
-                    </ArrayInput>
-                </SimpleForm>
-            </Wrapper>
-        );
+        render(<DefaultValue />);
 
         const removeFirstButton = getByLabelText(
             // @ts-ignore
@@ -456,16 +445,24 @@ describe('<SimpleFormIterator />', () => {
             expect(inputElements.length).toBe(1);
         });
 
-        expect(
-            screen
-                .queryAllByLabelText('Email')
-                .map(inputElement => (inputElement as HTMLInputElement).value)
-        ).toEqual(['']);
-        expect(
-            screen
-                .queryAllByLabelText('Name')
-                .map(inputElement => (inputElement as HTMLInputElement).value)
-        ).toEqual(['']);
+        await waitFor(() => {
+            expect(
+                screen
+                    .queryAllByLabelText('Email')
+                    .map(
+                        inputElement => (inputElement as HTMLInputElement).value
+                    )
+            ).toEqual(['']);
+        });
+        await waitFor(() => {
+            expect(
+                screen
+                    .queryAllByLabelText('Name')
+                    .map(
+                        inputElement => (inputElement as HTMLInputElement).value
+                    )
+            ).toEqual(['']);
+        });
 
         expect(screen.queryAllByLabelText('ra.action.remove').length).toBe(1);
     });

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

@@ -237,6 +237,25 @@ export const UseSimpleFormIteratorItem = () => (
     </Wrapper>
 );
 
+export const DefaultValue = () => (
+    <AdminContext dataProvider={testDataProvider()} defaultTheme="light">
+        <ResourceContextProvider value="posts">
+            <SimpleForm
+                defaultValues={{
+                    emails: [{ email: '[email protected]', name: 'test' }],
+                }}
+            >
+                <ArrayInput source="emails">
+                    <SimpleFormIterator>
+                        <TextInput source="email" label="Email" />
+                        <TextInput source="name" label="Name" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </ResourceContextProvider>
+    </AdminContext>
+);
+
 export const WithFormDataConsumer = () => (
     <AdminContext dataProvider={testDataProvider()}>
         <ResourceContextProvider value="posts">

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

@@ -72,7 +72,7 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => {
 
     const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
     const { append, fields, move, remove, replace } = useArrayInput(props);
-    const { resetField, trigger, getValues } = useFormContext();
+    const { trigger, getValues } = useFormContext();
     const translate = useTranslate();
     const record = useRecordContext(props);
     const initialDefaultValue = useRef({});
@@ -134,10 +134,8 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => {
                 }
             }
             append(defaultValue);
-            // Make sure the newly added inputs are not considered dirty by react-hook-form
-            resetField(`${finalSource}.${fields.length}`, { defaultValue });
         },
-        [append, children, resetField, finalSource, fields.length]
+        [append, children]
     );
 
     const handleReorder = useCallback(