From 1effa5e28d5d58febf1ebe21ebc472d6ae7eba0d Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Fri, 24 May 2024 16:53:30 +0530
Subject: [PATCH] Form CSA not working as expected (#9822)

* fix : broken csa in form component

* fix: switch page and go to app query params are not saving due to mutation

* added an extra check if envs refs are undefined

---------

Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>
---
 frontend/src/Editor/Components/DropDown.jsx    |  5 ++++-
 frontend/src/Editor/Components/NumberInput.jsx | 18 ++++++++++++------
 .../src/Editor/Components/PasswordInput.jsx    |  6 ++++--
 frontend/src/Editor/Components/TextInput.jsx   |  6 ++++--
 frontend/src/Editor/Inspector/EventManager.jsx |  4 ++--
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index 1ecc3e7a0a..314122849c 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -60,7 +60,10 @@ export const DropDown = function DropDown({
 
   const setExposedItem = (value, index, onSelectFired = false) => {
     setCurrentValue(value);
-    onSelectFired ? setExposedVariable('value', value).then(fireEvent('onSelect')) : setExposedVariable('value', value);
+    if (onSelectFired) {
+      setExposedVariable('value', value);
+      fireEvent('onSelect');
+    } else setExposedVariable('value', value);
     setExposedVariable('selectedOptionLabel', index === undefined ? undefined : display_values?.[index]);
   };
 
diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index b90d678504..cf2a5dcc2a 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -198,10 +198,12 @@ export const NumberInput = function NumberInput({
     setValue(Number(parseFloat(e.target.value)));
     if (e.target.value == '') {
       setValue(null);
-      setExposedVariable('value', null).then(fireEvent('onChange'));
+      setExposedVariable('value', null);
+      fireEvent('onChange');
     }
     if (!isNaN(Number(parseFloat(e.target.value)))) {
-      setExposedVariable('value', Number(parseFloat(e.target.value))).then(fireEvent('onChange'));
+      setExposedVariable('value', Number(parseFloat(e.target.value)));
+      fireEvent('onChange');
     }
   };
   useEffect(() => {
@@ -223,7 +225,8 @@ export const NumberInput = function NumberInput({
     const newValue = (value || 0) + 1;
     setValue(newValue);
     if (!isNaN(newValue)) {
-      setExposedVariable('value', newValue).then(fireEvent('onChange'));
+      setExposedVariable('value', newValue);
+      fireEvent('onChange');
     }
   };
   const handleDecrement = (e) => {
@@ -231,7 +234,8 @@ export const NumberInput = function NumberInput({
     const newValue = (value || 0) - 1;
     setValue(newValue);
     if (!isNaN(newValue)) {
-      setExposedVariable('value', newValue).then(fireEvent('onChange'));
+      setExposedVariable('value', newValue);
+      fireEvent('onChange');
     }
   };
   useEffect(() => {
@@ -245,13 +249,15 @@ export const NumberInput = function NumberInput({
       if (text) {
         const newValue = Number(parseFloat(text));
         setValue(newValue);
-        setExposedVariable('value', text).then(fireEvent('onChange'));
+        setExposedVariable('value', text);
+        fireEvent('onChange');
       }
     });
 
     setExposedVariable('clear', async function () {
       setValue('');
-      setExposedVariable('value', '').then(fireEvent('onChange'));
+      setExposedVariable('value', '');
+      fireEvent('onChange');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
diff --git a/frontend/src/Editor/Components/PasswordInput.jsx b/frontend/src/Editor/Components/PasswordInput.jsx
index 668dbe812f..03f16976b8 100644
--- a/frontend/src/Editor/Components/PasswordInput.jsx
+++ b/frontend/src/Editor/Components/PasswordInput.jsx
@@ -168,11 +168,13 @@ export const PasswordInput = function PasswordInput({
   useEffect(() => {
     setExposedVariable('setText', async function (text) {
       setPasswordValue(text);
-      setExposedVariable('value', text).then(fireEvent('onChange'));
+      setExposedVariable('value', text);
+      fireEvent('onChange');
     });
     setExposedVariable('clear', async function () {
       setPasswordValue('');
-      setExposedVariable('value', '').then(fireEvent('onChange'));
+      setExposedVariable('value', '');
+      fireEvent('onChange');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setPasswordValue]);
diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 16762f1f7f..059117200f 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -180,11 +180,13 @@ export const TextInput = function TextInput({
     const exposedVariables = {
       setText: async function (text) {
         setValue(text);
-        setExposedVariable('value', text).then(fireEvent('onChange'));
+        setExposedVariable('value', text);
+        fireEvent('onChange');
       },
       clear: async function () {
         setValue('');
-        setExposedVariable('value', '').then(fireEvent('onChange'));
+        setExposedVariable('value', '');
+        fireEvent('onChange');
       },
     };
     setExposedVariables(exposedVariables);
diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index 3003eb8fa5..09280aed63 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -520,7 +520,7 @@ export const EventManager = ({
 
             {event.actionId === 'go-to-app' && (
               <GotoApp
-                event={event}
+                event={_.cloneDeep(event)}
                 handlerChanged={handlerChanged}
                 eventIndex={index}
                 getAllApps={getAllApps}
@@ -823,7 +823,7 @@ export const EventManager = ({
             )}
             {event.actionId === 'switch-page' && (
               <SwitchPage
-                event={event}
+                event={_.cloneDeep(event)}
                 handlerChanged={handlerChanged}
                 eventIndex={index}
                 getPages={() => getPageOptions(event)}