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

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) => {

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);