Fix ArrayInput ghost error after removing scalar item

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

@@ -15,7 +15,11 @@ import { TextInput } from '../TextInput';
 import { ArrayInput } from './ArrayInput';
 import { SimpleFormIterator } from './SimpleFormIterator';
 import { useFormContext } from 'react-hook-form';
-import { GlobalValidation, ValidationInFormTab } from './ArrayInput.stories';
+import {
+    GlobalValidation,
+    ScalarWithValidation,
+    ValidationInFormTab,
+} from './ArrayInput.stories';
 
 describe('<ArrayInput />', () => {
     it('should pass its record props to its child', async () => {
@@ -359,17 +363,35 @@ describe('<ArrayInput />', () => {
         });
     });
 
+    it('should correctly update validation state after removing an item', async () => {
+        render(<ScalarWithValidation />);
+
+        await screen.findByDisplayValue('classic');
+        fireEvent.click(await screen.findByLabelText('Add'));
+        fireEvent.click(await screen.findByText('Save'));
+        await screen.findByText('Required');
+        fireEvent.click((await screen.findAllByLabelText('Remove'))[0]);
+        await waitFor(() => {
+            expect(screen.queryByText('Required')).toBeNull();
+        });
+    });
+
     describe('used within a form with global validation', () => {
         it('should display an error if the array is required and empty', async () => {
             render(<GlobalValidation />);
             await screen.findByDisplayValue('Leo Tolstoy');
             const RemoveButtons = screen.getAllByLabelText('Remove');
             fireEvent.click(RemoveButtons[1]);
             fireEvent.click(RemoveButtons[0]);
+            await waitFor(() => {
+                expect(screen.queryAllByLabelText('Remove')).toHaveLength(0);
+            });
             const SaveButton = screen.getByText('Save');
             fireEvent.click(SaveButton);
             await screen.findByText(
-                'The form is not valid. Please check for errors'
+                'The form is not valid. Please check for errors',
+                undefined,
+                { timeout: 3000 }
             );
         });
         it('should display an error if one of the required field is empty', async () => {

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

@@ -199,6 +199,38 @@ export const Scalar = () => (
     </Admin>
 );
 
+export const ScalarWithValidation = () => (
+    <Admin dataProvider={dataProvider} history={history}>
+        <Resource
+            name="books"
+            edit={() => (
+                <Edit
+                    mutationMode="pessimistic"
+                    mutationOptions={{
+                        onSuccess: data => {
+                            console.log(data);
+                        },
+                    }}
+                >
+                    <SimpleForm>
+                        <TextInput source="title" />
+                        <ArrayInput source="tags" fullWidth>
+                            <SimpleFormIterator disableReordering>
+                                <TextInput
+                                    source=""
+                                    label="tag"
+                                    validate={required()}
+                                    helperText={false}
+                                />
+                            </SimpleFormIterator>
+                        </ArrayInput>
+                    </SimpleForm>
+                </Edit>
+            )}
+        />
+    </Admin>
+);
+
 const order = {
     id: 1,
     date: '2022-08-30',

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

@@ -61,16 +61,19 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
     } = props;
     const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
     const { append, fields, move, remove, replace } = useArrayInput(props);
-    const { resetField } = useFormContext();
+    const { resetField, trigger } = useFormContext();
     const translate = useTranslate();
     const record = useRecordContext(props);
     const initialDefaultValue = useRef({});
 
     const removeField = useCallback(
         (index: number) => {
             remove(index);
+            // Trigger validation on the Array to avoid ghost errors.
+            // Otherwise, validation errors on removed fields might still be displayed
+            trigger(source);
         },
-        [remove]
+        [remove, trigger, source]
     );
 
     if (fields.length > 0) {