fix(variables): use stable ref objects for editor container refs

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx

@@ -102,7 +102,7 @@ export function VariablesInput({
   const [activeSourceBlockId, setActiveSourceBlockId] = useState<string | null>(null)
   const valueInputRefs = useRef<Record<string, HTMLInputElement | HTMLTextAreaElement>>({})
   const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
-  const editorContainerRefs = useRef<Record<string, HTMLDivElement | null>>({})
+  const editorContainerRefs = useRef<Record<string, React.RefObject<HTMLDivElement | null>>>({})
   const [dragHighlight, setDragHighlight] = useState<Record<string, boolean>>({})
   const [collapsedAssignments, setCollapsedAssignments] = useState<Record<string, boolean>>({})
 
@@ -184,6 +184,13 @@ export function VariablesInput({
   const updateAssignmentRef = useRef(updateAssignment)
   updateAssignmentRef.current = updateAssignment
 
+  const getEditorRef = useCallback((assignmentId: string) => {
+    if (!editorContainerRefs.current[assignmentId]) {
+      editorContainerRefs.current[assignmentId] = { current: null }
+    }
+    return editorContainerRefs.current[assignmentId]
+  }, [])
+
   const editorValueChangeHandlersRef = useRef<Record<string, (newValue: string) => void>>({})
 
   const getEditorValueChangeHandler = useCallback(
@@ -192,8 +199,8 @@ export function VariablesInput({
         editorValueChangeHandlersRef.current[assignmentId] = (newValue: string) => {
           updateAssignmentRef.current(assignmentId, { value: newValue })
 
-          const container = editorContainerRefs.current[assignmentId]
-          const textarea = container?.querySelector('textarea')
+          const editorRef = editorContainerRefs.current[assignmentId]
+          const textarea = editorRef?.current?.querySelector('textarea')
           if (textarea) {
             const pos = textarea.selectionStart
             setCursorPosition(pos)
@@ -244,8 +251,8 @@ export function VariablesInput({
     setTimeout(() => {
       const newCursorPos = newValue.length - textAfterCursor.length
       if (isCodeEditor) {
-        const container = editorContainerRefs.current[activeFieldId]
-        const textarea = container?.querySelector('textarea')
+        const editorRef = editorContainerRefs.current[activeFieldId]
+        const textarea = editorRef?.current?.querySelector('textarea')
         if (textarea) {
           textarea.focus()
           textarea.selectionStart = newCursorPos
@@ -337,8 +344,8 @@ export function VariablesInput({
       const data = JSON.parse(e.dataTransfer.getData('application/json'))
       if (data.type !== 'connectionBlock') return
 
-      const container = editorContainerRefs.current[assignmentId]
-      const textarea = container?.querySelector('textarea')
+      const editorRef = editorContainerRefs.current[assignmentId]
+      const textarea = editorRef?.current?.querySelector('textarea')
       const assignment = assignments.find((a) => a.id === assignmentId)
       const currentValue = assignment?.value || ''
       const dropPosition = textarea?.selectionStart ?? currentValue.length
@@ -516,11 +523,7 @@ export function VariablesInput({
                               </Code.Gutter>
                               <Code.Content
                                 paddingLeft={`${gutterWidth}px`}
-                                editorRef={
-                                  ((el: HTMLDivElement | null) => {
-                                    editorContainerRefs.current[assignment.id] = el
-                                  }) as unknown as React.RefObject<HTMLDivElement | null>
-                                }
+                                editorRef={getEditorRef(assignment.id)}
                               >
                                 <Code.Placeholder
                                   gutterWidth={gutterWidth}
@@ -552,10 +555,9 @@ export function VariablesInput({
                                     inputRef={
                                       {
                                         current:
-                                          (editorContainerRefs.current[
-                                            assignment.id
-                                          ]?.querySelector('textarea') as HTMLTextAreaElement) ??
-                                          null,
+                                          (getEditorRef(assignment.id).current?.querySelector(
+                                            'textarea'
+                                          ) as HTMLTextAreaElement) ?? null,
                                       } as React.RefObject<HTMLTextAreaElement | HTMLInputElement>
                                     }
                                   />