Form reset improvement

mui · Feb 14, 2025 · 4dd23b1 · 4dd23b1
1 parent 357a0db
commit 4dd23b1
Show file tree

Hide file tree

Showing 15 changed files with 100 additions and 21 deletions.
diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.js b/docs/data/toolpad/core/components/crud/CrudAdvanced.js
@@ -276,6 +276,7 @@ function CrudAdvanced(props) {
               <Create
                 initialValues={{ title: 'New note' }}
                 onSubmitSuccess={handleCreate}
+                resetOnSubmit={false}
               />
             ) : null}
             {router.pathname !== createPath && showNoteId ? (
@@ -286,7 +287,11 @@ function CrudAdvanced(props) {
               />
             ) : null}
             {editNoteId ? (
-              <Edit id={editNoteId} onSubmitSuccess={handleEdit} />
+              <Edit
+                id={editNoteId}
+                onSubmitSuccess={handleEdit}
+                resetOnSubmit={false}
+              />
             ) : null}
           </CrudProvider>
           {/* preview-end */}

diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx
@@ -297,6 +297,7 @@ export default function CrudAdvanced(props: DemoProps) {
               <Create<Note>
                 initialValues={{ title: 'New note' }}
                 onSubmitSuccess={handleCreate}
+                resetOnSubmit={false}
               />
             ) : null}
             {router.pathname !== createPath && showNoteId ? (
@@ -307,7 +308,11 @@ export default function CrudAdvanced(props: DemoProps) {
               />
             ) : null}
             {editNoteId ? (
-              <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
+              <Edit<Note>
+                id={editNoteId}
+                onSubmitSuccess={handleEdit}
+                resetOnSubmit={false}
+              />
             ) : null}
           </CrudProvider>
           {/* preview-end */}

diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx.preview b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx.preview
@@ -11,6 +11,7 @@
     <Create<Note>
       initialValues={{ title: 'New note' }}
       onSubmitSuccess={handleCreate}
+      resetOnSubmit={false}
     />
   ) : null}
   {router.pathname !== createPath && showNoteId ? (
@@ -21,6 +22,10 @@
     />
   ) : null}
   {editNoteId ? (
-    <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
+    <Edit<Note>
+      id={editNoteId}
+      onSubmitSuccess={handleEdit}
+      resetOnSubmit={false}
+    />
   ) : null}
 </CrudProvider>
diff --git a/docs/pages/toolpad/core/api/create.json b/docs/pages/toolpad/core/api/create.json
@@ -2,7 +2,8 @@
   "props": {
     "dataSource": { "type": { "name": "object" } },
     "initialValues": { "type": { "name": "object" }, "default": "{}" },
-    "onSubmitSuccess": { "type": { "name": "func" } }
+    "onSubmitSuccess": { "type": { "name": "func" } },
+    "resetOnSubmit": { "type": { "name": "bool" } }
   },
   "name": "Create",
   "imports": ["import { Create } from '@toolpad/core/Crud';"],

diff --git a/docs/pages/toolpad/core/api/edit.json b/docs/pages/toolpad/core/api/edit.json
@@ -1,7 +1,8 @@
 {
   "props": {
     "dataSource": { "type": { "name": "object" } },
-    "onSubmitSuccess": { "type": { "name": "func" } }
+    "onSubmitSuccess": { "type": { "name": "func" } },
+    "resetOnSubmit": { "type": { "name": "bool" } }
   },
   "name": "Edit",
   "imports": ["import { Edit } from '@toolpad/core/Crud';"],

diff --git a/docs/translations/api-docs/create/create.json b/docs/translations/api-docs/create/create.json
@@ -3,7 +3,10 @@
   "propDescriptions": {
     "dataSource": { "description": "Server-side data source." },
     "initialValues": { "description": "Initial form values." },
-    "onSubmitSuccess": { "description": "Callback fired when the form is successfully submitted." }
+    "onSubmitSuccess": { "description": "Callback fired when the form is successfully submitted." },
+    "resetOnSubmit": {
+      "description": "Whether the form fields should reset after the form is submitted."
+    }
   },
   "classDescriptions": {}
 }
diff --git a/docs/translations/api-docs/edit/edit.json b/docs/translations/api-docs/edit/edit.json
@@ -2,7 +2,10 @@
   "componentDescription": "",
   "propDescriptions": {
     "dataSource": { "description": "Server-side data source." },
-    "onSubmitSuccess": { "description": "Callback fired when the form is successfully submitted." }
+    "onSubmitSuccess": { "description": "Callback fired when the form is successfully submitted." },
+    "resetOnSubmit": {
+      "description": "Whether the form fields should reset after the form is submitted."
+    }
   },
   "classDescriptions": {}
 }
diff --git a/packages/toolpad-core/src/CRUD/CRUD.tsx b/packages/toolpad-core/src/CRUD/CRUD.tsx
@@ -95,7 +95,13 @@ function Crud<D extends DataModel>(props: CrudProps<D>) {
       );
     }
     if (match(createPath)(pathname)) {
-      return <Create<D> initialValues={defaultValues} onSubmitSuccess={handleCreate} />;
+      return (
+        <Create<D>
+          initialValues={defaultValues}
+          onSubmitSuccess={handleCreate}
+          resetOnSubmit={false}
+        />
+      );
     }
     const showMatch = match<{ id: DataModelId }>(showPath)(pathname);
     if (showMatch) {
@@ -107,7 +113,7 @@ function Crud<D extends DataModel>(props: CrudProps<D>) {
     if (editMatch) {
       const resourceId = editMatch.params.id;
       invariant(resourceId, 'No resource ID present in URL.');
-      return <Edit<D> id={resourceId} onSubmitSuccess={handleEdit} />;
+      return <Edit<D> id={resourceId} onSubmitSuccess={handleEdit} resetOnSubmit={false} />;
     }
     return null;
   }, [

diff --git a/packages/toolpad-core/src/CRUD/Create.tsx b/packages/toolpad-core/src/CRUD/Create.tsx
@@ -20,6 +20,10 @@ export interface CreateProps<D extends DataModel> {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess?: () => void;
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit?: boolean;
 }
 /**
  *
@@ -32,7 +36,7 @@ export interface CreateProps<D extends DataModel> {
  * - [Create API](https://mui.com/toolpad/core/api/create)
  */
 function Create<D extends DataModel>(props: CreateProps<D>) {
-  const { initialValues, onSubmitSuccess } = props;
+  const { initialValues, onSubmitSuccess, resetOnSubmit } = props;
 
   const crudContext = React.useContext(CrudContext);
   const dataSource = (props.dataSource ?? crudContext.dataSource) as Exclude<
@@ -57,6 +61,7 @@ function Create<D extends DataModel>(props: CreateProps<D>) {
       initialValues={initialValues}
       onSubmit={handleCreate}
       onSubmitSuccess={onSubmitSuccess}
+      resetOnSubmit={resetOnSubmit}
       localeText={{
         submitButtonLabel: 'Create',
         submitSuccessMessage: 'Item created successfully.',
@@ -84,6 +89,10 @@ Create.propTypes /* remove-proptypes */ = {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess: PropTypes.func,
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit: PropTypes.bool,
 } as any;
 
 export { Create };
diff --git a/packages/toolpad-core/src/CRUD/Edit.tsx b/packages/toolpad-core/src/CRUD/Edit.tsx
@@ -19,6 +19,10 @@ export interface EditProps<D extends DataModel> {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess?: () => void;
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit?: boolean;
 }
 /**
  *
@@ -31,7 +35,7 @@ export interface EditProps<D extends DataModel> {
  * - [Edit API](https://mui.com/toolpad/core/api/edit)
  */
 function Edit<D extends DataModel>(props: EditProps<D>) {
-  const { id, onSubmitSuccess } = props;
+  const { id, onSubmitSuccess, resetOnSubmit } = props;
 
   const crudContext = React.useContext(CrudContext);
   const dataSource = (props.dataSource ?? crudContext.dataSource) as Exclude<
@@ -103,14 +107,15 @@ function Edit<D extends DataModel>(props: EditProps<D>) {
         initialValues={data}
         onSubmit={handleEdit}
         onSubmitSuccess={onSubmitSuccess}
+        resetOnSubmit={resetOnSubmit}
         localeText={{
           submitButtonLabel: 'Edit',
           submitSuccessMessage: 'Item edited successfully.',
           submitErrorMessage: 'Failed to edit item.',
         }}
       />
     ) : null;
-  }, [data, dataSource, error, handleEdit, isLoading, onSubmitSuccess]);
+  }, [data, dataSource, error, handleEdit, isLoading, onSubmitSuccess, resetOnSubmit]);
 
   return <Box sx={{ display: 'flex', flex: 1 }}>{renderEdit}</Box>;
 }
@@ -132,6 +137,10 @@ Edit.propTypes /* remove-proptypes */ = {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess: PropTypes.func,
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit: PropTypes.bool,
 } as any;
 
 export { Edit };
diff --git a/packages/toolpad-core/src/CRUD/FormPage.tsx b/packages/toolpad-core/src/CRUD/FormPage.tsx
@@ -35,6 +35,7 @@ export interface FormPageProps<D extends DataModel> {
   initialValues?: Partial<OmitId<D>>;
   onSubmit: (formValues: Partial<OmitId<D>>) => void | Promise<void>;
   onSubmitSuccess?: () => void;
+  resetOnSubmit?: boolean;
   localeText: FormPageLocaleText;
 }
 
@@ -47,6 +48,7 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
     initialValues = {} as Partial<OmitId<D>>,
     onSubmit,
     onSubmitSuccess,
+    resetOnSubmit = true,
     localeText,
   } = props;
   const { fields, validate } = dataSource;
@@ -129,7 +131,9 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
 
       if (onSubmitSuccess) {
         onSubmitSuccess();
-      } else {
+      }
+
+      if (resetOnSubmit) {
         handleFormReset();
       }
 
@@ -349,7 +353,7 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
           type="submit"
           variant="contained"
           size="large"
-          loading={isSubmitting || (hasSubmittedSuccessfully && !!onSubmitSuccess)}
+          loading={isSubmitting || (hasSubmittedSuccessfully && !resetOnSubmit)}
         >
           {localeText.submitButtonLabel}
         </Button>

diff --git a/packages/toolpad-core/src/Crud/Create.tsx b/packages/toolpad-core/src/Crud/Create.tsx
@@ -20,6 +20,10 @@ export interface CreateProps<D extends DataModel> {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess?: () => void;
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit?: boolean;
 }
 /**
  *
@@ -32,7 +36,7 @@ export interface CreateProps<D extends DataModel> {
  * - [Create API](https://mui.com/toolpad/core/api/create)
  */
 function Create<D extends DataModel>(props: CreateProps<D>) {
-  const { initialValues, onSubmitSuccess } = props;
+  const { initialValues, onSubmitSuccess, resetOnSubmit } = props;
 
   const crudContext = React.useContext(CrudContext);
   const dataSource = (props.dataSource ?? crudContext.dataSource) as Exclude<
@@ -57,6 +61,7 @@ function Create<D extends DataModel>(props: CreateProps<D>) {
       initialValues={initialValues}
       onSubmit={handleCreate}
       onSubmitSuccess={onSubmitSuccess}
+      resetOnSubmit={resetOnSubmit}
       localeText={{
         submitButtonLabel: 'Create',
         submitSuccessMessage: 'Item created successfully.',
@@ -84,6 +89,10 @@ Create.propTypes /* remove-proptypes */ = {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess: PropTypes.func,
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit: PropTypes.bool,
 } as any;
 
 export { Create };
diff --git a/packages/toolpad-core/src/Crud/Crud.tsx b/packages/toolpad-core/src/Crud/Crud.tsx
@@ -95,7 +95,13 @@ function Crud<D extends DataModel>(props: CrudProps<D>) {
       );
     }
     if (match(createPath)(pathname)) {
-      return <Create<D> initialValues={defaultValues} onSubmitSuccess={handleCreate} />;
+      return (
+        <Create<D>
+          initialValues={defaultValues}
+          onSubmitSuccess={handleCreate}
+          resetOnSubmit={false}
+        />
+      );
     }
     const showMatch = match<{ id: DataModelId }>(showPath)(pathname);
     if (showMatch) {
@@ -107,7 +113,7 @@ function Crud<D extends DataModel>(props: CrudProps<D>) {
     if (editMatch) {
       const resourceId = editMatch.params.id;
       invariant(resourceId, 'No resource ID present in URL.');
-      return <Edit<D> id={resourceId} onSubmitSuccess={handleEdit} />;
+      return <Edit<D> id={resourceId} onSubmitSuccess={handleEdit} resetOnSubmit={false} />;
     }
     return null;
   }, [

diff --git a/packages/toolpad-core/src/Crud/Edit.tsx b/packages/toolpad-core/src/Crud/Edit.tsx
@@ -19,6 +19,10 @@ export interface EditProps<D extends DataModel> {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess?: () => void;
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit?: boolean;
 }
 /**
  *
@@ -31,7 +35,7 @@ export interface EditProps<D extends DataModel> {
  * - [Edit API](https://mui.com/toolpad/core/api/edit)
  */
 function Edit<D extends DataModel>(props: EditProps<D>) {
-  const { id, onSubmitSuccess } = props;
+  const { id, onSubmitSuccess, resetOnSubmit } = props;
 
   const crudContext = React.useContext(CrudContext);
   const dataSource = (props.dataSource ?? crudContext.dataSource) as Exclude<
@@ -103,14 +107,15 @@ function Edit<D extends DataModel>(props: EditProps<D>) {
         initialValues={data}
         onSubmit={handleEdit}
         onSubmitSuccess={onSubmitSuccess}
+        resetOnSubmit={resetOnSubmit}
         localeText={{
           submitButtonLabel: 'Edit',
           submitSuccessMessage: 'Item edited successfully.',
           submitErrorMessage: 'Failed to edit item.',
         }}
       />
     ) : null;
-  }, [data, dataSource, error, handleEdit, isLoading, onSubmitSuccess]);
+  }, [data, dataSource, error, handleEdit, isLoading, onSubmitSuccess, resetOnSubmit]);
 
   return <Box sx={{ display: 'flex', flex: 1 }}>{renderEdit}</Box>;
 }
@@ -132,6 +137,10 @@ Edit.propTypes /* remove-proptypes */ = {
    * Callback fired when the form is successfully submitted.
    */
   onSubmitSuccess: PropTypes.func,
+  /**
+   * Whether the form fields should reset after the form is submitted.
+   */
+  resetOnSubmit: PropTypes.bool,
 } as any;
 
 export { Edit };