Merge pull request #11067 from marmelab/fix-form-value-override-from-location

Fix values from location are not applied on Forms

Author: slax57

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

@@ -426,20 +426,24 @@ export const MultiRoutesForm = ({
     initialRecord?: Partial<RaRecord>;
     defaultValues?: Partial<RaRecord>;
 }) => (
-    <TestMemoryRouter key={url} initialEntries={[url]}>
-        <CoreAdminContext i18nProvider={defaultI18nProvider}>
-            <Routes>
-                <Route
-                    path="/form/*"
-                    element={
-                        <RecordContextProvider value={initialRecord}>
-                            <FormWithSubRoutes defaultValues={defaultValues} />
-                        </RecordContextProvider>
-                    }
-                />
-            </Routes>
-        </CoreAdminContext>
-    </TestMemoryRouter>
+    <React.StrictMode>
+        <TestMemoryRouter key={url} initialEntries={[url]}>
+            <CoreAdminContext i18nProvider={defaultI18nProvider}>
+                <Routes>
+                    <Route
+                        path="/form/*"
+                        element={
+                            <RecordContextProvider value={initialRecord}>
+                                <FormWithSubRoutes
+                                    defaultValues={defaultValues}
+                                />
+                            </RecordContextProvider>
+                        }
+                    />
+                </Routes>
+            </CoreAdminContext>
+        </TestMemoryRouter>
+    </React.StrictMode>
 );
 
 MultiRoutesForm.args = {

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

@@ -83,25 +83,28 @@ export const useAugmentedForm = <RecordType = any>(
     });
 
     const formRef = useRef(form);
-    const { reset } = form;
+    const { reset, formState } = form;
+    const { isReady } = formState;
 
     useEffect(() => {
+        if (!isReady) return;
         reset(defaultValuesIncludingRecord);
-    }, [defaultValuesIncludingRecord, reset]);
+    }, [defaultValuesIncludingRecord, reset, isReady]);
 
     // notify on invalid form
     useNotifyIsFormInvalid(form.control, !disableInvalidFormNotification);
 
     const recordFromLocation = useRecordFromLocation();
     const recordFromLocationApplied = useRef(false);
     useEffect(() => {
+        if (!isReady) return;
         if (recordFromLocation && !recordFromLocationApplied.current) {
             reset(merge({}, defaultValuesIncludingRecord, recordFromLocation), {
                 keepDefaultValues: true,
             });
             recordFromLocationApplied.current = true;
         }
-    }, [defaultValuesIncludingRecord, recordFromLocation, reset]);
+    }, [defaultValuesIncludingRecord, recordFromLocation, reset, isReady]);
 
     // submit callbacks
     const handleSubmit = useCallback(

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

@@ -72,6 +72,7 @@ describe('<SaveButton />', () => {
 
     it('should render an enabled button when the form is dirty', async () => {
         render(<Dirty />);
+        fireEvent.click(await screen.findByText('Make change'));
         await waitFor(() =>
             expect(screen.getByLabelText('ra.action.save')['disabled']).toEqual(
                 false

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

@@ -10,6 +10,7 @@ import { TextInput } from '../input/TextInput';
 import { SimpleFormIterator } from '../input/ArrayInput/SimpleFormIterator';
 import { AdminContext } from '../AdminContext';
 import { Edit } from '../detail';
+import { Button } from './Button';
 
 export default {
     title: 'ra-ui-materialui/button/SaveButton',
@@ -26,15 +27,11 @@ export const Basic = () => (
 );
 
 const MakeFormChange = () => {
-    const {
-        setValue,
-        formState: { isReady },
-    } = useFormContext();
-    React.useEffect(() => {
-        if (!isReady) return;
+    const { setValue } = useFormContext();
+    const handleClick = () => {
         setValue('name', 'test', { shouldDirty: true });
-    }, [isReady, setValue]);
-    return null;
+    };
+    return <Button label="Make change" onClick={handleClick} />;
 };
 
 export const Dirty = () => (