fix: click empty http node value may cause blur (#35051)

web/app/components/workflow/nodes/http/__tests__/integration.spec.tsx

@@ -501,6 +501,34 @@ describe('http path', () => {
       expect(onChange).toHaveBeenCalled()
     })
 
+    it('should only append a new key-value row after the last value field receives content', () => {
+      const onChange = vi.fn()
+      const onRemove = vi.fn()
+      const onAdd = vi.fn()
+      render(
+        <KeyValueItem
+          instanceId="kv-append"
+          nodeId="node-1"
+          readonly={false}
+          canRemove
+          payload={{ id: 'kv-append', key: 'name', value: '', type: 'text' } as any}
+          onChange={onChange}
+          onRemove={onRemove}
+          isLastItem
+          onAdd={onAdd}
+        />,
+      )
+
+      const valueInput = screen.getAllByPlaceholderText('workflow.nodes.http.insertVarPlaceholder')[1]!
+
+      fireEvent.click(valueInput)
+      expect(onAdd).not.toHaveBeenCalled()
+
+      fireEvent.change(valueInput, { target: { value: 'alice' } })
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ value: 'alice' }))
+      expect(onAdd).toHaveBeenCalledTimes(1)
+    })
+
     it('should edit key-only rows and select file payload rows', async () => {
       const user = userEvent.setup()
       const onChange = vi.fn()

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -47,20 +47,37 @@ const KeyValueItem: FC<Props> = ({
   insertVarTipToLeft,
 }) => {
   const { t } = useTranslation()
+  const hasValuePayload = payload.type === 'file'
+    ? !!payload.file?.length
+    : !!payload.value
 
   const handleChange = useCallback((key: string) => {
     return (value: string | ValueSelector) => {
+      const shouldAddNextItem = isLastItem
+        && (
+          (key === 'value' && !payload.value && !!value)
+          || (key === 'file' && (!payload.file || payload.file.length === 0) && Array.isArray(value) && value.length > 0)
+        )
+
       const newPayload = produce(payload, (draft: any) => {
         draft[key] = value
       })
       onChange(newPayload)
+
+      if (shouldAddNextItem)
+        onAdd()
     }
-  }, [onChange, payload])
+  }, [isLastItem, onAdd, onChange, payload])
 
   const filterOnlyFileVariable = (varPayload: Var) => {
     return [VarType.file, VarType.arrayFile].includes(varPayload.type)
   }
 
+  const handleValueContainerClick = useCallback(() => {
+    if (isLastItem && hasValuePayload)
+      onAdd()
+  }, [hasValuePayload, isLastItem, onAdd])
+
   return (
     // group class name is for hover row show remove button
     <div className={cn(className, 'h-min-7 group flex border-t border-divider-regular')}>
@@ -102,7 +119,10 @@ const KeyValueItem: FC<Props> = ({
           />
         </div>
       )}
-      <div className={cn(isSupportFile ? 'grow' : 'w-1/2')} onClick={() => isLastItem && onAdd()}>
+      <div
+        className={cn(isSupportFile ? 'grow' : 'w-1/2')}
+        onClick={handleValueContainerClick}
+      >
         {(isSupportFile && payload.type === 'file')
           ? (
               <VarReferencePicker