From cd497a8c525d59f923bb4ed392c6a5325e306342 Mon Sep 17 00:00:00 2001
From: pavior <103894247+Pavior0@users.noreply.github.com>
Date: Fri, 16 Jan 2026 13:31:57 +0800
Subject: [PATCH] fix(web): use portal for variable picker in code editor
 (Fixes #31063) (#31066)

---
 .../components/editor/code-editor/editor-support-vars.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index ae14e7ccbc..346ee7efe6 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -5,6 +5,7 @@ import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { cn } from '@/utils/classnames'
@@ -147,7 +148,7 @@ const CodeEditor: FC<Props> = ({
         onMount={onEditorMounted}
         placeholder={t('common.jinjaEditorPlaceholder', { ns: 'workflow' })!}
       />
-      {isShowVarPicker && (
+      {isShowVarPicker && createPortal(
         <div
           ref={popupRef}
           className="w-[228px] space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg"
@@ -164,7 +165,8 @@ const CodeEditor: FC<Props> = ({
             onChange={handleSelectVar}
             isSupportFileVar={false}
           />
-        </div>
+        </div>,
+        document.body,
       )}
     </div>
   )