@nocobase/flow-engine 2.2.0-alpha.7 → 2.2.0-beta.10

package/src/components/FlowContextSelector.tsx

@@ -40,18 +40,6 @@ type SelectedPathInfo = {
   meta?: ContextSelectorItem['meta'];
 };
 
-type MetaNodeTooltipOptions = { tooltip?: React.ReactNode };
-
-function getMetaNodeTooltip(meta?: ContextSelectorItem['meta']): React.ReactNode {
-  if (!meta) {
-    return undefined;
-  }
-
-  const metaWithTooltip = meta as ContextSelectorItem['meta'] & MetaNodeTooltipOptions;
-  const options = meta.options as MetaNodeTooltipOptions | undefined;
-  return metaWithTooltip.tooltip ?? options?.tooltip;
-}
-
 const normalizePath = (path: unknown): string[] | undefined => {
   if (!Array.isArray(path)) {
     return undefined;
@@ -97,7 +85,6 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
   children,
-  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = parseValueToPath,
@@ -105,7 +92,6 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   open,
   onlyLeafSelectable = false,
   ignoreFieldNames,
-  dropdownFooter,
   ...cascaderProps
 }) => {
   const { token } = theme.useToken();
@@ -133,28 +119,17 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
         // 文本国际化：仅当 label 为字符串时进行翻译
         const baseLabel = typeof o.label === 'string' ? flowCtx.t(o.label) : o.label;
-        const labelText = typeof baseLabel === 'string' ? baseLabel : String(o.value);
-        const tooltip = getMetaNodeTooltip(meta);
-        const tooltipTitle = disabled
-          ? disabledReason || tooltip || flowCtx.t('This variable is not available')
-          : tooltip;
 
-        const label = tooltipTitle ? (
+        const label = disabled ? (
           <span>
             {baseLabel}
             <Tooltip
-              title={typeof tooltipTitle === 'string' ? flowCtx.t(tooltipTitle) : tooltipTitle}
-              placement="top"
-              classNames={{ root: 'flow-variable-tip' }}
+              title={disabledReason || flowCtx.t('This variable is not available')}
+              placement="right"
+              overlayClassName="flow-variable-disabled-tip"
               destroyTooltipOnHide
             >
-              <QuestionCircleOutlined
-                aria-label={`${labelText} tooltip`}
-                style={{
-                  marginLeft: token.marginXXS,
-                  color: disabled ? token.colorTextDisabled : token.colorTextDescription,
-                }}
-              />
+              <QuestionCircleOutlined style={{ marginLeft: 6, color: 'rgba(0,0,0,0.35)' }} />
             </Tooltip>
           </span>
         ) : (
@@ -169,7 +144,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         };
       });
     },
-    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS],
+    [flowCtx],
   );
 
   // 用于强制重新渲染的状态
@@ -290,13 +265,13 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
   // 默认按钮组件
   const defaultChildren = useMemo(() => {
-    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
+    const hasSelected = currentPath && currentPath.length > 0;
     return (
-      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle} disabled={cascaderProps.disabled}>
+      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
         x
       </Button>
     );
-  }, [active, cascaderProps.disabled, currentPath]);
+  }, [currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(
@@ -385,41 +360,12 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
     [cascaderOnDropdownVisibleChange, open],
   );
 
-  // Footer hint at the bottom of the dropdown. Defaults to the "double click to choose entire object" hint whenever
-  // non-leaf selection is allowed (double-clicking a non-leaf selects the whole object). Callers can override with
-  // their own node, or pass `null` to hide it.
-  const footerNode = useMemo(() => {
-    if (dropdownFooter !== undefined) {
-      return dropdownFooter;
-    }
-    if (onlyLeafSelectable) {
-      return null;
-    }
-    return (
-      <div
-        className={css`
-          padding: 6px 12px;
-          color: ${token.colorTextDescription};
-          border-top: 1px solid ${token.colorSplit};
-          font-size: ${token.fontSizeSM}px;
-        `}
-      >
-        {flowCtx.t('Double click to choose entire object')}
-      </div>
-    );
-  }, [dropdownFooter, onlyLeafSelectable, token, flowCtx]);
-
   const renderDropdown = useCallback(
     (menu: React.ReactElement) => {
       const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
       const cascaderMenu = React.isValidElement(cascaderMenuNode) ? cascaderMenuNode : <>{cascaderMenuNode}</>;
       if (!isSearchEnabled || children === null) {
-        return (
-          <>
-            {cascaderMenu}
-            {footerNode}
-          </>
-        );
+        return cascaderMenu;
       }
 
       return (
@@ -435,11 +381,10 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
             />
           </div>
           {cascaderMenu}
-          {footerNode}
         </>
       );
     },
-    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText, footerNode],
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText],
   );
 
   const inlinePlaceholder =

package/src/components/FormItem.tsx

@@ -54,20 +54,15 @@ const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'showLabel',
 ];
 
-const modelInternalPropKeys = ['globalSort'];
-
 export const FormItem = ({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }: ExtendedFormItemProps & ChildExtraProps) => {
-  const forwardedRest = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key)),
-  ) as ExtendedFormItemProps & ChildExtraProps;
   // 过滤掉 Form.Item 专用 props，只保留要传给子组件的
   const childProps = Object.fromEntries(
-    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
+    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
   );
 
   const processedChildren =
@@ -79,7 +74,7 @@ export const FormItem = ({
           }
           return child;
         });
-  const { label, labelWrap, colon = true, layout } = forwardedRest;
+  const { label, labelWrap, colon = true, layout } = rest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
   const labelColStyle =
     layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
@@ -127,17 +122,17 @@ export const FormItem = ({
   };
   return (
     <Form.Item
-      {...forwardedRest}
-      style={{ ...formItemStyle, ...forwardedRest.style }}
+      {...rest}
+      style={{ ...formItemStyle, ...rest.style }}
       labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}
-      extra={forwardedRest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{forwardedRest.extra}</span>}
+      extra={rest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{rest.extra}</span>}
       tooltip={
-        forwardedRest.tooltip &&
+        rest.tooltip &&
         ({
-          title: forwardedRest.tooltip,
+          title: rest.tooltip,
           overlayInnerStyle: { whiteSpace: 'pre-line' },
         } as TooltipProps)
       }

package/src/components/__tests__/FormItem.test.tsx

@@ -7,10 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { render } from '@testing-library/react';
-import React from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import { FormItem, formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
+import { describe, expect, it } from 'vitest';
+import { formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
 
 describe('FormItem', () => {
   it('keeps vertical label-to-value spacing consistent with v1', () => {
@@ -24,17 +22,4 @@ describe('FormItem', () => {
       marginBottom: 12,
     });
   });
-
-  it('does not forward model-internal globalSort props to field children', () => {
-    const Field = vi.fn(() => <input aria-label="field" />);
-
-    render(
-      <FormItem globalSort={['title']} placeholder="Title">
-        <Field />
-      </FormItem>,
-    );
-
-    expect(Field).toHaveBeenCalledWith(expect.not.objectContaining({ globalSort: expect.anything() }), {});
-    expect(Field).toHaveBeenCalledWith(expect.objectContaining({ placeholder: 'Title' }), {});
-  });
 });

package/src/components/variables/VariableHybridInput.tsx

@@ -9,17 +9,12 @@
 
 import { css, cx } from '@emotion/css';
 import { Space, theme } from 'antd';
-import { FormItemInputContext } from 'antd/es/form/context';
-import React, { isValidElement, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { MetaTreeNode } from '../../flowContext';
 import { useFlowContext } from '../../FlowContextProvider';
 import { FlowContextSelector } from '../FlowContextSelector';
 import { useResolvedMetaTree } from './useResolvedMetaTree';
-import {
-  formatPathToValue as defaultFormatPathToValue,
-  loadMetaTreeChildren,
-  parseValueToPath as defaultParseValueToPath,
-} from './utils';
+import { formatPathToValue as defaultFormatPathToValue, parseValueToPath as defaultParseValueToPath } from './utils';
 
 type RangeIndexes = [number, number, number, number];
 
@@ -36,21 +31,12 @@ export interface VariableHybridInputProps {
   value?: string;
   onChange?: (value: string) => void;
   disabled?: boolean;
-  readOnly?: boolean;
   placeholder?: string;
   addonBefore?: React.ReactNode;
   metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
   converters?: VariableHybridInputConverters;
   style?: React.CSSProperties;
   className?: string;
-  /**
-   * Validation status — turns the input border red (`error`) or amber
-   * (`warning`). Usually omitted: when rendered inside an antd `Form.Item`, the
-   * status is read automatically from `FormItemInputContext`, so dropping this
-   * into a `Form.Item` with failing rules colours the border with no extra
-   * wiring. An explicit prop wins over the inherited form status.
-   */
-  status?: 'error' | 'warning';
 }
 
 function reactNodeToPlainText(node: React.ReactNode): string {
@@ -97,38 +83,14 @@ function normalizeVariableKey(value: string): string {
     .trim();
 }
 
-function renderHTML(value: string, regExp: RegExp, resolveLabel: (matched: string) => string | undefined) {
+function renderHTML(value: string, labelMap: Map<string, string>, regExp: RegExp) {
   const re = new RegExp(regExp.source, regExp.flags.includes('g') ? regExp.flags : `${regExp.flags}g`);
   return escapeHtml(value || '').replace(re, (matched) => {
-    const label = resolveLabel(matched) || matched;
+    const label = labelMap.get(normalizeVariableKey(matched)) || matched;
     return createTagHTML(matched, label);
   });
 }
 
-// Resolve a `{{ … }}` reference path to its slash-joined title chain by walking the (possibly lazily-expanded) meta tree
-// live. Unlike `buildLabelMap` — which pre-walks only already-loaded (array) children into a memoized map — this reads
-// the tree's CURRENT contents at call time, so a level expanded in place (by the cascader's loadData when the user
-// drills in, or by the preload effect) is reflected on the very next render without the memoized map having to rebuild.
-// This is what fixes a just-picked deep node rendering as its raw `{{ … }}` token. Returns undefined if any segment is
-// missing or sits below a still-unresolved (thunk) level — the caller then falls back to the raw token.
-function resolveTitlesByPath(
-  roots: MetaTreeNode[] | undefined,
-  path: string[] | undefined,
-  ctxT: (text: string) => string,
-): string | undefined {
-  if (!roots || !path || !path.length) return undefined;
-  const titles: string[] = [];
-  let nodes: MetaTreeNode[] | undefined = roots;
-  for (const segment of path) {
-    if (!nodes) return undefined;
-    const matched: MetaTreeNode | undefined = nodes.find((node) => node.name === segment);
-    if (!matched) return undefined;
-    titles.push(reactNodeToPlainText(matched.title || matched.name));
-    nodes = Array.isArray(matched.children) ? (matched.children as MetaTreeNode[]) : undefined;
-  }
-  return titles.map(ctxT).join('/');
-}
-
 function buildLabelMap(
   nodes: MetaTreeNode[] | undefined,
   ctxT: (text: string) => string,
@@ -154,42 +116,6 @@ function buildLabelMap(
   return map;
 }
 
-// Collect every variable reference path in `value` (one per `{{ … }}` token). Used to preload lazy meta-tree levels so
-// a saved reference whose label lives below an unexpanded (thunk) level still resolves to a readable tag.
-function collectReferencePaths(
-  value: string,
-  regExp: RegExp,
-  parseValueToPath: (value?: string) => string[] | undefined,
-): string[][] {
-  const re = new RegExp(regExp.source, regExp.flags.includes('g') ? regExp.flags : `${regExp.flags}g`);
-  const paths: string[][] = [];
-  for (const matched of value.match(re) ?? []) {
-    const path = parseValueToPath(matched);
-    if (path && path.length) {
-      paths.push(path);
-    }
-  }
-  return paths;
-}
-
-// Walk one reference path down the meta tree, resolving each lazy `children` thunk in place. Returns true if it
-// resolved at least one level (so the caller knows to recompute the label map). Mirrors `TypedVariableInput`'s preload.
-async function preloadReferencePath(path: string[], roots: MetaTreeNode[]): Promise<boolean> {
-  let nodes: MetaTreeNode[] | undefined = roots;
-  let didLoad = false;
-  for (const segment of path) {
-    if (!nodes) break;
-    const matched: MetaTreeNode | undefined = nodes.find((node) => node.name === segment);
-    if (!matched) break;
-    if (typeof matched.children === 'function') {
-      matched.children = await loadMetaTreeChildren(matched);
-      didLoad = true;
-    }
-    nodes = Array.isArray(matched.children) ? matched.children : undefined;
-  }
-  return didLoad;
-}
-
 function pasteHTML(container: HTMLElement, html: string, indexes?: RangeIndexes) {
   const selection = window.getSelection?.();
   const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
@@ -296,14 +222,10 @@ function getCurrentRange(element: HTMLElement): RangeIndexes {
 }
 
 const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props) => {
-  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, readOnly, style } = props;
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
   const { token } = theme.useToken();
   const ctx = useFlowContext();
   const { resolvedMetaTree } = useResolvedMetaTree(metaTree);
-  // Inherit the antd Form.Item validation status (red/amber border) unless an explicit `status` prop overrides it — so
-  // the border colours automatically inside a failing `Form.Item`, no extra wiring for callers.
-  const formItemStatus = useContext(FormItemInputContext)?.status;
-  const effectiveStatus = props.status ?? formItemStatus;
   const inputRef = useRef<HTMLDivElement>(null);
   const [isComposing, setIsComposing] = useState(false);
   const [changed, setChanged] = useState(false);
@@ -311,63 +233,13 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
 
   const value = typeof props.value === 'string' ? props.value : props.value == null ? '' : String(props.value);
   const variableRegExp = converters?.variableRegExp ?? DEFAULT_VARIABLE_REGEXP;
-  const parseValueToPath = converters?.parseValueToPath ?? defaultParseValueToPath;
-
-  // Bumped after a saved reference's lazy meta-tree levels are resolved, so the label map (below) recomputes once the
-  // deep titles are actually loaded.
-  const [loadedFlag, setLoadedFlag] = useState(0);
-
-  // Preload the lazy levels every `{{ … }}` reference in `value` points through. `buildLabelMap` only walks
-  // already-loaded (array) children, so without this a reference below an unexpanded thunk level (e.g. a workflow
-  // node's output fields under `$jobsMapByNodeKey.<nodeKey>`) renders as the raw `{{ … }}` text instead of its
-  // node/field labels. Mirrors `TypedVariableInput`'s preload.
-  useEffect(() => {
-    if (!value || !Array.isArray(resolvedMetaTree) || !resolvedMetaTree.length) {
-      return;
-    }
-    const paths = collectReferencePaths(value, variableRegExp, parseValueToPath);
-    if (!paths.length) {
-      return;
-    }
-    let cancelled = false;
-    const run = async () => {
-      let didLoad = false;
-      for (const path of paths) {
-        const loaded = await preloadReferencePath(path, resolvedMetaTree as MetaTreeNode[]);
-        if (cancelled) return;
-        didLoad = didLoad || loaded;
-      }
-      if (didLoad && !cancelled) {
-        setLoadedFlag((prev) => prev + 1);
-      }
-    };
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, [value, resolvedMetaTree, variableRegExp, parseValueToPath]);
 
   const labelMap = useMemo(
     () => buildLabelMap(resolvedMetaTree as MetaTreeNode[] | undefined, ctx.t, converters),
-    // `loadedFlag` is read so the map recomputes after a lazy level resolves.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [resolvedMetaTree, ctx, converters, loadedFlag],
-  );
-
-  // Resolve one `{{ … }}` token to its label: the pre-built map first (cheap, covers statically-loaded levels), then a LIVE walk of the current meta tree. The live fallback is what makes a just-picked deep reference render its label immediately — when the user drills into a lazy level, the cascader resolves that level onto the meta tree in place WITHOUT changing the tree reference or bumping `loadedFlag`, so the memoized `labelMap` still misses it; walking the tree's current contents finds the freshly-loaded titles on the same render.
-  const resolveLabel = useCallback(
-    (matched: string): string | undefined => {
-      const mapped = labelMap.get(normalizeVariableKey(matched));
-      if (mapped) return mapped;
-      const path = parseValueToPath(matched);
-      return resolveTitlesByPath(resolvedMetaTree as MetaTreeNode[] | undefined, path, ctx.t);
-    },
-    // `loadedFlag` is read so a resolved lazy level re-creates this callback and re-renders the tags. `ctx` carries the translation fn.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [labelMap, parseValueToPath, resolvedMetaTree, ctx, loadedFlag],
+    [resolvedMetaTree, ctx, converters],
   );
 
-  const [html, setHtml] = useState(() => renderHTML(value, variableRegExp, resolveLabel));
+  const [html, setHtml] = useState(() => renderHTML(value, labelMap, variableRegExp));
 
   const emitChange = useCallback(
     (target: HTMLElement) => {
@@ -377,12 +249,12 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
   );
 
   useEffect(() => {
-    setHtml(renderHTML(value, variableRegExp, resolveLabel));
+    setHtml(renderHTML(value, labelMap, variableRegExp));
     if (!changed) {
       setRange([-1, 0, -1, 0]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, resolveLabel]);
+  }, [value, labelMap]);
 
   // Restore caret position after html update
   useEffect(() => {
@@ -459,13 +331,12 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
 
   const handleInput = useCallback(
     ({ currentTarget }: React.FormEvent<HTMLDivElement>) => {
-      if (readOnly) return;
       if (isComposing) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange, isComposing, readOnly],
+    [emitChange, isComposing],
   );
 
   const handleBlur = useCallback(({ currentTarget }: React.FocusEvent<HTMLDivElement>) => {
@@ -481,7 +352,6 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
   const handlePaste = useCallback(
     (event: React.ClipboardEvent<HTMLDivElement>) => {
       event.preventDefault();
-      if (readOnly) return;
       // Paste as plain text only; variable tags must be inserted via the picker.
       const text = event.clipboardData.getData('text/plain').replace(/\n/g, ' ');
       if (!text) return;
@@ -490,19 +360,18 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
       setRange(getCurrentRange(event.currentTarget));
       emitChange(event.currentTarget);
     },
-    [emitChange, readOnly],
+    [emitChange],
   );
 
   const handleCompositionStart = useCallback(() => setIsComposing(true), []);
   const handleCompositionEnd = useCallback(
     ({ currentTarget }: React.CompositionEvent<HTMLDivElement>) => {
       setIsComposing(false);
-      if (readOnly) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange, readOnly],
+    [emitChange],
   );
 
   const wrapperClassName = useMemo(
@@ -623,42 +492,6 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
           border-color: ${token.colorBorder};
         }
       }
-
-      &.is-readonly {
-        cursor: default;
-
-        &:hover {
-          border-color: ${token.colorBorder};
-        }
-      }
-
-      &.is-error {
-        border-color: ${token.colorError};
-
-        &:hover {
-          border-color: ${token.colorErrorBorderHover};
-        }
-
-        &:focus,
-        &:focus-visible {
-          border-color: ${token.colorError};
-          box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.colorErrorOutline};
-        }
-      }
-
-      &.is-warning {
-        border-color: ${token.colorWarning};
-
-        &:hover {
-          border-color: ${token.colorWarningBorderHover};
-        }
-
-        &:focus,
-        &:focus-visible {
-          border-color: ${token.colorWarning};
-          box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.colorWarningOutline};
-        }
-      }
     `;
   }, [token, addonBefore]);
 
@@ -672,12 +505,8 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
           aria-label="textbox"
           className={cx(editorClassName, {
             'is-disabled': disabled,
-            'is-readonly': readOnly,
-            'is-error': effectiveStatus === 'error',
-            'is-warning': effectiveStatus === 'warning',
           })}
-          contentEditable={!disabled && !readOnly}
-          aria-readonly={readOnly}
+          contentEditable={!disabled}
           data-placeholder={placeholder}
           onInput={handleInput}
           onBlur={handleBlur}
@@ -690,7 +519,7 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
         <FlowContextSelector
           metaTree={metaTree}
           disabled={disabled}
-          parseValueToPath={parseValueToPath}
+          parseValueToPath={converters?.parseValueToPath ?? defaultParseValueToPath}
           formatPathToValue={(item) => converters?.formatPathToValue?.(item) || defaultFormatPathToValue(item)}
           onChange={handleSelectorChange}
         />

package/src/components/variables/VariableInput.tsx

@@ -192,7 +192,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     };
 
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
 
   const ValueComponent = useMemo(() => {
     const Component = renderInputComponent?.(resolvedMetaTreeNode);
@@ -356,8 +356,6 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       <FlowContextSelector
         metaTree={resolvedMetaTree}
         value={innerValue}
-        active={isVariableValue(innerValue)}
-        disabled={disabled}
         onChange={handleVariableSelect}
         parseValueToPath={resolvePathFromValue}
         formatPathToValue={resolveValueFromPath}

package/src/components/variables/__tests__/FlowContextSelector.test.tsx

@@ -67,23 +67,6 @@ describe('FlowContextSelector', () => {
     });
   });
 
-  it('uses explicit active=false to keep the default trigger unhighlighted even when value parses to a path', async () => {
-    const flowContext = createTestFlowContext();
-
-    render(
-      <TestFlowContextWrapper context={flowContext}>
-        <FlowContextSelector
-          metaTree={() => flowContext.getPropertyMetaTree()}
-          value="{{ ctx.user.name }}"
-          active={false}
-        />
-      </TestFlowContextWrapper>,
-    );
-
-    const button = await screen.findByRole('button');
-    expect(button.className).not.toContain('ant-btn-primary');
-  });
-
   it('should support function metaTree loading', async () => {
     const flowContext = createTestFlowContext();
     const metaTreeFn = vi.fn(() => flowContext.getPropertyMetaTree());
@@ -284,43 +267,6 @@ describe('FlowContextSelector', () => {
     });
   });
 
-  it('shows enabled variable item tooltip above the menu item', async () => {
-    const flowContext = createTestFlowContext();
-    const metaTree: MetaTreeNode[] = [
-      {
-        name: '$system',
-        title: 'System variables',
-        type: '',
-        paths: ['$system'],
-        children: [
-          {
-            name: 'instanceId',
-            title: 'Instance ID',
-            type: '',
-            paths: ['$system', 'instanceId'],
-            options: { tooltip: 'The ID of current server instance' },
-          },
-        ],
-      },
-    ];
-
-    render(
-      <TestFlowContextWrapper context={flowContext}>
-        <FlowContextSelector metaTree={metaTree} />
-      </TestFlowContextWrapper>,
-    );
-
-    fireEvent.click(screen.getByRole('button'));
-    fireEvent.click(await screen.findByText('System variables'));
-
-    expect(await screen.findByText('Instance ID')).toBeInTheDocument();
-    const tooltipIcon = screen.getByLabelText('Instance ID tooltip');
-    fireEvent.mouseEnter(tooltipIcon);
-
-    const tooltip = await screen.findByText('The ID of current server instance');
-    expect(tooltip.closest('.ant-tooltip')).toHaveClass('ant-tooltip-placement-top');
-  });
-
   it('should support inline search input when children is null and keep lazy expand', async () => {
     const flowContext = createTestFlowContext();
     const loadOrgChildren = vi.fn(async () => [
@@ -459,13 +405,10 @@ describe('FlowContextSelector', () => {
 
     const clearIcon = document.querySelector('.ant-input-clear-icon') as HTMLElement | null;
     expect(clearIcon).toBeInTheDocument();
-    if (!clearIcon) {
-      throw new Error('Expected inline clear icon to be present');
-    }
 
-    fireEvent.mouseDown(clearIcon);
-    fireEvent.mouseUp(clearIcon);
-    fireEvent.click(clearIcon);
+    fireEvent.mouseDown(clearIcon!);
+    fireEvent.mouseUp(clearIcon!);
+    fireEvent.click(clearIcon!);
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith('', undefined);