From 89a74345652a01f7702be48846c6940081935524 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 24 Apr 2024 15:53:07 +0800
Subject: [PATCH] fix: handle inputs show the focus ui together in tools node
 (#3763)

---
 .../nodes/tool/components/input-var-list.tsx    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index dae8e2c61..c25fde498 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -100,8 +100,17 @@ const InputVarList: FC<Props> = ({
     }
   }, [value, onChange])
 
-  const [isFocus, setIsFocus] = useState(false)
-
+  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
+  const handleInputFocus = useCallback((variable: string) => {
+    return (value: boolean) => {
+      setInputsIsFocus((prev) => {
+        return {
+          ...prev,
+          [variable]: value,
+        }
+      })
+    }
+  }, [])
   const handleOpen = useCallback((index: number) => {
     return () => onOpen(index)
   }, [onOpen])
@@ -126,13 +135,13 @@ const InputVarList: FC<Props> = ({
               </div>
               {isString
                 ? (<Input
-                  className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
+                  className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
                   value={varInput?.value as string || ''}
                   onChange={handleMixedTypeChange(variable)}
                   readOnly={readOnly}
                   nodesOutputVars={availableVars}
                   availableNodes={availableNodes}
-                  onFocusChange={setIsFocus}
+                  onFocusChange={handleInputFocus(variable)}
                   placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
                   placeholderClassName='!leading-[21px]'
                 />)