Merge pull request #8275 from marmelab/fix-savebutton-state

Fix improve SaveButton enable state

Author: fzaninotto

packages/ra-ui-materialui/src/button/SaveButton.spec.tsx

@@ -12,7 +12,12 @@ import {
 import { SaveButton } from './SaveButton';
 import { SimpleForm, Toolbar } from '../form';
 import { Edit } from '../detail';
-import { TextInput } from '../input';
+import {
+    TextInput,
+    ArrayInput,
+    SimpleFormIterator,
+    NumberInput,
+} from '../input';
 import { AdminContext } from '../AdminContext';
 
 const invalidButtonDomProps = {
@@ -400,4 +405,37 @@ describe('<SaveButton />', () => {
             )
         );
     });
+
+    it('should not be enabled if no inputs have changed', async () => {
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm
+                    resource="myresource"
+                    onSubmit={jest.fn}
+                    defaultValues={{
+                        test: 'test',
+                    }}
+                >
+                    <TextInput source="test" />
+                    <ArrayInput resource="foo" source="arr">
+                        <SimpleFormIterator>
+                            <NumberInput source="id" />
+                        </SimpleFormIterator>
+                    </ArrayInput>
+                </SimpleForm>
+            </AdminContext>
+        );
+
+        const testInput = screen.getByLabelText(
+            'resources.myresource.fields.test'
+        );
+        fireEvent.focus(testInput);
+        fireEvent.blur(testInput);
+
+        await waitFor(() =>
+            expect(screen.getByLabelText('ra.action.save')['disabled']).toEqual(
+                true
+            )
+        );
+    });
 });

packages/ra-ui-materialui/src/button/SaveButton.tsx

@@ -65,7 +65,9 @@ export const SaveButton = <RecordType extends RaRecord = any>(
     const translate = useTranslate();
     const form = useFormContext();
     const saveContext = useSaveContext();
-    const { isDirty, isValidating, isSubmitting } = useFormState();
+    const { dirtyFields, isValidating, isSubmitting } = useFormState();
+    // useFormState().isDirty might differ from useFormState().dirtyFields (https://github.com/react-hook-form/react-hook-form/issues/4740)
+    const isDirty = Object.keys(dirtyFields).length > 0;
     // Use form isDirty, isValidating and form context saving to enable or disable the save button
     // if alwaysEnable is undefined
     const disabled = valueOrDefault(

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

@@ -223,7 +223,7 @@ describe('<DateTimeInput />', () => {
             const onSubmit = jest.fn();
             render(
                 <AdminContext dataProvider={testDataProvider()}>
-                    <SimpleForm onSubmit={onSubmit}>
+                    <SimpleForm mode="onBlur" onSubmit={onSubmit}>
                         <DateTimeInput
                             {...defaultProps}
                             validate={required()}
@@ -245,7 +245,6 @@ describe('<DateTimeInput />', () => {
                 target: { value: '' },
             });
             fireEvent.blur(input);
-            fireEvent.click(screen.getByText('ra.action.save'));
             await waitFor(() => {
                 expect(
                     screen.queryByText('ra.validation.required')

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

@@ -213,7 +213,7 @@ describe('<TimeInput />', () => {
             const onSubmit = jest.fn();
             render(
                 <AdminContext dataProvider={testDataProvider()}>
-                    <SimpleForm onSubmit={onSubmit}>
+                    <SimpleForm mode="onBlur" onSubmit={onSubmit}>
                         <TimeInput {...defaultProps} validate={required()} />
                     </SimpleForm>
                 </AdminContext>
@@ -232,7 +232,6 @@ describe('<TimeInput />', () => {
                 target: { value: '' },
             });
             fireEvent.blur(input);
-            fireEvent.click(screen.getByText('ra.action.save'));
             await waitFor(() => {
                 expect(
                     screen.queryByText('ra.validation.required')