@nocobase/flow-engine 2.2.0-beta.15 → 2.2.0-beta.17

package/src/__tests__/flowContext.test.ts

@@ -16,6 +16,7 @@ import { RunJSContextRegistry } from '../runjs-context/registry';
 import { setupRunJSContexts } from '../runjs-context/setup';
 import { createViewScopedEngine } from '../ViewScopedFlowEngine';
 import { DATA_SOURCE_DIRTY_EVENT } from '../views/viewEvents';
+import { serializeCtxDateExpressionConfig } from '../utils/dateVariable';
 
 describe('FlowContext properties and methods', () => {
   it('should return static property value', () => {
@@ -2068,10 +2069,16 @@ describe('getPropertyMetaTree with deep delegate meta', () => {
 describe('FlowContext resolveOnServer selective server resolution', () => {
   it('resolves ctx.date expressions on client context', async () => {
     const engine = new FlowEngine();
+    const formattedToday = serializeCtxDateExpressionConfig({
+      kind: 'preset',
+      preset: 'today',
+      format: 'YYYY/MM/DD',
+    });
     const out = await (engine.context as any).resolveJsonTemplate({
       today: '{{ ctx.date.preset.today }}',
       next12: '{{ ctx.date.relative.next.day.n12 }}',
       now: '{{ ctx.date.preset.now }}',
+      formattedToday,
     });
 
     expect(typeof out.today).toBe('string');
@@ -2080,6 +2087,7 @@ describe('FlowContext resolveOnServer selective server resolution', () => {
     expect(out.next12).toMatch(/^\d{4}-\d{2}-\d{2}$/);
     expect(typeof out.now).toBe('string');
     expect(out.now.length).toBeGreaterThan(0);
+    expect(out.formattedToday).toMatch(/^\d{4}\/\d{2}\/\d{2}$/);
   });
 
   it('does not call server by default (no resolveOnServer set)', async () => {

package/src/__tests__/objectVariable.test.ts

@@ -8,6 +8,7 @@
  */
 
 import { describe, expect, it, vi } from 'vitest';
+import { generateFlowModelRdFromToken } from '@nocobase/utils/client';
 import { FlowContext } from '../flowContext';
 import { FlowEngine } from '../flowEngine';
 import {
@@ -122,7 +123,10 @@ describe('objectVariable utilities', () => {
 
     // Provide API stub to intercept variables:resolve
     const calls: any[] = [];
+    const payload = Buffer.from(JSON.stringify({ userId: 1, signInTime: 'contract-owner-test' })).toString('base64url');
+    const token = `test.${payload}.sig`;
     (ctx as any).api = {
+      auth: { token },
       request: vi.fn(async ({ url, data, method }) => {
         calls.push({ url, data, method });
         const batch = (data?.values?.batch as any[]) || [];
@@ -146,13 +150,14 @@ describe('objectVariable utilities', () => {
     });
 
     const template = { x: '{{ ctx.obj.author.name }}' } as any;
-    await (ctx as any).resolveJsonTemplate(template);
+    await (ctx as any).resolveJsonTemplate(template, { contractModelUid: 'form-grid' });
 
     // Assert variables:resolve was called with proper flattened contextParams
     expect((ctx as any).api.request).toHaveBeenCalled();
     const call = calls.find((c) => c.url === 'variables:resolve');
     expect(call).toBeTruthy();
     const batch0 = call.data?.values?.batch?.[0];
+    expect(batch0?.contractRd).toBe(generateFlowModelRdFromToken('form-grid', token));
     expect(batch0?.contextParams).toBeTruthy();
     // Flattened key should be 'obj.author'
     const cp = batch0.contextParams as Record<string, any>;

package/src/acl/Acl.tsx

@@ -16,7 +16,7 @@ interface CheckOptions {
   actionName: string;
   fields?: string[];
   recordPkValue?: string | number;
-  allowedActions: any[];
+  allowedActions?: Record<string, Array<string | number>>;
 }
 
 export class ACL {
@@ -149,6 +149,41 @@ export class ACL {
     return allowed;
   }
 
+  can(options: CheckOptions): boolean {
+    const { allowAll } = this.data;
+    if (allowAll) {
+      return true;
+    }
+
+    const { actionName, allowedActions, recordPkValue } = options;
+    const hasRecordPkValue = recordPkValue !== undefined && recordPkValue !== null;
+    const recordPermission =
+      hasRecordPkValue && allowedActions ? this.verifyScope(actionName, recordPkValue, allowedActions) : null;
+    if (hasRecordPkValue && allowedActions && recordPermission !== true) {
+      return false;
+    }
+
+    const params = this.parseAction(options);
+    if (!params) {
+      return false;
+    }
+    if (!_.isEmpty(params.filter) && recordPermission !== true) {
+      return false;
+    }
+    if (!options.fields?.length) {
+      return true;
+    }
+
+    const allowedFields: string[] = []
+      .concat(params.whitelist || [])
+      .concat(params.fields || [])
+      .concat(params.appends || []);
+    if (!allowedFields.length) {
+      return true;
+    }
+    return options.fields.every((field) => allowedFields.includes(field));
+  }
+
   async aclCheck(options: CheckOptions): Promise<boolean> {
     // await this.load();
     const { allowAll } = this.data;

package/src/acl/__tests__/Acl.test.tsx

@@ -71,6 +71,76 @@ describe('ACL', () => {
     expect(notOk).toBe(false);
   });
 
+  it('checks record update scope before field permission', () => {
+    const payload = {
+      data: {
+        allowAll: false,
+        actionAlias: {},
+        resources: ['posts'],
+        actions: { 'posts:update': { whitelist: ['title'] } },
+        strategy: { actions: [] },
+      },
+    };
+    const engine = makeEngine(payload);
+    const acl = new ACL(engine);
+    acl.setData(payload.data);
+
+    const options = {
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      allowedActions: {
+        update: [1],
+      },
+    };
+
+    expect(acl.can({ ...options, recordPkValue: 1, fields: ['title'] })).toBe(true);
+    expect(acl.can({ ...options, recordPkValue: 2, fields: ['title'] })).toBe(false);
+    expect(acl.can({ ...options, recordPkValue: 1, fields: ['body'] })).toBe(false);
+    expect(acl.can({ ...options, recordPkValue: 0, fields: ['title'] })).toBe(false);
+    expect(
+      acl.can({
+        dataSourceKey: 'main',
+        resourceName: 'posts',
+        actionName: 'update',
+        fields: ['title'],
+      }),
+    ).toBe(true);
+  });
+
+  it('allows every field when a scoped action has no field restriction', () => {
+    const payload = {
+      data: {
+        allowAll: false,
+        actionAlias: {},
+        resources: ['posts'],
+        actions: {
+          'posts:update': {
+            filter: { createdById: '{{ ctx.state.currentUser.id }}' },
+          },
+        },
+        strategy: { actions: [] },
+      },
+    };
+    const engine = makeEngine(payload);
+    const acl = new ACL(engine);
+    acl.setData(payload.data);
+
+    const options = {
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      allowedActions: {
+        update: [1],
+      },
+      fields: ['title'],
+    };
+
+    expect(acl.can({ ...options, recordPkValue: 1 })).toBe(true);
+    expect(acl.can({ ...options, recordPkValue: 2 })).toBe(false);
+    expect(acl.can({ ...options, allowedActions: undefined, recordPkValue: undefined })).toBe(false);
+  });
+
   it('reloads permissions when auth token changes', async () => {
     const payload1 = {
       data: {

package/src/components/FlowContextSelector.tsx

@@ -311,6 +311,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
       const path = selectedValues.map(String);
       const pathString = path.join('.');
       const isLeaf = lastOption?.isLeaf;
+      const isSelectable = lastOption?.meta?.selectable !== false;
       const now = Date.now();
 
       // 使用自定义格式化函数或默认函数
@@ -325,6 +326,10 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
       }
 
       if (isLeaf) {
+        if (!isSelectable) {
+          setTempSelectedPath(path);
+          return;
+        }
         onChange?.(formattedValue, lastOption?.meta);
         // 选中叶子节点后，可清空内部临时路径（外部 value 将驱动级联）
         setTempSelectedPath([]);
@@ -333,7 +338,8 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
       // 非叶子节点：检查双击
       const lastSelected = lastSelectedRef.current;
-      const isDoubleClick = !onlyLeafSelectable && lastSelected?.path === pathString && now - lastSelected.time < 300;
+      const isDoubleClick =
+        isSelectable && !onlyLeafSelectable && lastSelected?.path === pathString && now - lastSelected.time < 300;
 
       if (isDoubleClick) {
         // 双击：选中非叶子节点

package/src/components/MobilePopup.tsx

@@ -26,26 +26,38 @@ interface MobilePopupProps {
   footer?: ReactNode;
 }
 
+const getMobilePopupMaxHeight = () => {
+  if (typeof CSS !== 'undefined' && CSS.supports?.('height', '100dvh')) {
+    return 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+  }
+
+  return 'calc(100vh - var(--nb-mobile-page-header-height, 46px))';
+};
+
 export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
   const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
   const popupStyle = useMemo(() => {
     return {
       minHeight: bodyStyles?.minHeight ?? minHeight,
       height: bodyStyles?.height,
-      maxHeight: bodyStyles?.maxHeight,
+      maxHeight: bodyStyles?.maxHeight ?? defaultMaxHeight,
     };
-  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, defaultMaxHeight, minHeight]);
 
-  const bodyStyle = useMemo(() => {
+  const bodyStyle = useMemo<React.CSSProperties>(() => {
     return {
       padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
       ...bodyStyles,
     };
-  }, [bodyStyles]);
+  }, [bodyStyles, defaultMaxHeight]);
 
   const handleCloseKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLSpanElement>) => {

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

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { MobilePopup } from '../MobilePopup';
 
 vi.mock('react-i18next', () => ({
@@ -61,6 +61,47 @@ describe('MobilePopup', () => {
     React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
   >;
 
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('constrains the default popup to the dynamic viewport and keeps the body scrollable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn((property: string, value: string) => property === 'height' && value === '100dvh'),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    const maxHeight = 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({ maxHeight });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+    });
+  });
+
+  it('falls back to the layout viewport when dynamic viewport units are unavailable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn(() => false),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+    });
+  });
+
   it('applies drawer body styles as max bounds without forcing fixed half-window height', () => {
     render(
       <MobilePopupWithDrawerStyles visible title="Title" styles={{ body: { maxHeight: '50vh' } }} onClose={vi.fn()}>

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/__tests__/FlowContextSelector.test.tsx

@@ -864,4 +864,39 @@ describe('FlowContextSelector', () => {
     // It should only expand the node, not select it
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it('should expand but never select a node marked selectable=false', async () => {
+    const onChange = vi.fn();
+    const flowContext = createTestFlowContext();
+    const metaTree = [
+      {
+        name: 'date',
+        title: 'Date',
+        type: 'date',
+        paths: ['date'],
+        selectable: false,
+        children: [{ name: 'today', title: 'Today', type: 'date', paths: ['date', 'today'] }],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={metaTree} onChange={onChange} />
+      </TestFlowContextWrapper>,
+    );
+
+    fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(screen.getByText('Date')).toBeInTheDocument());
+
+    fireEvent.click(screen.getByText('Date'));
+    fireEvent.click(screen.getByText('Date'));
+    expect(onChange).not.toHaveBeenCalled();
+
+    await waitFor(() => expect(screen.getByText('Today')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Today'));
+    expect(onChange).toHaveBeenCalledWith(
+      '{{ ctx.date.today }}',
+      expect.objectContaining({ paths: ['date', 'today'] }),
+    );
+  });
 });