fix : Exposed actions become unavailable on reload (#10379)

* fix : exposed actions gets removed on reload

* fix : table losing exposed vars on reload

* fix: destrucute isEditorReady from correct object

---------

Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>

frontend/src/Editor/BoxUI.jsx

@@ -6,7 +6,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import '@/_styles/custom.scss';
 import { EditorContext } from './Context/EditorContextWrapper';
 import { validateWidget } from '@/_helpers/utils';
-import { useCurrentState } from '@/_stores/currentStateStore';
+import { useCurrentState, useCurrentStateStore } from '@/_stores/currentStateStore';
 import { useAppDataStore } from '@/_stores/appDataStore';
 import _ from 'lodash';
 
@@ -97,6 +97,8 @@ const BoxUI = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const isEditorReady = useCurrentStateStore((state) => state.isEditorReady);
+
   return (
     <OverlayTrigger
       placement={inCanvas ? 'auto' : 'top'}
@@ -183,6 +185,7 @@ const BoxUI = (props) => {
           currentPageId={currentPageId}
           getContainerProps={component.component === 'Form' ? getContainerProps : null}
           childComponents={childComponents}
+          isEditorReady={isEditorReady}
         />
       </div>
     </OverlayTrigger>

frontend/src/Editor/Components/Button.jsx

@@ -5,7 +5,9 @@ import * as Icons from '@tabler/icons-react';
 import Loader from '@/ToolJetUI/Loader/Loader';
 
 export const Button = function Button(props) {
-  const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables } = props;
+  const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables, isEditorReady } =
+    props;
+
   const {
     backgroundColor,
     textColor,
@@ -93,31 +95,33 @@ export const Button = function Button(props) {
   };
 
   useEffect(() => {
-    const exposedVariables = {
-      click: async function () {
-        if (!disable) {
-          fireEvent('onClick');
-        }
-      },
-      setText: async function (text) {
-        setLabel(text);
-        setExposedVariable('buttonText', text);
-      },
-      disable: async function (value) {
-        setDisable(value);
-      },
-      visibility: async function (value) {
-        setVisibility(value);
-      },
-      loading: async function (value) {
-        setLoading(value);
-      },
-    };
+    if (isEditorReady) {
+      const exposedVariables = {
+        click: async function () {
+          if (!disable) {
+            fireEvent('onClick');
+          }
+        },
+        setText: async function (text) {
+          setLabel(text);
+          setExposedVariable('buttonText', text);
+        },
+        disable: async function (value) {
+          setDisable(value);
+        },
+        visibility: async function (value) {
+          setVisibility(value);
+        },
+        loading: async function (value) {
+          setLoading(value);
+        },
+      };
 
-    setExposedVariables(exposedVariables);
+      setExposedVariables(exposedVariables);
+    }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disable]);
+  }, [disable, isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('setLoading', async function (loading) {

frontend/src/Editor/Components/Chart.jsx

@@ -18,6 +18,7 @@ export const Chart = function Chart({
   setExposedVariable,
   setExposedVariables,
   dataCy,
+  isEditorReady,
 }) {
   const [loadingState, setLoadingState] = useState(false);
 
@@ -80,8 +81,9 @@ export const Chart = function Chart({
       xAxisTitle: xAxisTitle,
       yAxisTitle: yAxisTitle,
     };
-    setExposedVariables(exposedVariables);
-  }, [JSON.stringify(chartLayout, chartTitle)]);
+    if (isEditorReady) setExposedVariables(exposedVariables);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(chartLayout, chartTitle), isEditorReady]);
 
   const layout = {
     width: width - 4,

frontend/src/Editor/Components/Checkbox.jsx

@@ -14,6 +14,7 @@ export const Checkbox = ({
   component,
   validate,
   width,
+  isEditorReady,
 }) => {
   const defaultValueFromProperties = properties.defaultValue ?? false;
   const [defaultValue, setDefaultValue] = useState(defaultValueFromProperties);
@@ -68,10 +69,10 @@ export const Checkbox = ({
     setDefaultValue(defaultValueFromProperties);
     setChecked(defaultValueFromProperties);
     setValue(defaultValueFromProperties);
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) setExposedVariables(exposedVariables);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValueFromProperties]);
+  }, [defaultValueFromProperties, isEditorReady]);
 
   useEffect(() => {
     if (disable !== disabledState) setDisable(properties.disabledState);

frontend/src/Editor/Components/ColorPicker.jsx

@@ -11,6 +11,7 @@ export const ColorPicker = function ({
   height,
   fireEvent,
   dataCy,
+  isEditorReady,
 }) {
   const { visibility, boxShadow } = styles;
   const defaultColor = properties.defaultColor;
@@ -57,8 +58,9 @@ export const ColorPicker = function ({
             selectedColorRGB: hexToRgb(colorCode),
             selectedColorRGBA: hexToRgba(colorCode),
           };
-          setExposedVariables(exposedVariables);
-
+          if (isEditorReady) {
+            setExposedVariables(exposedVariables);
+          }
           fireEvent('onChange');
         }
       } else {
@@ -67,14 +69,15 @@ export const ColorPicker = function ({
           selectedColorRGB: undefined,
           selectedColorRGBA: undefined,
         };
-        setExposedVariables(exposedVariables);
-
+        if (isEditorReady) {
+          setExposedVariables(exposedVariables);
+        }
         fireEvent('onChange');
         setColor('Invalid Color');
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setColor]);
+  }, [setColor, isEditorReady]);
 
   useEffect(() => {
     let exposedVariables = {};
@@ -85,8 +88,9 @@ export const ColorPicker = function ({
           selectedColorRGB: hexToRgb(defaultColor),
           selectedColorRGBA: hexToRgba(defaultColor),
         };
-        setExposedVariables(exposedVariables);
-
+        if (isEditorReady) {
+          setExposedVariables(exposedVariables);
+        }
         setColor(defaultColor);
       }
     } else {
@@ -95,12 +99,13 @@ export const ColorPicker = function ({
         selectedColorRGB: undefined,
         selectedColorRGBA: undefined,
       };
-      setExposedVariables(exposedVariables);
-
+      if (isEditorReady) {
+        setExposedVariables(exposedVariables);
+      }
       setColor(`Invalid Color`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultColor]);
+  }, [defaultColor, isEditorReady]);
 
   const handleColorChange = (colorCode) => {
     let exposedVariables = {};
@@ -113,7 +118,9 @@ export const ColorPicker = function ({
         selectedColorRGB: `rgb(${r},${g},${b})`,
         selectedColorRGBA: `rgb(${r},${g},${b},${a})`,
       };
-      setExposedVariables(exposedVariables);
+      if (isEditorReady) {
+        setExposedVariables(exposedVariables);
+      }
       fireEvent('onChange');
     }
   };

frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx

@@ -58,6 +58,7 @@ export const DropdownV2 = ({
   component,
   exposedVariables,
   dataCy,
+  isEditorReady,
 }) => {
   const {
     label,
@@ -225,8 +226,11 @@ export const DropdownV2 = ({
         setIsDropdownDisabled(value);
       },
     };
-    setExposedVariables(exposedVariables);
-  }, []);
+
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
+  }, [isEditorReady]);
 
   const customStyles = {
     container: (base) => ({

frontend/src/Editor/Components/Form/Form.jsx

@@ -38,6 +38,7 @@ export const Form = function Form(props) {
     getContainerProps,
     containerProps,
     childComponents,
+    isEditorReady,
   } = props;
 
   const { events: allAppEvents } = useAppInfo();
@@ -132,7 +133,9 @@ export const Form = function Form(props) {
         ...(!advanced && { children: formattedChildData }),
       };
 
-      setExposedVariables(exposedVariables);
+      if (isEditorReady) {
+        setExposedVariables(exposedVariables);
+      }
       return setValidation(childValidation);
     }
 
@@ -158,9 +161,10 @@ export const Form = function Form(props) {
       isValid: childValidation,
     };
     setValidation(childValidation);
-    setExposedVariables(exposedVariables);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [childrenData, childComponents, advanced, JSON.stringify(JSONSchema)]);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [childrenData, childComponents, advanced, JSON.stringify(JSONSchema), isEditorReady]);
 
   useEffect(() => {
     const childIds = Object.keys(childrenData);

frontend/src/Editor/Components/Icon.jsx

@@ -9,11 +9,11 @@ export const Icon = ({
   fireEvent,
   width,
   height,
-  setExposedVariable,
   setExposedVariables,
   darkMode,
   dataCy,
   component,
+  isEditorReady,
 }) => {
   const { icon } = properties;
   const { iconColor, visibility, boxShadow } = styles;
@@ -40,9 +40,11 @@ export const Icon = ({
         fireEvent('onClick');
       },
     };
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setIconVisibility]);
+  }, [setIconVisibility, isEditorReady]);
 
   return (
     <div

frontend/src/Editor/Components/Kanban/Kanban.jsx

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { KanbanBoard } from './KanbanBoard';
 
 export const Kanban = (props) => {
-  const { height, width, properties, styles, id, mode } = props;
+  const { height, width, properties, styles, id, mode, isEditorReady } = props;
   const { showDeleteButton } = properties;
   const { visibility, disabledState, boxShadow } = styles;
 

frontend/src/Editor/Components/Kanban/KanbanBoard.jsx

@@ -38,7 +38,7 @@ const dropAnimation = {
 const TRASH_ID = 'void';
 
 export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id }) {
-  const { properties, fireEvent, setExposedVariable, setExposedVariables, styles } = kanbanProps;
+  const { properties, fireEvent, setExposedVariable, setExposedVariables, styles, isEditorReady } = kanbanProps;
   const { columnData, cardData, cardWidth, cardHeight, showDeleteButton, enableAddCard } = properties;
   const { accentColor } = styles;
   const [lastSelectedCard, setLastSelectedCard] = useState({});
@@ -112,17 +112,20 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id })
       cardDataAsObj[cardId] = value;
       const diffKeys = Object.keys(diff(cardToBeUpdated, value));
       if (lastSelectedCard?.id === cardId) {
-        setExposedVariables({
-          lastSelectedCard: cardDataAsObj[cardId],
+        if (isEditorReady) {
+          setExposedVariables({
+            lastSelectedCard: cardDataAsObj[cardId],
+
+            lastUpdatedCard: cardDataAsObj[cardId],
+            lastCardUpdate: diffKeys.map((key) => {
+              return {
+                [key]: { oldValue: cardToBeUpdated[key], newValue: value[key] },
+              };
+            }),
+            updatedCardData: getData(cardDataAsObj),
+          });
+        }
 
-          lastUpdatedCard: cardDataAsObj[cardId],
-          lastCardUpdate: diffKeys.map((key) => {
-            return {
-              [key]: { oldValue: cardToBeUpdated[key], newValue: value[key] },
-            };
-          }),
-          updatedCardData: getData(cardDataAsObj),
-        });
         fireEvent('onUpdate');
       } else {
         setExposedVariable('updatedCardData', getData(cardDataAsObj));
@@ -130,7 +133,7 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id })
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastSelectedCard, JSON.stringify(cardDataAsObj)]);
+  }, [lastSelectedCard, JSON.stringify(cardDataAsObj), isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('moveCard', async function (cardId, columnId) {
@@ -169,11 +172,13 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id })
         ...items,
         [columnId]: [...items[columnId], cardDetails.id],
       }));
-      setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) });
+      if (isEditorReady) {
+        setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) });
+      }
       fireEvent('onCardAdded');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items, JSON.stringify(cardDataAsObj)]);
+  }, [items, JSON.stringify(cardDataAsObj), isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('deleteCard', async function (cardId) {
@@ -186,11 +191,13 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id })
         ...items,
         [columnId]: items[columnId].filter((id) => id !== cardId),
       }));
-      setExposedVariables({ lastRemovedCard: { ...deletedCard }, updatedCardData: getData(cardDataAsObj) });
+      if (isEditorReady) {
+        setExposedVariables({ lastRemovedCard: { ...deletedCard }, updatedCardData: getData(cardDataAsObj) });
+      }
       fireEvent('onCardRemoved');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showModal, JSON.stringify(cardDataAsObj)]);
+  }, [showModal, JSON.stringify(cardDataAsObj), isEditorReady]);
 
   const [clonedItems, setClonedItems] = useState(null);
   const sensors = useSensors(

frontend/src/Editor/Components/Listview.jsx

@@ -19,6 +19,7 @@ export const Listview = function Listview({
   darkMode,
   dataCy,
   childComponents,
+  isEditorReady,
 }) {
   const fallbackProperties = { height: 100, showBorder: false, data: [] };
   const fallbackStyles = { visibility: true, disabledState: false };
@@ -58,7 +59,9 @@ export const Listview = function Listview({
       selectedRecordId: index,
       selectedRecord: childrenData[index],
     };
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     fireEvent('onRecordClicked');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }
@@ -68,7 +71,9 @@ export const Listview = function Listview({
       selectedRowId: index,
       selectedRow: childrenData[index],
     };
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     fireEvent('onRowClicked');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }
@@ -85,16 +90,20 @@ export const Listview = function Listview({
       data: removeFunctionObjects(childrenDataClone),
       children: childrenData,
     };
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     if (selectedRowIndex != undefined) {
       const exposedVariables = {
         selectedRowId: selectedRowIndex,
         selectedRow: childrenData[selectedRowIndex],
       };
-      setExposedVariables(exposedVariables);
+      if (isEditorReady) {
+        setExposedVariables(exposedVariables);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [childrenData, childComponents]);
+  }, [childrenData, childComponents, isEditorReady]);
 
   function filterComponents() {
     if (!childrenData || childrenData.length === 0) {

frontend/src/Editor/Components/Modal.jsx

@@ -20,6 +20,7 @@ export const Modal = function Modal({
   dataCy,
   height,
   mode,
+  isEditorReady,
 }) {
   const [showModal, setShowModal] = useState(false);
 
@@ -77,9 +78,10 @@ export const Modal = function Modal({
         setExposedVariable('show', false);
       },
     };
-    setExposedVariables(exposedVariables);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setShowModal]);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setShowModal, isEditorReady]);
 
   useEffect(() => {
     if (isInitialRender.current) {

frontend/src/Editor/Components/Multiselect.jsx

@@ -22,6 +22,7 @@ export const Multiselect = function Multiselect({
   darkMode,
   fireEvent,
   dataCy,
+  isEditorReady,
 }) {
   const { label, value, values, display_values, showAllOption } = properties;
   const { borderRadius, visibility, disabledState, boxShadow } = styles;
@@ -124,10 +125,11 @@ export const Multiselect = function Multiselect({
       },
     };
 
-    setExposedVariables(exposedVariables);
-
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected, setSelected]);
+  }, [selected, setSelected, isEditorReady]);
 
   const filterOptions = (options, filter) => {
     setSearched(filter);

frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx

@@ -27,7 +27,7 @@ export const MultiselectV2 = ({
   darkMode,
   fireEvent,
   validate,
-  width,
+  isEditorReady,
 }) => {
   let {
     label,
@@ -177,8 +177,10 @@ export const MultiselectV2 = ({
         setIsMultiSelectDisabled(value);
       },
     };
-    setExposedVariables(exposedVariables);
-  }, []);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
+  }, [isEditorReady]);
 
   useEffect(() => {
     // Expose selectOption

frontend/src/Editor/Components/RadioButton.jsx

@@ -11,6 +11,7 @@ export const RadioButton = function RadioButton({
   setExposedVariables,
   darkMode,
   dataCy,
+  isEditorReady,
 }) {
   const { label, value, values, display_values } = properties;
   const { visibility, disabledState, activeColor, boxShadow } = styles;
@@ -43,9 +44,10 @@ export const RadioButton = function RadioButton({
         onSelect(option);
       },
     };
-    setExposedVariables(exposedVariables);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, setValue]);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, setValue, isEditorReady]);
 
   return (
     <div

frontend/src/Editor/Components/Table/Table.jsx

@@ -108,6 +108,7 @@ export function Table({
   setProperty,
   mode,
   exposedVariables,
+  isEditorReady,
 }) {
   const {
     color,
@@ -510,11 +511,13 @@ export function Table({
   }, [JSON.stringify([tableData, transformations, currentState])]);
 
   useEffect(() => {
-    setExposedVariables({
-      currentData: tableData,
-      updatedData: tableData,
-    });
-  }, [JSON.stringify(tableData)]);
+    if (isEditorReady) {
+      setExposedVariables({
+        currentData: tableData,
+        updatedData: tableData,
+      });
+    }
+  }, [JSON.stringify(tableData), isEditorReady]);
 
   const columnDataForAddNewRows = generateColumnsData({
     columnProperties: useDynamicColumn ? generatedColumn : component.definition.properties.columns.value,
@@ -775,7 +778,7 @@ export function Table({
         fireEvent('onRowClicked');
       }
     });
-  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]);
+  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow), isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('deselectRow', async function () {
@@ -787,7 +790,7 @@ export function Table({
       }
       return;
     });
-  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]);
+  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow), isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('discardChanges', async function () {
@@ -799,7 +802,7 @@ export function Table({
         mergeToTableDetails({ dataUpdates: {}, changeSet: {} });
       }
     });
-  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.changeSet)]);
+  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.changeSet), isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('discardNewlyAddedRows', async function () {
@@ -818,6 +821,7 @@ export function Table({
     JSON.stringify(tableDetails.addNewRowsDetails.newRowsChangeSet),
     tableDetails.addNewRowsDetails.addingNewRows,
     JSON.stringify(tableDetails.addNewRowsDetails.newRowsDataUpdates),
+    isEditorReady,
   ]);
 
   useEffect(() => {
@@ -841,7 +845,7 @@ export function Table({
       setExposedVariables({ selectedRow, selectedRowId });
       mergeToTableDetails({ selectedRow, selectedRowId });
     }
-  }, [selectedFlatRows.length, selectedFlatRows]);
+  }, [selectedFlatRows.length, selectedFlatRows, isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('downloadTableData', async function (format) {
@@ -855,7 +859,7 @@ export function Table({
       mergeToTableDetails({ selectedRowsDetails: [], selectedRow: {}, selectedRowId: null });
       toggleAllRowsSelected(false);
     }
-  }, [showBulkSelector, highlightSelectedRow, allowSelection]);
+  }, [showBulkSelector, highlightSelectedRow, allowSelection, isEditorReady]);
 
   React.useEffect(() => {
     if (enablePagination) {
@@ -971,7 +975,7 @@ export function Table({
     }
 
     //hack : in the initial render, data is undefined since, upon feeding data to the table from some query, query inside current state is {}. Hence we added data in the dependency array, now question is should we add data or rows?
-  }, [JSON.stringify(defaultSelectedRow), JSON.stringify(data)]);
+  }, [JSON.stringify(defaultSelectedRow), JSON.stringify(data), isEditorReady]);
 
   useEffect(() => {
     // csa for select all rows in table

frontend/src/Editor/Components/Tabs.jsx

@@ -17,6 +17,7 @@ export const Tabs = function Tabs({
   styles,
   darkMode,
   dataCy,
+  isEditorReady,
 }) {
   const { tabWidth, boxShadow } = styles;
 
@@ -103,10 +104,11 @@ export const Tabs = function Tabs({
       },
       currentTab: currentTab,
     };
-    setExposedVariables(exposedVariables);
-
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setCurrentTab, currentTab]);
+  }, [setCurrentTab, currentTab, isEditorReady]);
 
   const renderTabContent = (id, tab) => (
     <div

frontend/src/Editor/Components/TextArea.jsx

@@ -7,6 +7,7 @@ export const TextArea = function TextArea({
   setExposedVariable,
   setExposedVariables,
   dataCy,
+  isEditorReady,
 }) {
   const [value, setValue] = useState(properties.value);
 
@@ -28,10 +29,10 @@ export const TextArea = function TextArea({
         setExposedVariable('value', '');
       },
     };
-    setExposedVariables(exposedVariables);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setValue]);
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.value, setValue, isEditorReady]);
 
   return (
     <textarea

frontend/src/Editor/Components/TextInput.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { resolveWidgetFieldValue } from '@/_helpers/utils';
-
 import * as Icons from '@tabler/icons-react';
 import Loader from '@/ToolJetUI/Loader/Loader';
 const tinycolor = require('tinycolor2');
@@ -18,6 +17,7 @@ export const TextInput = function TextInput({
   darkMode,
   dataCy,
   isResizing,
+  isEditorReady,
 }) {
   const textInputRef = useRef();
   const labelRef = useRef();
@@ -172,9 +172,9 @@ export const TextInput = function TextInput({
         setVisibility(value);
       },
     };
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) setExposedVariables(exposedVariables);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isEditorReady]);
 
   useEffect(() => {
     const exposedVariables = {
@@ -189,9 +189,9 @@ export const TextInput = function TextInput({
         fireEvent('onChange');
       },
     };
-    setExposedVariables(exposedVariables);
+    if (isEditorReady) setExposedVariables(exposedVariables);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setValue]);
+  }, [setValue, isEditorReady]);
   const iconName = styles.icon; // Replace with the name of the icon you want
   // eslint-disable-next-line import/namespace
   const IconElement = Icons[iconName] == undefined ? Icons['IconHome2'] : Icons[iconName];

frontend/src/Editor/Components/TreeSelect.jsx

@@ -14,6 +14,7 @@ export const TreeSelect = ({
   fireEvent,
   darkMode,
   dataCy,
+  isEditorReady,
 }) => {
   const { label } = properties;
   const { visibility, disabledState, checkboxColor, boxShadow } = styles;
@@ -51,10 +52,11 @@ export const TreeSelect = ({
       checkedPathStrings: checkedPathString,
       checked: checkedArr,
     };
-    setExposedVariables(exposedVariables);
-
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(checkedData), JSON.stringify(data)]);
+  }, [JSON.stringify(checkedData), JSON.stringify(data), isEditorReady]);
 
   useEffect(() => {
     setExposedVariable('expanded', expandedData);
@@ -90,8 +92,9 @@ export const TreeSelect = ({
       checkedPathStrings: checkedPathString,
       checked: checked,
     };
-    setExposedVariables(exposedVariables);
-
+    if (isEditorReady) {
+      setExposedVariables(exposedVariables);
+    }
     updatedNode.checked ? fireEvent('onCheck') : fireEvent('onUnCheck');
     fireEvent('onChange');
     setChecked(checked);

frontend/src/Editor/ControlledComponentToRender.jsx

@@ -16,7 +16,6 @@ export const shouldUpdate = (prevProps, nextProps) => {
 
   if (componentId) {
     const componentToRender = listToRender.find((item) => item === componentId);
-
     const parentReRendered = listToRender.find((item) => item === prevProps?.parentId);
 
     const grandParentReRendered = listToRender.find((item) => item === prevProps?.grandParentId);
@@ -26,7 +25,7 @@ export const shouldUpdate = (prevProps, nextProps) => {
     }
   }
 
-  // Added to render the defaukt child components
+  // Added to render the default child components
   if (prevProps?.childComponents === null && nextProps?.childComponents) return false;
 
   return (
@@ -39,6 +38,7 @@ export const shouldUpdate = (prevProps, nextProps) => {
     prevProps?.height === nextProps?.height &&
     prevProps?.darkMode === nextProps?.darkMode &&
     prevProps?.childComponents === nextProps?.childComponents &&
+    prevProps?.isEditorReady === nextProps?.isEditorReady &&
     !needToRender
   );
 };