From 59cb447e0584660e6edfcfa7f85b8baa93cc097f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 21 Jan 2026 16:52:24 +0800
Subject: [PATCH] enhancement: add keyboard events handle

---
 .../plugins/hitl-input-block/input-field.tsx  | 16 ++++++++++-
 .../plugins/hitl-input-block/pre-populate.tsx | 27 +++++++++++++++++--
 .../plugins/shortcuts-popup-plugin/index.tsx  |  2 +-
 web/eslint-suppressions.json                  |  5 ----
 4 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index b5c9632092..6a461b6bd9 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -1,7 +1,7 @@
 import type { FormInputItem, FormInputItemPlaceholder } from '@/app/components/workflow/nodes/human-input/types'
 import { produce } from 'immer'
 import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { InputVarType } from '@/app/components/workflow/types'
@@ -60,6 +60,20 @@ const InputField: React.FC<Props> = ({
       setTempPayload(nextValue)
     }
   }, [tempPayload])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault()
+        handleSave()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleSave])
+
   return (
     <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
       <div className="system-md-semibold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
index 25df13633d..bbcf5485b9 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import * as React from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import { VarType } from '@/app/components/workflow/types'
@@ -24,7 +24,15 @@ type Props = {
 const i18nPrefix = 'nodes.humanInput.insertInputField'
 
 type PlaceholderProps = {
-  varPickerProps: any
+  varPickerProps: {
+    nodeId: string
+    value: ValueSelector
+    onChange: (valueSelector: ValueSelector | string) => void
+    readonly: boolean
+    zIndex: number
+    filterVar: (varPayload: Var) => boolean
+    isJustShowValue?: boolean
+  }
   onTypeClick: (isVariable: boolean) => void
 }
 const Placeholder = ({
@@ -84,6 +92,20 @@ const PrePopulate: FC<Props> = ({
   }
 
   const isShowPlaceholder = !onPlaceholderClicked && (isVariable ? (!valueSelector || valueSelector.length === 0) : !value)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab' && !onPlaceholderClicked) {
+        e.preventDefault()
+        setOnPlaceholderClicked(true)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onPlaceholderClicked, setOnPlaceholderClicked])
+
   if (isShowPlaceholder)
     return <Placeholder varPickerProps={varPickerProps} onTypeClick={handleTypeChange} />
 
@@ -113,6 +135,7 @@ const PrePopulate: FC<Props> = ({
           setIsFocus(true)
         }}
         onBlur={() => setIsFocus(false)}
+        autoFocus
       />
       <TypeSwitch
         className="absolute bottom-1 left-1.5"
diff --git a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
index 3cc554b974..bf559193ec 100644
--- a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
@@ -290,7 +290,7 @@ export default function ShortcutsPopupPlugin({
       }}
       className={cn(
         useContainer ? '' : 'z-[999999]',
-        'absolute rounded-md bg-slate-50 shadow-lg',
+        'absolute rounded-xl bg-components-panel-bg-blur shadow-lg',
         className,
       )}
       style={{
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 0a4c24423c..d0f2e47f85 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1402,11 +1402,6 @@
       "count": 1
     }
   },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx": {
     "ts/no-explicit-any": {
       "count": 1