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 1f2c3b3aef..86ee91afa6 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
@@ -188,7 +188,7 @@ describe('node-handle', () => {
       const addNodeButton = getAddNodeButton()
 
       expect(addNodeButton).toHaveClass('custom-selector')
-      expect(addNodeButton).toHaveClass('opacity-0')
+      expect(addNodeButton).toHaveClass('hidden')
       expect(addNodeButton).toHaveClass('pointer-events-none')
 
       fireEvent.click(addNodeButton)
@@ -200,7 +200,7 @@ describe('node-handle', () => {
 
       fireEvent.click(handle)
 
-      expect(addNodeButton).toHaveClass('opacity-0')
+      expect(addNodeButton).toHaveClass('hidden')
 
       fireEvent.click(getSelectNodeButton())
 
@@ -263,7 +263,8 @@ describe('node-handle', () => {
       const handle = screen.getByTestId('handle-source-handle')
       const addNodeButton = getAddNodeButton()
 
-      expect(addNodeButton).toHaveClass('opacity-0')
+      expect(addNodeButton).toHaveClass('hidden')
+      expect(addNodeButton).toHaveClass('pointer-events-none')
 
       fireEvent.click(addNodeButton)
 
@@ -285,7 +286,7 @@ describe('node-handle', () => {
 
       fireEvent.click(handle)
 
-      expect(addNodeButton).toHaveClass('opacity-0')
+      expect(addNodeButton).toHaveClass('hidden')
     })
 
     it('should keep the source add trigger visible when the node is selected', () => {
@@ -345,7 +346,7 @@ describe('node-handle', () => {
 
       renderSourceHandle({ type: BlockEnum.Start })
 
-      expect(getAddNodeButton()).toHaveClass('opacity-0')
+      expect(getAddNodeButton()).toHaveClass('hidden')
       expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(false)
       expect(mockSetHasSelectedStartNode).not.toHaveBeenCalled()
     })
@@ -366,7 +367,7 @@ describe('node-handle', () => {
 
       renderSourceHandle({ type: BlockEnum.Code })
 
-      expect(getAddNodeButton()).toHaveClass('opacity-0')
+      expect(getAddNodeButton()).toHaveClass('hidden')
       expect(mockSetShouldAutoOpenStartNodeSelector).not.toHaveBeenCalled()
       expect(mockSetHasSelectedStartNode).not.toHaveBeenCalled()
       expect(mockWorkflowStoreSetState).not.toHaveBeenCalled()
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 58597a1670..8240f4497b 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -112,8 +112,9 @@ export const NodeTargetHandle = memo(({
               onSelect={handleSelect}
               asChild
               placement="left"
+              // Keep the trigger out of hit-testing so drag-to-connect still lands on the React Flow handle.
               triggerClassName={open => `
-                absolute left-0 top-0 opacity-0 pointer-events-none transition-opacity duration-150
+                hidden absolute left-0 top-0 pointer-events-none
                 ${nodeSelectorClassName}
                 group-hover:opacity-100
                 ${data.selected && 'opacity-100'}
@@ -230,8 +231,9 @@ export const NodeSourceHandle = memo(({
             onOpenChange={handleOpenChange}
             onSelect={handleSelect}
             asChild
+            // Keep the trigger out of hit-testing so drag-to-connect still lands on the React Flow handle.
             triggerClassName={open => `
-              absolute top-0 left-0 opacity-0 pointer-events-none transition-opacity duration-150
+              hidden absolute top-0 left-0 pointer-events-none
               ${nodeSelectorClassName}
               group-hover:opacity-100
               ${data.selected && 'opacity-100'}