Merge pull request #6185 from marmelab/fix-usewarnwhenunsavedchanges

Fix useWarnWhenUsavedChanges and nested fields

Author: fzaninotto

examples/simple/src/comments/CommentEdit.tsx

@@ -75,6 +75,7 @@ const CommentEdit = props => {
                             record={record}
                             save={save}
                             version={version}
+                            warnWhenUnsavedChanges
                         >
                             <TextInput disabled source="id" fullWidth />
                             <ReferenceInput

examples/simple/src/tags/TagEdit.tsx

@@ -16,7 +16,7 @@ import {
 const TagEdit = props => (
     <>
         <Edit {...props}>
-            <SimpleForm redirect="list">
+            <SimpleForm redirect="list" warnWhenUnsavedChanges>
                 <TextField source="id" />
                 <TranslatableInputs locales={['en', 'fr']}>
                     <TextInput source="name" validate={[required()]} />

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

@@ -20,6 +20,12 @@ const FormBody = ({ handleSubmit }) => {
                 aria-labelledby="firstname-label"
                 component="input"
             />
+            <label id="author-label">Author</label>
+            <Field
+                name="author.name"
+                aria-labelledby="author-label"
+                component="input"
+            />
             <button type="button" onClick={onLeave}>
                 Leave
             </button>
@@ -59,45 +65,64 @@ describe('useWarnWhenUnsavedChanges', () => {
         getByText('Submitted');
     });
 
-    it('should not warn when leaving form with submit button', () => {
-        const { getByLabelText, getByText } = render(<App />);
-        const input = getByLabelText('First Name') as HTMLInputElement;
-        input.value = 'John Doe';
-        fireEvent.click(getByText('Submit'));
-        getByText('Submitted');
-    });
+    test.each([
+        ['simple', 'First Name'],
+        ['nested', 'Author'],
+    ])(
+        'should not warn when leaving form with submit button after updating %s field',
+        (_, field) => {
+            const { getByLabelText, getByText } = render(<App />);
+            fireEvent.change(getByLabelText(field), {
+                target: { value: 'John Doe' },
+            });
+            fireEvent.click(getByText('Submit'));
+            getByText('Submitted');
+        }
+    );
 
-    it('should warn when leaving form with unsaved changes', () => {
-        // mock click on "cancel" in the confirm dialog
-        window.confirm = jest.fn().mockReturnValue(false);
-        const { getByLabelText, getByText, queryByText } = render(<App />);
-        const input = getByLabelText('First Name') as HTMLInputElement;
-        fireEvent.change(input, { target: { value: 'John Doe' } });
-        fireEvent.click(getByText('Leave'));
-        expect(window.confirm).toHaveBeenCalledWith(
-            'ra.message.unsaved_changes'
-        );
-        // check that we're still in the form and that the unsaved changes are here
-        expect((getByLabelText('First Name') as HTMLInputElement).value).toBe(
-            'John Doe'
-        );
-        expect(queryByText('Somewhere')).toBeNull();
-    });
+    test.each([
+        ['simple', 'First Name'],
+        ['nested', 'Author'],
+    ])(
+        'should warn when leaving form with unsaved changes after updating %s field',
+        (_, field) => {
+            // mock click on "cancel" in the confirm dialog
+            window.confirm = jest.fn().mockReturnValue(false);
+            const { getByLabelText, getByText, queryByText } = render(<App />);
+            const input = getByLabelText(field) as HTMLInputElement;
+            fireEvent.change(input, { target: { value: 'John Doe' } });
+            fireEvent.click(getByText('Leave'));
+            expect(window.confirm).toHaveBeenCalledWith(
+                'ra.message.unsaved_changes'
+            );
+            // check that we're still in the form and that the unsaved changes are here
+            expect(
+                (getByLabelText('First Name') as HTMLInputElement).value
+            ).toBe('John Doe');
+            expect(queryByText('Somewhere')).toBeNull();
+        }
+    );
 
-    it('should warn when leaving form with unsaved changes but accept override', () => {
-        // mock click on "OK" in the confirm dialog
-        window.confirm = jest.fn().mockReturnValue(true);
-        const { getByLabelText, getByText, queryByText } = render(<App />);
-        const input = getByLabelText('First Name') as HTMLInputElement;
-        fireEvent.change(input, { target: { value: 'John Doe' } });
-        fireEvent.click(getByText('Leave'));
-        expect(window.confirm).toHaveBeenCalledWith(
-            'ra.message.unsaved_changes'
-        );
-        // check that we're no longer in the form
-        expect(queryByText('First Name')).toBeNull();
-        getByText('Somewhere');
-    });
+    test.each([
+        ['simple', 'First Name'],
+        ['nested', 'Author'],
+    ])(
+        'should warn when leaving form with unsaved changes but accept override',
+        (_, field) => {
+            // mock click on "OK" in the confirm dialog
+            window.confirm = jest.fn().mockReturnValue(true);
+            const { getByLabelText, getByText, queryByText } = render(<App />);
+            const input = getByLabelText(field) as HTMLInputElement;
+            fireEvent.change(input, { target: { value: 'John Doe' } });
+            fireEvent.click(getByText('Leave'));
+            expect(window.confirm).toHaveBeenCalledWith(
+                'ra.message.unsaved_changes'
+            );
+            // check that we're no longer in the form
+            expect(queryByText(field)).toBeNull();
+            getByText('Somewhere');
+        }
+    );
 
     afterAll(() => delete window.confirm);
 });

packages/ra-core/src/form/useWarnWhenUnsavedChanges.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useForm } from 'react-final-form';
 import { useHistory } from 'react-router-dom';
+import get from 'lodash/get';
 
 import { useTranslate } from '../i18n';
 
@@ -39,6 +40,7 @@ const useWarnWhenUnsavedChanges = (enable: boolean) => {
         const unsavedChanges = JSON.parse(
             window.sessionStorage.getItem('unsavedChanges')
         );
+
         if (unsavedChanges) {
             Object.keys(unsavedChanges).forEach(key =>
                 form.change(key, unsavedChanges[key])
@@ -61,7 +63,7 @@ const useWarnWhenUnsavedChanges = (enable: boolean) => {
                         : formState.dirtyFields;
                     const dirtyFieldValues = Object.keys(dirtyFields).reduce(
                         (acc, key) => {
-                            acc[key] = formState.values[key];
+                            acc[key] = get(formState.values, key);
                             return acc;
                         },
                         {}