Fixed bugs on form widget (#4973)

frontend/src/Editor/Components/FilePicker.jsx

@@ -5,6 +5,7 @@ import { toast } from 'react-hot-toast';
 import * as XLSX from 'xlsx/xlsx.mjs';
 
 export const FilePicker = ({
+  id,
   width,
   height,
   component,
@@ -228,13 +229,13 @@ export const FilePicker = ({
 
   useEffect(() => {
     if (acceptedFiles.length === 0 && selectedFiles.length === 0) {
-      onComponentOptionChanged(component, 'file', []);
+      onComponentOptionChanged(component, 'file', [], id);
     }
 
     if (acceptedFiles.length !== 0) {
       const fileData = parsedEnableMultiple ? [...selectedFiles] : [];
       if (parseContent) {
-        onComponentOptionChanged(component, 'isParsing', true);
+        onComponentOptionChanged(component, 'isParsing', true, id);
       }
       acceptedFiles.map((acceptedFile) => {
         const acceptedFileData = fileReader(acceptedFile);
@@ -245,7 +246,7 @@ export const FilePicker = ({
         });
       });
       setSelectedFiles(fileData);
-      onComponentOptionChanged(component, 'file', fileData);
+      onComponentOptionChanged(component, 'file', fileData, id);
       onEvent('onFileSelected', { component })
         .then(() => {
           setAccepted(true);
@@ -254,7 +255,7 @@ export const FilePicker = ({
             setTimeout(() => {
               setShowSelectedFiles(true);
               setAccepted(false);
-              onComponentOptionChanged(component, 'isParsing', false);
+              onComponentOptionChanged(component, 'isParsing', false, id);
               resolve();
             }, 600);
           });
@@ -289,7 +290,7 @@ export const FilePicker = ({
     if (selectedFiles.length === 0) {
       setShowSelectedFiles(false);
     }
-    onComponentOptionChanged(component, 'file', selectedFiles);
+    onComponentOptionChanged(component, 'file', selectedFiles, id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFiles]);
 

frontend/src/Editor/Components/Form.jsx

@@ -3,6 +3,7 @@ import { SubCustomDragLayer } from '../SubCustomDragLayer';
 import { SubContainer } from '../SubContainer';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
+import { omit } from 'lodash';
 
 export const Form = function Form(props) {
   const {
@@ -20,6 +21,7 @@ export const Form = function Form(props) {
     properties,
     registerAction,
     resetComponent,
+    onEvent,
   } = props;
   const { visibility, disabledState, borderRadius, borderColor } = styles;
   const { buttonToSubmit, loadingState } = properties;
@@ -45,12 +47,24 @@ export const Form = function Form(props) {
     resetComponent();
   });
 
+  registerAction(
+    'submitForm',
+    async function () {
+      if (isValid) {
+        onEvent('onSubmit', { component }).then(() => resetComponent());
+      } else {
+        fireEvent('onInvalid');
+      }
+    },
+    [isValid]
+  );
+
   useEffect(() => {
     const formattedChildData = {};
     let childValidation = true;
     Object.keys(childrenData).forEach((childId) => {
       if (childrenData[childId]?.name) {
-        formattedChildData[childrenData[childId].name] = childrenData[childId]?.value ?? '';
+        formattedChildData[childrenData[childId].name] = omit(childrenData[childId], 'name');
         childValidation = childValidation && (childrenData[childId]?.isValid ?? true);
       }
     });
@@ -89,18 +103,13 @@ export const Form = function Form(props) {
   const handleFormSubmission = ({ detail: { buttonComponentId } }) => {
     if (buttonToSubmit === buttonComponentId) {
       if (isValid) {
-        fireEvent('onSubmit');
-        resetComponent();
+        onEvent('onSubmit', { component }).then(() => resetComponent());
       } else {
         fireEvent('onInvalid');
       }
     }
   };
 
-  // const cancelCourse = () => {
-  //   parentRef.reset();
-  // };
-
   return (
     <form
       className="jet-container"

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -5306,6 +5306,10 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
       isValid: true,
     },
     actions: [
+      {
+        handle: 'submitForm',
+        displayName: 'Submit Form',
+      },
       {
         handle: 'resetForm',
         displayName: 'Reset Form',