From 5cf3d24018647067fe70d50c342270d5df25c319 Mon Sep 17 00:00:00 2001
From: cathy <38449456+CathyL0@users.noreply.github.com>
Date: Thu, 4 Sep 2025 10:59:08 +0800
Subject: [PATCH] fix(webhook): selected type ui style (#25106)

---
 web/app/components/base/select/index.tsx       | 18 ++++++++----------
 .../components/generic-table.tsx               |  5 +++--
 .../components/parameter-table.tsx             |  2 +-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index b7f01834a3..6befd86b80 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -72,14 +72,13 @@ const Select: FC<ISelectProps> = ({
   const [open, setOpen] = useState(false)
 
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+  // Ensure selectedItem is properly set when defaultValue or items change
   useEffect(() => {
     let defaultSelect = null
-    const existed = items.find((item: Item) => item.value === defaultValue)
-    if (existed)
-      defaultSelect = existed
-
+    // Handle cases where defaultValue might be undefined, null, or empty string
+    defaultSelect = (defaultValue && items.find((item: Item) => item.value === defaultValue)) || null
     setSelectedItem(defaultSelect)
-  }, [defaultValue])
+  }, [defaultValue, items])
 
   const filteredItems: Item[]
     = query === ''
@@ -195,14 +194,13 @@ const SimpleSelect: FC<ISelectProps> = ({
 
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
 
+  // Ensure selectedItem is properly set when defaultValue or items change
   useEffect(() => {
     let defaultSelect = null
-    const existed = items.find((item: Item) => item.value === defaultValue)
-    if (existed)
-      defaultSelect = existed
-
+    // Handle cases where defaultValue might be undefined, null, or empty string
+    defaultSelect = (defaultValue && items.find((item: Item) => item.value === defaultValue)) || null
     setSelectedItem(defaultSelect)
-  }, [defaultValue])
+  }, [defaultValue, items])
 
   const listboxRef = useRef<HTMLDivElement>(null)
 
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
index 17479f16a2..6888a88533 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
@@ -171,14 +171,15 @@ const GenericTable: FC<GenericTableProps> = ({
             onSelect={item => handleChange(item.value)}
             disabled={readonly}
             placeholder={column.placeholder}
+            hideChecked={false}
+            notClearable={true}
             // wrapper provides compact height, trigger is transparent like text
             wrapperClassName="h-6 w-full min-w-0"
             className={cn(
-              'h-6 rounded-none bg-transparent px-0 text-text-secondary',
+              'h-6 rounded-none bg-transparent pl-0 pr-6 text-text-secondary',
               'hover:bg-transparent focus-visible:bg-transparent group-hover/simple-select:bg-transparent',
             )}
             optionWrapClassName="w-26 min-w-26 z-[60] -ml-3"
-            notClearable
           />
         )
 
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx
index 482cd672ee..1d35cda126 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx
@@ -46,7 +46,7 @@ const ParameterTable: FC<ParameterTableProps> = ({
         key: 'type',
         title: 'Type',
         type: (isRequestBody ? 'select' : 'input') as ColumnConfig['type'],
-        width: 'w-[78px]',
+        width: 'w-[120px]',
         placeholder: 'Type',
         options: isRequestBody ? typeOptions : undefined,
       }]