Merge pull request #8138 from marmelab/fix-formstate-update

Fix ensure react-hook-form `formState` update is always enable

Author: fzaninotto

packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx

@@ -165,7 +165,7 @@ describe('useReferenceInputController', () => {
         );
 
         await waitFor(() => {
-            expect(children).toBeCalledTimes(3);
+            expect(children).toBeCalledTimes(4);
         });
         expect(children).toHaveBeenCalledWith(
             expect.objectContaining({

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
-import { useFormState } from 'react-hook-form';
+import { useFormState, useFormContext } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 
@@ -10,6 +10,7 @@ import { Form } from './Form';
 import { useNotificationContext } from '../notification';
 import { useInput } from './useInput';
 import { required } from './validate';
+import assert from 'assert';
 
 describe('Form', () => {
     const Input = props => {
@@ -106,6 +107,30 @@ describe('Form', () => {
         expect(screen.getByText('isDirty: false')).not.toBeNull();
     });
 
+    it('should update Form state on submit', async () => {
+        let globalFormState;
+
+        const CustomInput = props => {
+            globalFormState = useFormContext();
+
+            return <Input {...props} />;
+        };
+        render(
+            <CoreAdminContext>
+                <Form onSubmit={jest.fn()}>
+                    <CustomInput source="name" validate={required()} />
+                    <button type="submit">Submit</button>
+                </Form>
+            </CoreAdminContext>
+        );
+
+        fireEvent.click(screen.getByText('Submit'));
+
+        await waitFor(() => {
+            assert.equal(globalFormState.formState.isSubmitting, true);
+        });
+    });
+
     it('Displays a notification on submit when invalid', async () => {
         const Notification = () => {
             const { notifications } = useNotificationContext();

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

@@ -45,7 +45,17 @@ export const useAugmentedForm = (props: UseAugmentedFormProps) => {
 
     const defaultValuesIncludingRecord = useMemo(
         () => getFormInitialValues(defaultValues, record),
-        [JSON.stringify({ defaultValues: typeof defaultValues === 'function' ? 'function' : defaultValues, record })] // eslint-disable-line
+        // eslint-disable-next-line
+        [
+            // eslint-disable-next-line
+            JSON.stringify({
+                defaultValues:
+                    typeof defaultValues === 'function'
+                        ? 'function'
+                        : defaultValues,
+                record,
+            }),
+        ]
     );
 
     const finalResolver = resolver
@@ -67,6 +77,33 @@ export const useAugmentedForm = (props: UseAugmentedFormProps) => {
         shouldUseNativeValidation,
     });
 
+    // According to react-hook-form docs: https://react-hook-form.com/api/useform/formstate
+    // `formState` must be read before a render in order to enable the state update.
+    const {
+        formState: {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            isSubmitting,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            isDirty,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            isValid,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            isValidating,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            dirtyFields,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            errors,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            submitCount,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            touchedFields,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            isSubmitted,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            isSubmitSuccessful,
+        },
+    } = form;
+
     // initialize form with record
     /* eslint-disable react-hooks/exhaustive-deps */
     useEffect(() => {