Fix <SaveButton> is not enabled when the form is prefilled (from <CloneButton> for instance)

Author: djhi

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

@@ -20,6 +20,11 @@ import {
     NumberInput,
 } from '../input';
 import { AdminContext } from '../AdminContext';
+import {
+    AlwaysEnable,
+    Basic,
+    EnabledWhenFormIsPrefilled,
+} from './SaveButton.stories';
 
 const invalidButtonDomProps = {
     disabled: true,
@@ -64,13 +69,7 @@ describe('<SaveButton />', () => {
     });
 
     it('should render as submit type by default', async () => {
-        render(
-            <AdminContext dataProvider={testDataProvider()}>
-                <Form>
-                    <SaveButton />
-                </Form>
-            </AdminContext>
-        );
+        render(<Basic />);
         await waitFor(() =>
             expect(
                 screen.getByLabelText('ra.action.save').getAttribute('type')
@@ -388,13 +387,16 @@ describe('<SaveButton />', () => {
     });
 
     it('should render enabled if alwaysEnable is true', async () => {
-        render(
-            <AdminContext dataProvider={testDataProvider()}>
-                <Form>
-                    <SaveButton alwaysEnable={true} />
-                </Form>
-            </AdminContext>
+        render(<AlwaysEnable />);
+        await waitFor(() =>
+            expect(screen.getByLabelText('ra.action.save')['disabled']).toEqual(
+                false
+            )
         );
+    });
+
+    it('should render enabled if the form is prefilled', async () => {
+        render(<EnabledWhenFormIsPrefilled />);
         await waitFor(() =>
             expect(screen.getByLabelText('ra.action.save')['disabled']).toEqual(
                 false

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Form } from 'ra-core';
+import { Form, TestMemoryRouter } from 'ra-core';
 import { Paper } from '@mui/material';
 
 import { SaveButton } from './SaveButton';
@@ -29,33 +29,55 @@ const MakeFormChange = () => {
 };
 
 export const Dirty = () => (
-    <AdminContext>
-        <Paper>
-            <Form>
-                <MakeFormChange />
-                <SaveButton />
-            </Form>
-        </Paper>
-    </AdminContext>
+    <TestMemoryRouter>
+        <AdminContext>
+            <Paper>
+                <Form>
+                    <MakeFormChange />
+                    <SaveButton />
+                </Form>
+            </Paper>
+        </AdminContext>
+    </TestMemoryRouter>
+);
+
+export const EnabledWhenFormIsPrefilled = () => (
+    <TestMemoryRouter
+        initialEntries={[
+            `/posts/create?source=${JSON.stringify({ title: 'foo' })}`,
+        ]}
+    >
+        <AdminContext>
+            <Paper>
+                <Form>
+                    <SaveButton />
+                </Form>
+            </Paper>
+        </AdminContext>
+    </TestMemoryRouter>
 );
 
 export const AlwaysEnable = () => (
-    <AdminContext>
-        <Paper>
-            <Form>
-                <SaveButton alwaysEnable />
-            </Form>
-        </Paper>
-    </AdminContext>
+    <TestMemoryRouter>
+        <AdminContext>
+            <Paper>
+                <Form>
+                    <SaveButton alwaysEnable />
+                </Form>
+            </Paper>
+        </AdminContext>
+    </TestMemoryRouter>
 );
 
 export const Submitting = () => (
-    <AdminContext>
-        <Paper>
-            <Form onSubmit={() => new Promise(() => {})}>
-                <MakeFormChange />
-                <SaveButton />
-            </Form>
-        </Paper>
-    </AdminContext>
+    <TestMemoryRouter>
+        <AdminContext>
+            <Paper>
+                <Form onSubmit={() => new Promise(() => {})}>
+                    <MakeFormChange />
+                    <SaveButton />
+                </Form>
+            </Paper>
+        </AdminContext>
+    </TestMemoryRouter>
 );

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

@@ -18,6 +18,7 @@ import {
     useTranslate,
     warning,
     setSubmissionErrors,
+    useRecordFromLocation,
 } from 'ra-core';
 
 /**
@@ -75,12 +76,14 @@ export const SaveButton = <RecordType extends RaRecord = any>(
     // 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
+    // if alwaysEnable is undefined and the form wasn't prefilled
+    const recordFromLocation = useRecordFromLocation();
     const disabled = valueOrDefault(
         alwaysEnable === false || alwaysEnable === undefined
             ? undefined
             : !alwaysEnable,
-        disabledProp || !isDirty || isValidating || isSubmitting
+        (disabledProp || !isDirty || isValidating || isSubmitting) &&
+            recordFromLocation == null
     );
 
     warning(