Fix Display notification on each submit if form has errors

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

@@ -41,7 +41,7 @@ export * from './useFormGroup';
 export * from './useFormGroupContext';
 export * from './useGetValidationErrorMessage';
 export * from './useInitializeFormWithRecord';
-export * from './useIsFormInvalid';
+export * from './useNotifyIsFormInvalid';
 export * from './useAugmentedForm';
 export * from './useInput';
 export * from './useSuggestions';

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

@@ -10,8 +10,7 @@ import {
     ValidateForm,
 } from './getSimpleValidationResolver';
 import { setSubmissionErrors } from './setSubmissionErrors';
-import { useNotify } from '../notification';
-import { useIsFormInvalid } from './useIsFormInvalid';
+import { useNotifyIsFormInvalid } from './useNotifyIsFormInvalid';
 import { useWarnWhenUnsavedChanges } from './useWarnWhenUnsavedChanges';
 
 /**
@@ -88,13 +87,7 @@ export const useAugmentedForm = (props: UseAugmentedFormProps) => {
     /* eslint-enable react-hooks/exhaustive-deps */
 
     // notify on invalid form
-    const isInvalid = useIsFormInvalid(form.control);
-    const notify = useNotify();
-    useEffect(() => {
-        if (isInvalid) {
-            notify('ra.message.invalid_form', { type: 'warning' });
-        }
-    }, [isInvalid, notify]);
+    useNotifyIsFormInvalid(form.control);
 
     // warn when unsaved change
     useWarnWhenUnsavedChanges(
@@ -137,7 +130,6 @@ export const useAugmentedForm = (props: UseAugmentedFormProps) => {
         form,
         handleSubmit,
         formHandleSubmit,
-        isInvalid,
     };
 };
 

packages/ra-core/src/form/useIsFormInvalid.ts → packages/ra-core/src/form/useNotifyIsFormInvalid.ts

@@ -1,20 +1,20 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useFormState, Control } from 'react-hook-form';
+import { useNotify } from '../notification';
 
 /**
- * This hook returns a boolean indicating whether the form is invalid.
- * We use this to display an error message on submit in Form and SaveButton.
+ * This hook display an error message on submit in Form and SaveButton.
  *
  * We can't do the form validity check in the form submit handler
  * as the form state may not have been updated yet when onSubmit validation mode is enabled
  * or when the form hasn't been touched at all.
  */
-export const useIsFormInvalid = (control?: Control) => {
-    const [isInvalid, setIsInvalid] = useState(false);
+export const useNotifyIsFormInvalid = (control?: Control) => {
     const { submitCount, errors } = useFormState(
         control ? { control } : undefined
     );
     const submitCountRef = useRef(submitCount);
+    const notify = useNotify();
 
     useEffect(() => {
         // Checking the submit count allows us to only display the notification after users
@@ -23,12 +23,8 @@ export const useIsFormInvalid = (control?: Control) => {
             submitCountRef.current = submitCount;
 
             if (Object.keys(errors).length > 0) {
-                setIsInvalid(true);
-            } else {
-                setIsInvalid(false);
+                notify('ra.message.invalid_form', { type: 'warning' });
             }
         }
-    }, [errors, submitCount]);
-
-    return isInvalid;
+    }, [errors, submitCount, notify]);
 };