From 9616ac170b150833d19b118fc015e52cb1391742 Mon Sep 17 00:00:00 2001 From: Coding On Star <447357187@qq.com> Date: Thu, 23 Apr 2026 17:24:19 +0800 Subject: [PATCH] fix: update node handle opacity and pointer events behavior in components and tests (#35525) Co-authored-by: CodingOnStar --- .../_base/components/__tests__/node-handle.spec.tsx | 12 +++++++----- .../workflow/nodes/_base/components/node-handle.tsx | 12 ++++++------ 2 files changed, 13 insertions(+), 11 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 772814f0f3..1f2c3b3aef 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 @@ -194,7 +194,9 @@ describe('node-handle', () => { fireEvent.click(addNodeButton) expect(addNodeButton).toHaveClass('opacity-100') - expect(addNodeButton).toHaveClass('pointer-events-auto') + // 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('pointer-events-none') fireEvent.click(handle) @@ -236,7 +238,7 @@ describe('node-handle', () => { }) expect(getAddNodeButton()).toHaveClass('opacity-100') - expect(getAddNodeButton()).toHaveClass('pointer-events-auto') + expect(getAddNodeButton()).toHaveClass('pointer-events-none') }) it.each([ @@ -266,7 +268,7 @@ describe('node-handle', () => { fireEvent.click(addNodeButton) expect(addNodeButton).toHaveClass('opacity-100') - expect(addNodeButton).toHaveClass('pointer-events-auto') + expect(addNodeButton).toHaveClass('pointer-events-none') fireEvent.click(getSelectNodeButton()) @@ -295,7 +297,7 @@ describe('node-handle', () => { expect(addNodeButton).toHaveClass('custom-selector') expect(addNodeButton).toHaveClass('opacity-100') - expect(addNodeButton).toHaveClass('pointer-events-auto') + expect(addNodeButton).toHaveClass('pointer-events-none') }) it.each([ @@ -332,7 +334,7 @@ describe('node-handle', () => { const addNodeButton = getAddNodeButton() expect(addNodeButton).toHaveClass('opacity-100') - expect(addNodeButton).toHaveClass('pointer-events-auto') + 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 e84b09ac95..58597a1670 100644 --- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx +++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx @@ -115,9 +115,9 @@ export const NodeTargetHandle = memo(({ triggerClassName={open => ` absolute left-0 top-0 opacity-0 pointer-events-none transition-opacity duration-150 ${nodeSelectorClassName} - group-hover:opacity-100 group-hover:pointer-events-auto - ${data.selected && 'opacity-100 pointer-events-auto'} - ${open && 'opacity-100 pointer-events-auto'} + group-hover:opacity-100 + ${data.selected && 'opacity-100'} + ${open && 'opacity-100'} `} availableBlocksTypes={availablePrevBlocks} /> @@ -233,9 +233,9 @@ export const NodeSourceHandle = memo(({ triggerClassName={open => ` absolute top-0 left-0 opacity-0 pointer-events-none transition-opacity duration-150 ${nodeSelectorClassName} - group-hover:opacity-100 group-hover:pointer-events-auto - ${data.selected && 'opacity-100 pointer-events-auto'} - ${open && 'opacity-100 pointer-events-auto'} + group-hover:opacity-100 + ${data.selected && 'opacity-100'} + ${open && 'opacity-100'} `} availableBlocksTypes={availableNextBlocks} />