@nocobase/flow-engine 2.2.0-beta.14 → 2.2.0-beta.16

package/src/components/subModel/LazyDropdown.tsx

@@ -8,7 +8,7 @@
  */
 
 import { css } from '@emotion/css';
-import { Dropdown, DropdownProps, Empty, Input, InputProps, Spin } from 'antd';
+import { ConfigProvider, Dropdown, DropdownProps, Empty, Input, InputProps, Spin } from 'antd';
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFlowEngine } from '../../provider';
 
@@ -484,13 +484,10 @@ const createSearchItem = (
           if (shouldActivateSearchSubmenu) {
             activateSearchSubmenu(searchKey);
           }
-          if ((e.nativeEvent as any)?.isComposing || searchHandlers.isComposing(searchKey)) {
+          if ((e.nativeEvent as InputEvent).isComposing || searchHandlers.isComposing(searchKey)) {
             searchHandlers.updateInputValue(searchKey, value);
             return;
           }
-          if (!value && shouldActivateSearchSubmenu) {
-            deactivateSearchSubmenu(searchKey);
-          }
           searchHandlers.updateSearchValue(searchKey, value);
         }}
         onCompositionStart={(e) => {
@@ -504,11 +501,7 @@ const createSearchItem = (
           e.stopPropagation();
           const value = e.currentTarget.value;
           if (shouldActivateSearchSubmenu) {
-            if (value) {
-              activateSearchSubmenu(searchKey);
-            } else {
-              deactivateSearchSubmenu(searchKey);
-            }
+            activateSearchSubmenu(searchKey);
           }
           searchHandlers.endComposition(searchKey, value);
         }}
@@ -516,11 +509,21 @@ const createSearchItem = (
           e.stopPropagation();
         }}
         onKeyDown={(e) => {
+          if (e.key === 'Escape' || e.key === 'Tab') {
+            deactivateSearchSubmenu(searchKey);
+            return;
+          }
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
           e.stopPropagation();
         }}
         onMouseDown={(e) => {
           // 防止菜单聚焦丢失或页面滚动
           e.stopPropagation();
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
         }}
         size="small"
         style={{
@@ -552,7 +555,7 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false,
@@ -561,13 +564,20 @@ const dropdownPersistRegistry: Map<string, number> = new Map();
 
 const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownMenuProps }> = ({ menu, ...props }) => {
   const engine = useFlowEngine();
+  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
+  const triggerId = React.useId();
   const [menuVisible, setMenuVisible] = useState(false);
   const [openKeys, setOpenKeys] = useState<Set<string>>(new Set());
-  const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null);
   const [rootItems, setRootItems] = useState<Item[]>([]);
   const [rootLoading, setRootLoading] = useState(false);
+  const activeSearchKeyRef = useRef<string | null>(null);
   const closeByOutsideClickRef = useRef(false);
   const skipPreserveActiveSearchRef = useRef(false);
+  const triggerOpenClassName = `nb-lazy-dropdown-trigger-${triggerId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const defaultOpenClassName = `${getPrefixCls('dropdown', props.prefixCls)}-open`;
+  const mergedOpenClassName = [props.openClassName ?? defaultOpenClassName, triggerOpenClassName]
+    .filter(Boolean)
+    .join(' ');
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
 
@@ -589,13 +599,13 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
   const closeMenu = useCallback(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
 
   const activateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -605,11 +615,14 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   }, []);
 
   const deactivateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey((prev) => (prev === key ? null : prev));
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
 
   const closeActiveSearchForPath = useCallback(
     (keyPath: string) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (
         !activeSearchKey ||
         keyPath === activeSearchKey ||
@@ -621,25 +634,26 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue],
+    [clearSearchValue],
   );
 
   const handleMenuOpenChange = useCallback(
     (nextOpenKeys: string[]) => {
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
 
@@ -658,7 +672,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       dropdownMenuProps.onOpenChange?.(normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
   );
 
   useEffect(() => {
@@ -666,7 +680,9 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
     const markOutsideClick = (event: MouseEvent | PointerEvent) => {
       const target = event.target as HTMLElement | null;
-      const isOutside = !target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      const isInsidePopup = target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      const isInsideCurrentTrigger = target?.closest(`.${triggerOpenClassName}`);
+      const isOutside = !isInsidePopup && !isInsideCurrentTrigger;
       closeByOutsideClickRef.current = isOutside;
       if (isOutside) {
         closeMenu();
@@ -679,7 +695,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       document.removeEventListener('pointerdown', markOutsideClick, true);
       document.removeEventListener('mousedown', markOutsideClick, true);
     };
-  }, [closeMenu, menuVisible]);
+  }, [closeMenu, menuVisible, triggerOpenClassName]);
 
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
@@ -957,13 +973,15 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       {...props}
       open={menuVisible}
       destroyPopupOnHide
+      mouseLeaveDelay={props.mouseLeaveDelay ?? MENU_CLOSE_DELAY}
+      openClassName={mergedOpenClassName}
       overlayClassName={overlayClassName}
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items: items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: () => {},
         onOpenChange: handleMenuOpenChange,
@@ -974,7 +992,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         },
       }}
       onOpenChange={(visible, info) => {
-        if (!visible && activeSearchKey && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
           return;
         }
 

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -411,7 +411,7 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.getAllByText('No data').length).toBeGreaterThan(0));
   });
 
-  it('closes searchable submenu after focus without input', async () => {
+  it('keeps searchable submenu open while interacting with its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
@@ -451,7 +451,11 @@ describe('transformItems - searchable flags', () => {
     await user.click(screen.getByRole('textbox'));
     fireEvent.mouseLeave(screen.getByText('Fields'));
 
-    await waitFor(() => expect(screen.queryByText('Field 1')).not.toBeInTheDocument());
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(screen.getByText('Field 1')).toBeInTheDocument();
   });
 
   it('closes active searchable submenu after outside click', async () => {
@@ -499,6 +503,85 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.queryByText('Fields')).not.toBeInTheDocument());
   });
 
+  it('keeps the dropdown open when clicking its already-hovered trigger', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="items"
+              items={[
+                {
+                  key: 'child',
+                  label: 'Child',
+                  createModelOptions: { use: 'Parent' },
+                },
+              ]}
+            >
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByText('Open');
+    await user.hover(trigger);
+    await waitFor(() => expect(screen.getByText('Child')).toBeInTheDocument());
+    expect(trigger).toHaveClass('ant-dropdown-open');
+
+    await user.click(trigger);
+
+    expect(screen.getByText('Child')).toBeInTheDocument();
+  });
+
+  it('closes the dropdown when clicking another dropdown trigger', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="firstItems"
+              items={[{ key: 'first-child', label: 'First child', createModelOptions: { use: 'Parent' } }]}
+            >
+              Open first
+            </AddSubModelButton>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="secondItems"
+              items={[{ key: 'second-child', label: 'Second child', createModelOptions: { use: 'Parent' } }]}
+            >
+              Open second
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.hover(screen.getByText('Open first'));
+    await waitFor(() => expect(screen.getByText('First child')).toBeInTheDocument());
+
+    fireEvent.pointerDown(screen.getByText('Open second'));
+
+    await waitFor(() => expect(screen.queryByText('First child')).not.toBeInTheDocument());
+  });
+
   it('switches away from active searchable submenu and resets its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();

package/src/components/variables/VariableHybridInput.tsx

@@ -9,12 +9,17 @@
 
 import { css, cx } from '@emotion/css';
 import { Space, theme } from 'antd';
-import React, { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FormItemInputContext } from 'antd/es/form/context';
+import React, { isValidElement, useContext, 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, parseValueToPath as defaultParseValueToPath } from './utils';
+import {
+  formatPathToValue as defaultFormatPathToValue,
+  loadMetaTreeChildren,
+  parseValueToPath as defaultParseValueToPath,
+} from './utils';
 
 type RangeIndexes = [number, number, number, number];
 
@@ -31,12 +36,21 @@ 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 {
@@ -83,14 +97,38 @@ function normalizeVariableKey(value: string): string {
     .trim();
 }
 
-function renderHTML(value: string, labelMap: Map<string, string>, regExp: RegExp) {
+function renderHTML(value: string, regExp: RegExp, resolveLabel: (matched: string) => string | undefined) {
   const re = new RegExp(regExp.source, regExp.flags.includes('g') ? regExp.flags : `${regExp.flags}g`);
   return escapeHtml(value || '').replace(re, (matched) => {
-    const label = labelMap.get(normalizeVariableKey(matched)) || matched;
+    const label = resolveLabel(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,
@@ -116,6 +154,42 @@ 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;
@@ -222,10 +296,14 @@ function getCurrentRange(element: HTMLElement): RangeIndexes {
 }
 
 const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props) => {
-  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, readOnly, 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);
@@ -233,13 +311,63 @@ 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),
-    [resolvedMetaTree, ctx, 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],
   );
 
-  const [html, setHtml] = useState(() => renderHTML(value, labelMap, variableRegExp));
+  const [html, setHtml] = useState(() => renderHTML(value, variableRegExp, resolveLabel));
 
   const emitChange = useCallback(
     (target: HTMLElement) => {
@@ -249,12 +377,12 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
   );
 
   useEffect(() => {
-    setHtml(renderHTML(value, labelMap, variableRegExp));
+    setHtml(renderHTML(value, variableRegExp, resolveLabel));
     if (!changed) {
       setRange([-1, 0, -1, 0]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, labelMap]);
+  }, [value, resolveLabel]);
 
   // Restore caret position after html update
   useEffect(() => {
@@ -331,12 +459,13 @@ 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],
+    [emitChange, isComposing, readOnly],
   );
 
   const handleBlur = useCallback(({ currentTarget }: React.FocusEvent<HTMLDivElement>) => {
@@ -352,6 +481,7 @@ 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;
@@ -360,18 +490,19 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
       setRange(getCurrentRange(event.currentTarget));
       emitChange(event.currentTarget);
     },
-    [emitChange],
+    [emitChange, readOnly],
   );
 
   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],
+    [emitChange, readOnly],
   );
 
   const wrapperClassName = useMemo(
@@ -492,6 +623,42 @@ 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]);
 
@@ -505,8 +672,12 @@ 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}
+          contentEditable={!disabled && !readOnly}
+          aria-readonly={readOnly}
           data-placeholder={placeholder}
           onInput={handleInput}
           onBlur={handleBlur}
@@ -519,7 +690,7 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
         <FlowContextSelector
           metaTree={metaTree}
           disabled={disabled}
-          parseValueToPath={converters?.parseValueToPath ?? defaultParseValueToPath}
+          parseValueToPath={parseValueToPath}
           formatPathToValue={(item) => converters?.formatPathToValue?.(item) || defaultFormatPathToValue(item)}
           onChange={handleSelectorChange}
         />