Allow to keep form validation when using custom save buttons

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

@@ -0,0 +1,10 @@
+import React, { createContext } from 'react';
+import { FormFunctions } from '../types';
+
+const defaultFormFunctions: FormFunctions = { setOnSave: () => {} };
+
+const FormContext = createContext<FormFunctions>(defaultFormFunctions);
+
+FormContext.displayName = 'FormContext';
+
+export default FormContext;

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

@@ -5,7 +5,7 @@ import arrayMutators from 'final-form-arrays';
 import useInitializeFormWithRecord from './useInitializeFormWithRecord';
 import sanitizeEmptyValues from './sanitizeEmptyValues';
 import getFormInitialValues from './getFormInitialValues';
-import OnSaveContext from './OnSaveContext';
+import FormContext from './FormContext';
 
 /**
  * Wrapper around react-final-form's Form to handle redirection on submit,
@@ -83,7 +83,7 @@ const FormWithRedirect = ({
     };
 
     return (
-        <OnSaveContext.Provider value={setOnSave}>
+        <FormContext.Provider value={{ setOnSave }}>
             <Form
                 key={version} // support for refresh button
                 debug={debug}
@@ -110,7 +110,7 @@ const FormWithRedirect = ({
                     />
                 )}
             </Form>
-        </OnSaveContext.Provider>
+        </FormContext.Provider>
     );
 };
 

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

@@ -1,6 +1,6 @@
 import addField from './addField';
 import FormDataConsumer from './FormDataConsumer';
-import OnSaveContext from './OnSaveContext';
+import FormContext from './FormContext';
 import FormField from './FormField';
 import FormWithRedirect from './FormWithRedirect';
 import useInput, { InputProps } from './useInput';
@@ -29,7 +29,7 @@ export {
     useInitializeFormWithRecord,
     useSuggestions,
     ValidationError,
-    OnSaveContext,
+    FormContext,
 };
 export { isRequired } from './FormField';
 export * from './validate';

packages/ra-core/src/types.ts

@@ -432,3 +432,7 @@ export type Exporter = (
 export type SetOnSave = (
     onSave?: (values: object, redirect: any) => void
 ) => void;
+
+export type FormFunctions = {
+    setOnSave?: SetOnSave;
+};

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

@@ -16,7 +16,7 @@ import {
     useNotify,
     RedirectionSideEffect,
     Record,
-    OnSaveContext,
+    FormContext,
 } from 'ra-core';
 
 const SaveButton: FC<SaveButtonProps> = ({
@@ -38,13 +38,13 @@ const SaveButton: FC<SaveButtonProps> = ({
     const classes = useStyles({ classes: classesOverride });
     const notify = useNotify();
     const translate = useTranslate();
-    const setOnSave = useContext(OnSaveContext);
+    const formContext = useContext(FormContext);
 
     const handleClick = event => {
         if (typeof onSave === 'function') {
-            setOnSave(onSave);
+            formContext.setOnSave(onSave);
         } else {
-            setOnSave();
+            formContext.setOnSave();
         }
         if (saving) {
             // prevent double submission