fix: workflow context menu popup issue (#7530)

web/app/components/workflow/node-contextmenu.tsx

@@ -1,5 +1,6 @@
 import {
   memo,
+  useEffect,
   useRef,
 } from 'react'
 import { useClickAway } from 'ahooks'
@@ -9,13 +10,18 @@ import type { Node } from './types'
 import { useStore } from './store'
 import { usePanelInteractions } from './hooks'
 
-const PanelContextmenu = () => {
+const NodeContextmenu = () => {
   const ref = useRef(null)
   const nodes = useNodes()
-  const { handleNodeContextmenuCancel } = usePanelInteractions()
+  const { handleNodeContextmenuCancel, handlePaneContextmenuCancel } = usePanelInteractions()
   const nodeMenu = useStore(s => s.nodeMenu)
   const currentNode = nodes.find(node => node.id === nodeMenu?.nodeId) as Node
 
+  useEffect(() => {
+    if (nodeMenu)
+      handlePaneContextmenuCancel()
+  }, [nodeMenu, handlePaneContextmenuCancel])
+
   useClickAway(() => {
     handleNodeContextmenuCancel()
   }, ref)
@@ -42,4 +48,4 @@ const PanelContextmenu = () => {
   )
 }
 
-export default memo(PanelContextmenu)
+export default memo(NodeContextmenu)

web/app/components/workflow/panel-contextmenu.tsx

@@ -1,5 +1,6 @@
 import {
   memo,
+  useEffect,
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -23,11 +24,16 @@ const PanelContextmenu = () => {
   const clipboardElements = useStore(s => s.clipboardElements)
   const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal)
   const { handleNodesPaste } = useNodesInteractions()
-  const { handlePaneContextmenuCancel } = usePanelInteractions()
+  const { handlePaneContextmenuCancel, handleNodeContextmenuCancel } = usePanelInteractions()
   const { handleStartWorkflowRun } = useWorkflowStartRun()
   const { handleAddNote } = useOperator()
   const { exportCheck } = useDSL()
 
+  useEffect(() => {
+    if (panelMenu)
+      handleNodeContextmenuCancel()
+  }, [panelMenu, handleNodeContextmenuCancel])
+
   useClickAway(() => {
     handlePaneContextmenuCancel()
   }, ref)