From 506e1a8bc77ddd861351e1939515bf2483827e21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Wed, 6 May 2026 14:16:28 +0800
Subject: [PATCH] fix: migrate condition operator popover (#35828)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 eslint-suppressions.json                      |  5 --
 .../condition-list/condition-operator.tsx     | 59 ++++++++++---------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 614dd0b633..6ff584e4e9 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -4259,11 +4259,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx": {
     "no-restricted-imports": {
       "count": 1
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index f14743ce9f..0784b99cfb 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -4,17 +4,17 @@ import type {
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   useMemo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import {
   getOperators,
   isComparisonOperatorNeedTranslate,
@@ -49,31 +49,32 @@ const ConditionOperator = ({
   }, [t, variableType])
   const selectedOption = options.find(o => Array.isArray(value) ? o.value === value[0] : o.value === value)
   return (
-    <PortalToFollowElem
+    <Popover
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <Button
-          className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
-          size="small"
-          variant="ghost"
-          disabled={disabled}
-        >
-          {
-            selectedOption
-              ? selectedOption.label
-              : t(`${i18nPrefix}.select`, { ns: 'workflow' })
-          }
-          <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
+      <PopoverTrigger
+        render={(
+          <Button
+            className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
+            size="small"
+            variant="ghost"
+            disabled={disabled}
+          >
+            {
+              selectedOption
+                ? selectedOption.label
+                : t(`${i18nPrefix}.select`, { ns: 'workflow' })
+            }
+            <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
+          </Button>
+        )}
+      />
+      <PopoverContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {
             options.map(option => (
@@ -90,8 +91,8 @@ const ConditionOperator = ({
             ))
           }
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </PopoverContent>
+    </Popover>
   )
 }