fix(web): stabilize workflow node panel operator dropdown trigger (#35352)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: jerryzai <jerryzh8710@protonmail.com>
Co-authored-by: NVIDIAN <speedy.hpc@hotmail.com>
Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: Junghwan <70629228+shaun0927@users.noreply.github.com>
Co-authored-by: HeYinKazune <70251095+HeYin-OS@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

eslint-suppressions.json

@@ -4679,11 +4679,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/node-control.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/node-handle.tsx": {
     "react/set-state-in-effect": {
       "count": 1

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

@@ -9,7 +9,11 @@ import { useTranslation } from 'react-i18next'
 import {
   Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import Tooltip from '@/app/components/base/tooltip'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import {
   useNodesInteractions,
@@ -46,7 +50,8 @@ const NodeControl: FC<NodeControlProps> = ({
       `}
     >
       <div
-        className="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]"
+        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]"
+        onMouseDown={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       >
         {
@@ -71,11 +76,13 @@ const NodeControl: FC<NodeControlProps> = ({
                 isSingleRunning
                   ? <Stop className="h-3 w-3" />
                   : (
-                      <Tooltip
-                        popupContent={t('panel.runThisStep', { ns: 'workflow' })}
-                        asChild={false}
-                      >
-                        <span className="i-ri-play-large-line h-3 w-3" />
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={<span className="i-ri-play-large-line h-3 w-3" />}
+                        />
+                        <TooltipContent>
+                          {t('panel.runThisStep', { ns: 'workflow' })}
+                        </TooltipContent>
                       </Tooltip>
                     )
               }

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

@@ -1,10 +1,12 @@
 import type { OffsetOptions } from '@floating-ui/react'
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -32,6 +34,7 @@ const PanelOperator = ({
   onOpenChange,
   showHelpLink = true,
 }: PanelOperatorProps) => {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const sideOffset = typeof offset === 'number'
     ? offset
@@ -54,17 +57,16 @@ const PanelOperator = ({
       open={open}
       onOpenChange={handleOpenChange}
     >
-      <DropdownMenuTrigger render={<div />}>
-        <div
-          className={`
-            flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
-            hover:bg-state-base-hover
-            ${open && 'bg-state-base-hover'}
-            ${triggerClassName}
-          `}
-        >
-          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
-        </div>
+      <DropdownMenuTrigger
+        render={<button type="button" />}
+        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',
+          triggerClassName,
+        )}
+      >
+        <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"