diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.test.ts b/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.test.ts index 58df8ab2799..1f4aad6413f 100644 --- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.test.ts +++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.test.ts @@ -1507,6 +1507,25 @@ describe('Canvas', () => { useContextMenu().close(); }); + it('clears the node selection when opening the pane context menu', async () => { + const node = createCanvasNodeElement({ id: 'node-1', label: 'Node 1' }); + workflowDocumentStore.setNodes([createTestNode({ id: node.id, name: 'Node 1' })]); + + const { container } = renderComponent({ + props: { nodes: [node] }, + }); + await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1)); + + const { addSelectedNodes, findNode, getSelectedNodes } = useVueFlow(canvasId); + addSelectedNodes([findNode(node.id)!]); + await waitFor(() => expect(getSelectedNodes.value).toHaveLength(1)); + + await fireEvent.contextMenu(container.querySelector('.vue-flow__pane')!); + + await waitFor(() => expect(getSelectedNodes.value).toHaveLength(0)); + expect(useContextMenu().targetNodeIds.value).toEqual([]); + }); + async function renderWithGroup( props: { readOnly?: boolean; suppressInteraction?: boolean } = {}, { diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue index 58c15c37a11..fa7198d4a09 100644 --- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue +++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue @@ -1407,6 +1407,15 @@ function onOpenContextMenu( }); } +function onOpenPaneContextMenu(event: MouseEvent) { + clearSelectedNodes(); + contextMenu.open(event, { + source: 'canvas', + nodeIds: [], + readOnly: isContextMenuReadOnly.value, + }); +} + function onOpenSelectionContextMenu({ event }: { event: MouseEvent }) { onOpenContextMenu(event); } @@ -1797,7 +1806,7 @@ defineExpose({ @connect="onConnect" @connect-end="onConnectEnd" @pane-click="onClickPane" - @pane-context-menu="onOpenContextMenu" + @pane-context-menu="onOpenPaneContextMenu" @move="onPaneMove" @move-end="onPaneMoveEnd" @node-drag-start="onNodeDragStart"