Merge pull request #5962 from alanpoulain/reset-submit-errors

Reset submission error when the field is changed

packages/ra-core/package.json

@@ -55,6 +55,7 @@
     "peerDependencies": {
         "connected-react-router": "^6.5.2",
         "final-form": "^4.18.5",
+        "final-form-submit-errors": "^0.1.2",
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0",
         "react-final-form": "^6.3.3",

packages/ra-core/src/form/FormWithRedirect.tsx

@@ -6,9 +6,11 @@ import {
     FormRenderProps as FinalFormFormRenderProps,
 } from 'react-final-form';
 import arrayMutators from 'final-form-arrays';
+import { submitErrorsMutators } from 'final-form-submit-errors';
 
 import useInitializeFormWithRecord from './useInitializeFormWithRecord';
 import useWarnWhenUnsavedChanges from './useWarnWhenUnsavedChanges';
+import useResetSubmitErrors from './useResetSubmitErrors';
 import sanitizeEmptyValues from './sanitizeEmptyValues';
 import getFormInitialValues from './getFormInitialValues';
 import { FormContextValue, Record, OnSuccess, OnFailure } from '../types';
@@ -51,7 +53,7 @@ const FormWithRedirect: FC<FormWithRedirectProps> = ({
     initialValues,
     initialValuesEqual,
     keepDirtyOnReinitialize = true,
-    mutators = arrayMutators as any, // FIXME see https://github.com/final-form/react-final-form/issues/704 and https://github.com/microsoft/TypeScript/issues/35771
+    mutators = defaultMutators,
     record,
     render,
     save,
@@ -208,6 +210,11 @@ export interface FormWithRedirectOwnProps {
     warnWhenUnsavedChanges?: boolean;
 }
 
+const defaultMutators = {
+    ...arrayMutators,
+    ...submitErrorsMutators,
+};
+
 const defaultSubscription = {
     submitting: true,
     pristine: true,
@@ -236,6 +243,7 @@ const FormView: FC<FormViewProps> = ({
     // if record changes (after a getOne success or a refresh), the form must be updated
     useInitializeFormWithRecord(props.record);
     useWarnWhenUnsavedChanges(warnWhenUnsavedChanges);
+    useResetSubmitErrors();
     const dispatch = useDispatch();
 
     useEffect(() => {

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

@@ -23,6 +23,7 @@ import useChoices, {
 } from './useChoices';
 import useSuggestions from './useSuggestions';
 import useWarnWhenUnsavedChanges from './useWarnWhenUnsavedChanges';
+import useResetSubmitErrors from './useResetSubmitErrors';
 
 export type {
     ChoicesProps,
@@ -52,6 +53,7 @@ export {
     useSuggestions,
     ValidationError,
     useWarnWhenUnsavedChanges,
+    useResetSubmitErrors,
 };
 export { isRequired } from './FormField';
 export * from './validate';

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

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { useForm } from 'react-final-form';
+
+/**
+ * Reset the submission error when the corresponding field changes.
+ * final-form doesn't do this by default.
+ */
+const useResetSubmitErrors = () => {
+    const form = useForm();
+    const prevValues = useRef(form.getState().values);
+    useEffect(() => {
+        const unsubscribe = form.subscribe(
+            ({ values }) => {
+                form.mutators.resetSubmitErrors({
+                    current: values,
+                    prev: prevValues.current,
+                });
+
+                prevValues.current = values;
+            },
+            { values: true }
+        );
+        return unsubscribe;
+    }, [form]);
+};
+
+export default useResetSubmitErrors;

packages/react-admin/package.json

@@ -40,6 +40,7 @@
         "connected-react-router": "^6.5.2",
         "final-form": "^4.20.0",
         "final-form-arrays": "^3.0.1",
+        "final-form-submit-errors": "^0.1.2",
         "ra-core": "~3.13.1",
         "ra-i18n-polyglot": "~3.13.1",
         "ra-language-english": "~3.13.1",

yarn.lock

@@ -8217,6 +8217,11 @@ final-form-arrays@^3.0.1:
   resolved "https://registry.yarnpkg.com/final-form-arrays/-/final-form-arrays-3.0.2.tgz#9f3bef778dec61432357744eb6f3abef7e7f3847"
   integrity sha512-TfO8aZNz3RrsZCDx8GHMQcyztDNpGxSSi9w4wpSNKlmv2PfFWVVM8P7Yj5tj4n0OWax+x5YwTLhT5BnqSlCi+w==
 
+final-form-submit-errors@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/final-form-submit-errors/-/final-form-submit-errors-0.1.2.tgz#1c59d10386d7b5a1a5e89f9389fa7cf85d1255c5"
+  integrity sha512-2EwHSdf9Sy80bnsGRrDKBLp5C2uY7hL65o8tpqK/FWxyBpXtT519SsIZC4etLpGen2kjFCpYrxYkzFUfbIEXsQ==
+
 final-form@^4.20.0:
   version "4.20.0"
   resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.0.tgz#454ba46f783a4c4404ad875cf36f470395ad5efa"