fix(web): keep workflow panel operator anchor mounted during menu close animation (#35363)

web/app/components/workflow/nodes/_base/components/node-control.tsx

@@ -1,15 +1,12 @@
 import type { FC } from 'react'
 import type { Node } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@langgenius/dify-ui/tooltip'
-import {
-  memo,
-  useCallback,
-  useState,
-} from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Stop,
@@ -31,23 +28,19 @@ const NodeControl: FC<NodeControlProps> = ({
   pluginInstallLocked,
 }) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
   const { handleNodeSelect } = useNodesInteractions()
   const workflowStore = useWorkflowStore()
   const isSingleRunning = data._singleRunningStatus === NodeRunningStatus.Running
-  const handleOpenChange = useCallback((newOpen: boolean) => {
-    setOpen(newOpen)
-  }, [])
 
   const isChildNode = !!(data.isInIteration || data.isInLoop)
   return (
     <div
-      className={`
-      absolute -top-7 right-0 hidden h-7 pb-1
-      ${!pluginInstallLocked && 'group-hover:flex'}
-      ${data.selected && 'flex!'}
-      ${open && 'flex!'}
-      `}
+      className={cn(
+        'invisible absolute -top-7 right-0 flex h-7 pb-1',
+        !pluginInstallLocked && 'group-hover:visible',
+        data.selected && 'visible',
+        'has-[[data-popup-open]]:visible',
+      )}
     >
       <div
         className="nodrag nopan nowheel flex h-6 items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg px-0.5 text-text-tertiary shadow-md backdrop-blur-[5px]"
@@ -93,7 +86,6 @@ const NodeControl: FC<NodeControlProps> = ({
           id={id}
           data={data}
           offset={0}
-          onOpenChange={handleOpenChange}
           triggerClassName="w-5! h-5!"
         />
       </div>

web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx

@@ -20,7 +20,6 @@ type PanelOperatorProps = {
   triggerClassName?: string
   offset?: OffsetOptions | number
   onOpenChange?: (open: boolean) => void
-  inNode?: boolean
   showHelpLink?: boolean
 }
 const PanelOperator = ({
@@ -45,15 +44,14 @@ const PanelOperator = ({
     ? offset.crossAxis
     : 0
 
-  const handleOpenChange = useCallback((newOpen: boolean) => {
-    setOpen(newOpen)
-
-    if (onOpenChange)
-      onOpenChange(newOpen)
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen)
+    onOpenChange?.(nextOpen)
   }, [onOpenChange])
 
   return (
     <DropdownMenu
+      modal={false}
       open={open}
       onOpenChange={handleOpenChange}
     >
@@ -62,7 +60,7 @@ const PanelOperator = ({
         aria-label={t('operation.more', { ns: 'common' })}
         className={cn(
           'nodrag nopan nowheel flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover',
-          open && 'bg-state-base-hover',
+          'data-[popup-open]:bg-state-base-hover',
           triggerClassName,
         )}
       >
@@ -77,7 +75,7 @@ const PanelOperator = ({
         <PanelOperatorPopup
           id={id}
           data={data}
-          onClosePopup={() => handleOpenChange(false)}
+          onClosePopup={() => setOpen(false)}
           showHelpLink={showHelpLink}
         />
       </DropdownMenuContent>