diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx index 51b74aa3ad6..1da18ab454b 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx @@ -459,22 +459,61 @@ describe('', () => { }); }); - it('should empty the input on form reset', async () => { - render(); - 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(); + + 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(); + + 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); + }); }); }); }); diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx index 759d5efa7e4..8588c226888 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx +++ b/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 ( - + diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx index ec2e3ad4140..70c46da832a 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx +++ b/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('', () => { // bypass confirm leave form with unsaved changes @@ -418,22 +422,7 @@ describe('', () => { }); it('should not reapply default values set at form level after removing and then re-adding one row', async () => { - render( - - - - - - - - - - - ); + render(); const removeFirstButton = getByLabelText( // @ts-ignore @@ -456,16 +445,24 @@ describe('', () => { 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); }); diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx index 36de4eb47d3..2780b29487a 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx @@ -237,6 +237,25 @@ export const UseSimpleFormIteratorItem = () => ( ); +export const DefaultValue = () => ( + + + + + + + + + + + + +); + export const WithFormDataConsumer = () => ( diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx index 5db9810ee30..d0c9d01973b 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx @@ -72,7 +72,7 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => { const [confirmIsOpen, setConfirmIsOpen] = useState(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(