Fix <Form> ignores resetOptions when record changes

Author: Jszigeti

packages/ra-core/src/form/Form.spec.tsx

@@ -120,6 +120,129 @@ describe('Form', () => {
         expect(screen.getByText('isDirty: false')).not.toBeNull();
     });
 
+    it('should keep dirty values when record changes and resetOptions.keepDirtyValues is true', async () => {
+        const { rerender } = render(
+            <CoreAdminContext>
+                <Form
+                    onSubmit={jest.fn()}
+                    record={{ id: 1, name: 'Initial' }}
+                    resetOptions={{ keepDirtyValues: true }}
+                >
+                    <Input source="name" />
+                </Form>
+            </CoreAdminContext>
+        );
+
+        expect(screen.getByDisplayValue('Initial')).not.toBeNull();
+
+        fireEvent.change(screen.getByLabelText('name'), {
+            target: { value: 'User Modified' },
+        });
+
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('User Modified')).not.toBeNull();
+        });
+
+        rerender(
+            <CoreAdminContext>
+                <Form
+                    onSubmit={jest.fn()}
+                    record={{
+                        id: 1,
+                        name: 'Server Updated',
+                        otherField: 'new value',
+                    }}
+                    resetOptions={{ keepDirtyValues: true }}
+                >
+                    <Input source="name" />
+                </Form>
+            </CoreAdminContext>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('User Modified')).not.toBeNull();
+        });
+        expect(screen.queryByDisplayValue('Server Updated')).toBeNull();
+    });
+
+    it('should NOT keep dirty values when record changes and resetOptions.keepDirtyValues is false', async () => {
+        const { rerender } = render(
+            <CoreAdminContext>
+                <Form onSubmit={jest.fn()} record={{ id: 1, name: 'Initial' }}>
+                    <Input source="name" />
+                </Form>
+            </CoreAdminContext>
+        );
+
+        fireEvent.change(screen.getByLabelText('name'), {
+            target: { value: 'User Modified' },
+        });
+
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('User Modified')).not.toBeNull();
+        });
+
+        rerender(
+            <CoreAdminContext>
+                <Form
+                    onSubmit={jest.fn()}
+                    record={{
+                        id: 1,
+                        name: 'Server Updated',
+                    }}
+                >
+                    <Input source="name" />
+                </Form>
+            </CoreAdminContext>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('Server Updated')).not.toBeNull();
+        });
+        expect(screen.queryByDisplayValue('User Modified')).toBeNull();
+    });
+
+    it('should NOT keep dirty values when switching to a different record even with resetOptions.keepDirtyValues', async () => {
+        const { rerender } = render(
+            <CoreAdminContext>
+                <Form
+                    onSubmit={jest.fn()}
+                    record={{ id: 1, name: 'Record 1' }}
+                    resetOptions={{ keepDirtyValues: true }}
+                >
+                    <Input source="name" />
+                </Form>
+            </CoreAdminContext>
+        );
+
+        fireEvent.change(screen.getByLabelText('name'), {
+            target: { value: 'User Modified Record 1' },
+        });
+
+        await waitFor(() => {
+            expect(
+                screen.getByDisplayValue('User Modified Record 1')
+            ).not.toBeNull();
+        });
+
+        rerender(
+            <CoreAdminContext>
+                <Form
+                    onSubmit={jest.fn()}
+                    record={{ id: 2, name: 'Record 2' }}
+                    resetOptions={{ keepDirtyValues: true }}
+                >
+                    <Input source="name" />
+                </Form>
+            </CoreAdminContext>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('Record 2')).not.toBeNull();
+        });
+        expect(screen.queryByDisplayValue('User Modified Record 1')).toBeNull();
+    });
+
     it('should update Form state on submit', async () => {
         let isSubmitting;
 

packages/ra-core/src/form/useAugmentedForm.ts

@@ -7,6 +7,7 @@ import {
 } from 'react';
 import {
     FieldValues,
+    KeepStateOptions,
     SubmitHandler,
     useForm,
     UseFormProps,
@@ -43,6 +44,7 @@ export const useAugmentedForm = <RecordType = any>(
         defaultValues,
         formRootPathname,
         resolver,
+        resetOptions,
         reValidateMode = 'onChange',
         onSubmit,
         sanitizeEmptyValues,
@@ -86,9 +88,17 @@ export const useAugmentedForm = <RecordType = any>(
     const { reset, formState } = form;
     const { isReady } = formState;
 
+    const previousRecordId = useRef(record?.id);
+
     useEffect(() => {
-        reset(defaultValuesIncludingRecord);
-    }, [defaultValuesIncludingRecord, reset]);
+        const recordIdChanged = record?.id !== previousRecordId.current;
+        previousRecordId.current = record?.id;
+
+        reset(
+            defaultValuesIncludingRecord,
+            recordIdChanged ? undefined : resetOptions
+        );
+    }, [defaultValuesIncludingRecord, reset, resetOptions, record?.id]);
 
     // notify on invalid form
     useNotifyIsFormInvalid(form.control, !disableInvalidFormNotification);
@@ -154,6 +164,7 @@ export interface UseFormOwnProps<RecordType = any> {
     defaultValues?: any;
     formRootPathname?: string;
     record?: Partial<RaRecord>;
+    resetOptions?: KeepStateOptions;
     onSubmit?: SubmitHandler<FieldValues> | SaveHandler<RecordType>;
     sanitizeEmptyValues?: boolean;
     disableInvalidFormNotification?: boolean;