From 8ce356c98fd23167f87320f6c1120c99db60ae3e Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 23 Apr 2026 19:27:14 +0800
Subject: [PATCH] fix(web): fix node handle

---
 .../_base/components/__tests__/node-handle.spec.tsx  | 12 +++++-------
 .../workflow/nodes/_base/components/node-handle.tsx  | 12 ++++++------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
index 86ee91afa6..2b0524be69 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
@@ -193,9 +193,7 @@ describe('node-handle', () => {
 
       fireEvent.click(addNodeButton)
 
-      expect(addNodeButton).toHaveClass('opacity-100')
-      // Trigger stays pointer-events-none so it never steals mousedown from
-      // the underlying React Flow handle (drag-to-connect must keep working).
+      expect(addNodeButton).toHaveClass('flex!')
       expect(addNodeButton).toHaveClass('pointer-events-none')
 
       fireEvent.click(handle)
@@ -237,7 +235,7 @@ describe('node-handle', () => {
         selected: true,
       })
 
-      expect(getAddNodeButton()).toHaveClass('opacity-100')
+      expect(getAddNodeButton()).toHaveClass('flex!')
       expect(getAddNodeButton()).toHaveClass('pointer-events-none')
     })
 
@@ -268,7 +266,7 @@ describe('node-handle', () => {
 
       fireEvent.click(addNodeButton)
 
-      expect(addNodeButton).toHaveClass('opacity-100')
+      expect(addNodeButton).toHaveClass('flex!')
       expect(addNodeButton).toHaveClass('pointer-events-none')
 
       fireEvent.click(getSelectNodeButton())
@@ -297,7 +295,7 @@ describe('node-handle', () => {
       const addNodeButton = getAddNodeButton()
 
       expect(addNodeButton).toHaveClass('custom-selector')
-      expect(addNodeButton).toHaveClass('opacity-100')
+      expect(addNodeButton).toHaveClass('flex!')
       expect(addNodeButton).toHaveClass('pointer-events-none')
     })
 
@@ -334,7 +332,7 @@ describe('node-handle', () => {
 
       const addNodeButton = getAddNodeButton()
 
-      expect(addNodeButton).toHaveClass('opacity-100')
+      expect(addNodeButton).toHaveClass('flex!')
       expect(addNodeButton).toHaveClass('pointer-events-none')
       expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(false)
       expect(mockSetHasSelectedStartNode).toHaveBeenCalledWith(false)
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 8240f4497b..db3ff7a973 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -116,9 +116,9 @@ export const NodeTargetHandle = memo(({
               triggerClassName={open => `
                 hidden absolute left-0 top-0 pointer-events-none
                 ${nodeSelectorClassName}
-                group-hover:opacity-100
-                ${data.selected && 'opacity-100'}
-                ${open && 'opacity-100'}
+                group-hover:flex!
+                ${data.selected && 'flex!'}
+                ${open && 'flex!'}
               `}
               availableBlocksTypes={availablePrevBlocks}
             />
@@ -235,9 +235,9 @@ export const NodeSourceHandle = memo(({
             triggerClassName={open => `
               hidden absolute top-0 left-0 pointer-events-none
               ${nodeSelectorClassName}
-              group-hover:opacity-100
-              ${data.selected && 'opacity-100'}
-              ${open && 'opacity-100'}
+              group-hover:flex!
+              ${data.selected && 'flex!'}
+              ${open && 'flex!'}
             `}
             availableBlocksTypes={availableNextBlocks}
           />