From 76adfda7fef4367fe6b577ac486eec34036aadfa Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Sat, 9 Dec 2023 11:29:14 -0300
Subject: [PATCH] fix(parameterComponent): fix missing dependency in useEffect
 hook causing stale data reference fix(parameterComponent): update data
 reference when value changes to ensure consistency fix(EditNodeModal): set
 modal context open state when modal opens to trigger re-rendering

---
 .../components/parameterComponent/index.tsx   | 21 +++++++++++++++----
 .../src/modals/EditNodeModal/index.tsx        |  3 +++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index abb625aee..160f8c051 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -68,12 +68,14 @@ export default function ParameterComponent({
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
-  const { setErrorData } = useContext(alertContext);
+  const { setErrorData, modalContextOpen } = useContext(alertContext);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { setTabsState, tabId, flows, tabsState, updateFlow } =
     useContext(FlowsContext);
 
+  const [dataRef, setDataRef] = useState(data);
+
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 
   // Update component position
@@ -90,6 +92,10 @@ export default function ParameterComponent({
 
   const groupedEdge = useRef(null);
 
+  useEffect(() => {
+    setDataRef(data);
+  }, [modalContextOpen]);
+
   const { reactFlowInstance, setFilterEdge } = useContext(typesContext);
   let disabled =
     reactFlowInstance
@@ -129,6 +135,13 @@ export default function ParameterComponent({
     }
     data.node!.template[name].value = newValue;
     updateNodeInternals(data.id);
+
+    setDataRef((old) => {
+      let newData = cloneDeep(old);
+      newData.node!.template[name].value = newValue;
+      return newData;
+    });
+
     // Set state to pending
     //@ts-ignore
     if (data.node!.template[name].value !== newValue) {
@@ -549,10 +562,10 @@ export default function ParameterComponent({
               disabled={disabled}
               editNode={false}
               value={
-                data.node!.template[name].value?.length === 0 ||
-                !data.node!.template[name].value
+                dataRef.node!.template[name].value?.length === 0 ||
+                !dataRef.node!.template[name].value
                   ? [{ "": "" }]
-                  : convertObjToArray(data.node!.template[name].value)
+                  : convertObjToArray(dataRef.node!.template[name].value)
               }
               duplicateKey={errorDuplicateKey}
               onChange={(newValue) => {
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index f6283870e..e48816f5e 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -29,6 +29,7 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
   limitScrollFieldsModal,
 } from "../../constants/constants";
+import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
@@ -63,6 +64,7 @@ const EditNodeModal = forwardRef(
 
     const { setTabsState, tabId } = useContext(FlowsContext);
     const { reactFlowInstance } = useContext(typesContext);
+    const { setModalContextOpen } = useContext(alertContext);
 
     function changeAdvanced(n) {
       setMyData((old) => {
@@ -86,6 +88,7 @@ const EditNodeModal = forwardRef(
       if (open) {
         setMyData(data); // reset data to what it is on node when opening modal
       }
+      setModalContextOpen(open);
     }, [open]);
 
     const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);