From 708c2e3a7d7af99295b09ba928f53a4355dec456 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam <kavin.saratha@gmail.com>
Date: Tue, 9 Apr 2024 11:50:11 +0530
Subject: [PATCH] Fixed bug on resetting the form component

---
 frontend/src/Editor/Components/Form/Form.jsx        |  4 ++--
 frontend/src/Editor/ControlledComponentToRender.jsx | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/Form/Form.jsx b/frontend/src/Editor/Components/Form/Form.jsx
index 09a8daf64c..b7441409a3 100644
--- a/frontend/src/Editor/Components/Form/Form.jsx
+++ b/frontend/src/Editor/Components/Form/Form.jsx
@@ -80,7 +80,7 @@ export const Form = function Form(props) {
     };
     setExposedVariables(exposedVariables);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isValid]);
+  }, [isValid, formEvents]);
 
   const extractData = (data) => {
     const result = {};
@@ -183,7 +183,7 @@ export const Form = function Form(props) {
     document.addEventListener('submitForm', handleFormSubmission);
     return () => document.removeEventListener('submitForm', handleFormSubmission);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [buttonToSubmit, isValid, advanced, JSON.stringify(uiComponents)]);
+  }, [buttonToSubmit, isValid, advanced, JSON.stringify(uiComponents), formEvents]);
 
   const handleSubmit = (event) => {
     event.preventDefault();
diff --git a/frontend/src/Editor/ControlledComponentToRender.jsx b/frontend/src/Editor/ControlledComponentToRender.jsx
index c491a05fee..b93d772683 100644
--- a/frontend/src/Editor/ControlledComponentToRender.jsx
+++ b/frontend/src/Editor/ControlledComponentToRender.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { getComponentToRender } from '@/_helpers/editorHelpers';
 import _ from 'lodash';
 
@@ -36,9 +36,18 @@ export const shouldUpdate = (prevProps, nextProps) => {
 };
 
 const ComponentWrapper = React.memo(({ componentName, ...props }) => {
+  const [key, setKey] = useState(Math.random());
+
+  const resetComponent = useCallback(() => {
+    setKey(Math.random());
+  }, []);
+
   const ComponentToRender = getComponentToRender(componentName);
 
   if (ComponentToRender === null) return;
+  if (componentName === 'Form') {
+    return <ComponentToRender key={key} resetComponent={resetComponent} {...props} />;
+  }
 
   return <ComponentToRender {...props} />;
 }, shouldUpdate);