@nocobase/client-v2 2.1.0-beta.32 → 2.1.0-beta.34

package/src/flow/actions/pattern.tsx

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { uid } from '@formily/shared';
 import { defineAction, tExpr } from '@nocobase/flow-engine';
 import { DetailsItemModel } from '../models/blocks/details/DetailsItemModel';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../internal/utils/rebuildFieldSubModel';
@@ -19,6 +20,14 @@ type PatternAwareFieldModel = {
   scheduleApplyJsSettings?: () => void;
 };
 
+function resolveAssociationTitleField(ctx: any) {
+  return (
+    ctx.model.subModels?.field?.props?.fieldNames?.label ||
+    ctx.model.props.titleField ||
+    ctx.collectionField?.targetCollectionTitleFieldName
+  );
+}
+
 function shouldPreserveFieldModelOnPatternChange(ctx: any) {
   const fieldModel = ctx.model.subModels.field;
   const fieldUse = getFieldBindingUse(fieldModel) ?? fieldModel?.use;
@@ -27,6 +36,22 @@ function shouldPreserveFieldModelOnPatternChange(ctx: any) {
   return ((ModelClass?.meta as PatternAwareFieldModelMeta | undefined)?.preserveOnPatternChange ?? false) === true;
 }
 
+async function refreshPatternRuntime(ctx: any) {
+  ctx.model.invalidateFlowCache?.('beforeRender', true);
+  await ctx.model.rerender?.();
+
+  const parent = ctx.model.parent;
+  if (!parent) {
+    return;
+  }
+
+  parent.invalidateFlowCache?.('beforeRender', true);
+  parent.setProps?.({
+    __patternRefreshKey: uid(),
+  });
+  await parent.rerender?.();
+}
+
 export const pattern = defineAction({
   name: 'pattern',
   title: tExpr('Display mode'),
@@ -76,17 +101,25 @@ export const pattern = defineAction({
       if (params.pattern !== previousParams.pattern) {
         (ctx.model.subModels.field as PatternAwareFieldModel | undefined)?.scheduleApplyJsSettings?.();
       }
+      await refreshPatternRuntime(ctx);
       return;
     }
 
     const targetCollection = ctx.collectionField.targetCollection;
-    const targetCollectionTitleField = targetCollection?.getField(
-      ctx.model.subModels.field.props?.fieldNames?.label || ctx.model.props.titleField,
-    );
+    const associationTitleField = resolveAssociationTitleField(ctx);
+    const targetCollectionTitleField = targetCollection?.getField(associationTitleField);
     const { model } = ctx;
     const resolveDefaultProps = (binding, field = ctx.collectionField) => {
       if (!binding) return undefined;
-      return typeof binding.defaultProps === 'function' ? binding.defaultProps(ctx, field) : binding.defaultProps;
+      const defaultProps =
+        typeof binding.defaultProps === 'function' ? binding.defaultProps(ctx, field) : binding.defaultProps;
+      if (!ctx.collectionField?.isAssociationField?.() || !associationTitleField) {
+        return defaultProps;
+      }
+      return {
+        ...(defaultProps || {}),
+        titleField: associationTitleField,
+      };
     };
     if (params.pattern === 'readPretty') {
       const binding = DetailsItemModel.getDefaultBindingByField(ctx, ctx.collectionField, {
@@ -111,17 +144,19 @@ export const pattern = defineAction({
         });
       }
     }
+    await refreshPatternRuntime(ctx);
   },
   async beforeParamsSave(ctx, params, previousParams) {
     if (params.pattern === 'readPretty') {
+      const titleField = resolveAssociationTitleField(ctx);
       ctx.model.setProps({
         pattern: 'readPretty',
         disabled: false,
-        titleField: (ctx.model.subModels?.field as any)?.props.fieldNames?.label || ctx.model.props.titleField,
+        titleField,
       });
       if (ctx.collectionField.isAssociationField())
         await ctx.model.setStepParams('editItemSettings', 'titleField', {
-          titleField: (ctx.model.subModels.field as any).props?.fieldNames?.label || ctx.model.props.titleField,
+          titleField,
         });
     } else {
       ctx.model.setProps({

package/src/flow/actions/titleField.tsx

@@ -43,7 +43,9 @@ export const titleField = defineAction({
     const options = targetFields
       .filter((field) =>
         isTitleFieldInterface(
-          getFlowFieldInterfaceOptions(field.options?.interface || field.interface, dataSourceManager),
+          typeof field.getInterfaceOptions === 'function'
+            ? field.getInterfaceOptions()
+            : getFlowFieldInterfaceOptions(field.options?.interface || field.interface, dataSourceManager),
         ),
       )
       .map((field) => ({
@@ -59,7 +61,7 @@ export const titleField = defineAction({
     };
   },
   defaultParams: (ctx: any) => {
-    const titleField = ctx.model.context.collectionField.targetCollectionTitleFieldName;
+    const titleField = ctx.model?.context?.collectionField?.targetCollectionTitleFieldName;
     return {
       label: ctx.model.parent?.props?.titleField || ctx.model.props.titleField || titleField,
     };

package/src/flow/actions/validation.tsx

@@ -18,7 +18,7 @@ export const validation = defineAction({
       return;
     }
     const targetInterface = ctx.model.collectionField.getInterfaceOptions();
-    if (!targetInterface.validationType) {
+    if (!targetInterface?.validationType) {
       return null;
     }
     return {

package/src/flow/admin-shell/admin-layout/AdminLayoutMenuModels.tsx

@@ -628,10 +628,6 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
           )
           .filter(Boolean) || [];
 
-      if (isV2AdminRuntime(this.context.app) && children.length === 0) {
-        return null;
-      }
-
       if (options.designable && depth === 0) {
         children.push(getAdminLayoutMenuInitializerButton('schema-initializer-Menu-side', this, route));
       }
@@ -685,6 +681,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
 AdminLayoutMenuItemModel.registerFlow({
   key: 'menuCreation',
   title: 'Add menu item',
+  manual: true,
   steps: {
     basic: {
       title: 'Add menu item',
@@ -701,6 +698,7 @@ AdminLayoutMenuItemModel.registerFlow({
 AdminLayoutMenuItemModel.registerFlow({
   key: 'menuSettings',
   title: 'Menu settings',
+  manual: true,
   steps: {
     edit: {
       title: 'Edit',

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -311,7 +311,7 @@ describe('AdminLayoutModel menu items', () => {
     expect(route.children[1]._model).toBe(adminLayoutModel.subModels.menuItems?.[1]);
   });
 
-  it('should filter legacy page menu routes in v2 admin layout', () => {
+  it('should filter legacy page menu routes but keep empty groups in v2 admin layout', () => {
     const adminLayoutModel = engine.createModel<AdminLayoutModel>({
       uid: 'admin-layout-model',
       use: AdminLayoutModel,
@@ -369,22 +369,30 @@ describe('AdminLayoutModel menu items', () => {
       t: (title) => title,
     });
 
-    expect(route.children).toHaveLength(2);
+    expect(route.children).toHaveLength(3);
     expect(route.children[0]).toMatchObject({
+      path: '/admin/2',
+      redirect: '/admin/2',
+      _runtimePath: null,
+      _navigationMode: 'spa',
+      _isLegacy: false,
+    });
+    expect(route.children[0].routes).toBeUndefined();
+    expect(route.children[1]).toMatchObject({
       path: '/admin/3',
       redirect: '/admin/nested-flow-page',
       _runtimePath: '/apps/demo/v2/admin/nested-flow-page',
       _navigationMode: 'spa',
       _isLegacy: false,
     });
-    expect(route.children[0].routes).toHaveLength(1);
-    expect(route.children[0].routes?.[0]).toMatchObject({
+    expect(route.children[1].routes).toHaveLength(1);
+    expect(route.children[1].routes?.[0]).toMatchObject({
       path: '/admin/nested-flow-page',
       _runtimePath: '/apps/demo/v2/admin/nested-flow-page',
       _navigationMode: 'spa',
       _isLegacy: false,
     });
-    expect(route.children[1]).toMatchObject({
+    expect(route.children[2]).toMatchObject({
       path: '/admin/__admin_layout__/link/4',
     });
   });

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.test.ts

@@ -249,4 +249,115 @@ describe('resolveAdminRouteRuntimeTarget', () => {
     expect(toRouterNavigationPath('/nocobase/v2/admin/page-1', '/nocobase/v2')).toBe('/admin/page-1');
     expect(toRouterNavigationPath('/admin/page-1', '/nocobase/v2')).toBe('/admin/page-1');
   });
+
+  describe('v2 sub-app context (router basename contains /apps/<id>/)', () => {
+    const subApp = {
+      getPublicPath: () => '/nocobase/v2/',
+      router: {
+        getBasename: () => '/nocobase/v2/apps/test-app/',
+      },
+    } as any;
+
+    it('should resolve flowPage runtime path under sub-app basename', () => {
+      expect(
+        resolveAdminRouteRuntimeTarget({
+          app: subApp,
+          route: {
+            type: NocoBaseDesktopRouteType.flowPage,
+            schemaUid: 'fp1',
+          },
+        }),
+      ).toEqual({
+        runtimePath: '/nocobase/v2/apps/test-app/admin/fp1',
+        navigationMode: 'spa',
+        isLegacy: false,
+        reason: 'ok',
+      });
+    });
+
+    it('should resolve group DFS to first flowPage under sub-app basename', () => {
+      const route: NocoBaseDesktopRoute = {
+        type: NocoBaseDesktopRouteType.group,
+        children: [
+          {
+            type: NocoBaseDesktopRouteType.tabs,
+            schemaUid: 'tabs-1',
+          },
+          {
+            type: NocoBaseDesktopRouteType.group,
+            children: [
+              {
+                type: NocoBaseDesktopRouteType.page,
+                schemaUid: 'legacy-2',
+              },
+              {
+                type: NocoBaseDesktopRouteType.flowPage,
+                schemaUid: 'nested-fp',
+              },
+            ],
+          },
+        ],
+      };
+
+      expect(resolveAdminRouteRuntimeTarget({ app: subApp, route })).toEqual({
+        runtimePath: '/nocobase/v2/apps/test-app/admin/nested-fp',
+        navigationMode: 'spa',
+        isLegacy: false,
+        reason: 'ok',
+      });
+    });
+
+    it('should strip sub-app basename when converting to router internal path', () => {
+      expect(toRouterNavigationPath('/nocobase/v2/apps/test-app/admin/page-1', '/nocobase/v2/apps/test-app')).toBe(
+        '/admin/page-1',
+      );
+      expect(toRouterNavigationPath('/nocobase/v2/apps/test-app/admin/page-1', '/nocobase/v2/apps/test-app/')).toBe(
+        '/admin/page-1',
+      );
+    });
+  });
+
+  describe('fallback when router basename is missing', () => {
+    it('should fall back to publicPath when router is undefined', () => {
+      const appNoRouter = {
+        getPublicPath: () => '/nocobase/v2/',
+        router: undefined,
+      } as any;
+
+      expect(
+        resolveAdminRouteRuntimeTarget({
+          app: appNoRouter,
+          route: {
+            type: NocoBaseDesktopRouteType.flowPage,
+            schemaUid: 'fp1',
+          },
+        }),
+      ).toMatchObject({
+        runtimePath: '/nocobase/v2/admin/fp1',
+        reason: 'ok',
+      });
+    });
+
+    it('should fall back to publicPath when getBasename returns undefined', () => {
+      const appNoBasename = {
+        getPublicPath: () => '/nocobase/v2/',
+        router: {
+          getBasename: () => undefined,
+        },
+      } as any;
+
+      expect(
+        resolveAdminRouteRuntimeTarget({
+          app: appNoBasename,
+          route: {
+            type: NocoBaseDesktopRouteType.flowPage,
+            schemaUid: 'fp1',
+          },
+        }),
+      ).toMatchObject({
+        runtimePath: '/nocobase/v2/admin/fp1',
+        reason: 'ok',
+      });
+    });
+  });
 });

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.ts

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { getV2EffectiveBasePath } from '../../../authRedirect';
 import type { BaseApplication } from '../../../BaseApplication';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 
@@ -106,7 +107,7 @@ function joinRootRelativePath(basePath: string, pathname: string) {
 }
 
 function getV2AdminPath(app: ResolveAdminRouteRuntimeTargetOptions['app'], schemaUid: string) {
-  return joinRootRelativePath(app.getPublicPath(), `/admin/${schemaUid}`);
+  return joinRootRelativePath(getV2EffectiveBasePath(app), `/admin/${schemaUid}`);
 }
 
 function appendLocationState(pathname: string, location?: LocationLike) {

package/src/flow/components/DynamicFlowsIcon.tsx

@@ -28,6 +28,9 @@ import {
   GLOBAL_EMBED_CONTAINER_ID,
   EMBED_REPLACING_DATA_KEY,
   shouldHideEventInSettings,
+  DetachedFlowRegistry,
+  replaceFlowRegistry,
+  serializeFlowRegistry,
 } from '@nocobase/flow-engine';
 import { Collapse, Input, Button, Space, Tooltip, Empty, Dropdown, Select } from 'antd';
 import { uid } from '@formily/shared';
@@ -35,6 +38,9 @@ import { useUpdate } from 'ahooks';
 import _ from 'lodash';
 
 type FlowOnObject = Exclude<FlowDefinition['on'], string | undefined>;
+type FlowRegistryAvailability = {
+  hasFlow(flowKey: string): boolean;
+};
 
 function isFlowOnObject(on: FlowDefinition['on']): on is FlowOnObject {
   return !!on && typeof on === 'object';
@@ -93,7 +99,7 @@ function validateFlowOnPhase(onObj: FlowOnObject): 'flowKey' | 'stepKey' | undef
 
 export const DynamicFlowsIcon: React.FC<{ model: FlowModel }> = (props) => {
   const { model } = props;
-  const t = model.translate.bind(model);
+  const t = React.useMemo(() => model.translate.bind(model), [model]);
 
   const handleClick = () => {
     const target = document.querySelector<HTMLDivElement>(`#${GLOBAL_EMBED_CONTAINER_ID}`);
@@ -190,7 +196,17 @@ const FieldLabel = ({
 
 // 事件配置组件 - 独立的 observer 组件确保响应式更新
 const EventConfigSection = observer(
-  ({ flow, model, flowEngine }: { flow: FlowDefinition; model: FlowModel; flowEngine: any }) => {
+  ({
+    flow,
+    model,
+    flowEngine,
+    flowRegistry,
+  }: {
+    flow: FlowDefinition;
+    model: FlowModel;
+    flowEngine: any;
+    flowRegistry: FlowRegistryAvailability;
+  }) => {
     const ctx = useFlowContext<FlowEngineContext>();
     const t = model.translate.bind(model);
     const refresh = useUpdate();
@@ -270,9 +286,9 @@ const EventConfigSection = observer(
       return staticFlows.map((f) => ({
         value: f.key,
         label: formatKeyWithTitle(String(f.key), f.title),
-        disabled: model.flowRegistry.hasFlow(f.key),
+        disabled: flowRegistry.hasFlow(f.key),
       }));
-    }, [formatKeyWithTitle, model.flowRegistry, staticFlows]);
+    }, [flowRegistry, formatKeyWithTitle, staticFlows]);
 
     const stepOptions = React.useMemo(() => {
       if (!flowKeyValue) return [];
@@ -446,12 +462,58 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
   const { model } = props;
   const ctx = useFlowContext<FlowEngineContext>();
   const flowEngine = model.flowEngine;
+  const latestFlows = serializeFlowRegistry(model.flowRegistry);
+  const initialFlowsRef = React.useRef(latestFlows);
+  const [draftFlowRegistry] = React.useState(() => new DetachedFlowRegistry(latestFlows));
   const [submitLoading, setSubmitLoading] = React.useState(false);
-  const t = model.translate.bind(model);
+  const t = React.useMemo(() => model.translate.bind(model), [model]);
+  const hasUnsavedChanges = React.useCallback(() => {
+    return !_.isEqual(initialFlowsRef.current, serializeFlowRegistry(draftFlowRegistry));
+  }, [draftFlowRegistry]);
+
+  React.useEffect(() => {
+    if (_.isEqual(initialFlowsRef.current, latestFlows) || hasUnsavedChanges()) {
+      return;
+    }
+
+    replaceFlowRegistry(draftFlowRegistry, latestFlows);
+    initialFlowsRef.current = latestFlows;
+  }, [draftFlowRegistry, hasUnsavedChanges, latestFlows]);
+
+  React.useEffect(() => {
+    const view = ctx.view;
+    const previousBeforeClose = view.beforeClose;
+    const beforeClose = async (payload) => {
+      if (hasUnsavedChanges()) {
+        const confirmed =
+          (await ctx.modal?.confirm?.({
+            title: t('Unsaved changes'),
+            content: t("Are you sure you don't want to save?"),
+            okText: t('Confirm'),
+            cancelText: t('Cancel'),
+          })) ?? true;
+
+        if (!confirmed) {
+          return false;
+        }
+      }
+
+      const result = await previousBeforeClose?.(payload);
+      return result !== false;
+    };
+
+    view.beforeClose = beforeClose;
+
+    return () => {
+      if (view.beforeClose === beforeClose) {
+        view.beforeClose = previousBeforeClose;
+      }
+    };
+  }, [ctx, hasUnsavedChanges, t]);
 
   // 添加新流
   const handleAddFlow = () => {
-    model.flowRegistry.addFlow(uid(), {
+    draftFlowRegistry.addFlow(uid(), {
       title: t('Event flow'),
       steps: {},
     });
@@ -516,7 +578,7 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
   );
 
   // 生成折叠面板项
-  const collapseItems = model.flowRegistry.mapFlows((flow) => {
+  const collapseItems = draftFlowRegistry.mapFlows((flow) => {
     return {
       key: flow.key,
       label: renderPanelHeader(flow),
@@ -529,7 +591,7 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
       children: (
         <div>
           {/* 事件部分 */}
-          <EventConfigSection flow={flow} model={model} flowEngine={flowEngine} />
+          <EventConfigSection flow={flow} model={model} flowEngine={flowEngine} flowRegistry={draftFlowRegistry} />
 
           {/* 步骤部分 */}
           <div>
@@ -670,13 +732,13 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
           flexShrink: 0,
         }}
       >
-        <Button onClick={() => ctx.view.destroy()}>{t('Cancel')}</Button>
+        <Button onClick={() => ctx.view.close()}>{t('Cancel')}</Button>
         <Button
           type="primary"
           loading={submitLoading}
           onClick={async () => {
             setSubmitLoading(true);
-            const invalid = model.flowRegistry
+            const invalid = draftFlowRegistry
               .mapFlows((flow) => {
                 if (!isFlowOnObject(flow.on)) return;
                 normalizeFlowOnPhase(flow.on);
@@ -695,10 +757,11 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
               setSubmitLoading(false);
               return;
             }
-            try {
-              const afterSaves: Array<() => Promise<void>> = [];
+            const previousFlows = serializeFlowRegistry(model.flowRegistry);
+            const afterSaves: Array<() => Promise<void>> = [];
 
-              for (const flow of model.flowRegistry.mapFlows((it) => it)) {
+            try {
+              for (const flow of draftFlowRegistry.mapFlows((it) => it)) {
                 for (const step of flow.mapSteps((it) => it)) {
                   const serialized = step.serialize();
                   const actionDef = step.use ? model.getAction(step.use) : undefined;
@@ -731,8 +794,19 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
                 }
               }
 
+              replaceFlowRegistry(model.flowRegistry, serializeFlowRegistry(draftFlowRegistry));
               await model.flowRegistry.save();
+            } catch (error) {
+              replaceFlowRegistry(model.flowRegistry, previousFlows);
+              setSubmitLoading(false);
+              model.context?.message?.error?.('Steps post-save hooks failed to run');
+              console.error(error);
+              return;
+            }
 
+            initialFlowsRef.current = serializeFlowRegistry(model.flowRegistry);
+
+            try {
               for (const runAfterSave of afterSaves) {
                 await runAfterSave();
               }

package/src/flow/components/TextAreaWithContextSelector.tsx

@@ -20,7 +20,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Input } from 'antd';
 import { css } from '@emotion/css';
 import type { TextAreaRef } from 'antd/es/input/TextArea';
-import { FlowContextSelector, useFlowContext } from '@nocobase/flow-engine';
+import { FlowContextSelector, useFlowContext, type MetaTreeNode } from '@nocobase/flow-engine';
 
 export interface TextAreaWithContextSelectorProps {
   value?: string;
@@ -29,6 +29,20 @@ export interface TextAreaWithContextSelectorProps {
   rows?: number;
   maxRows?: number;
   style?: React.CSSProperties;
+  disabled?: boolean;
+  /**
+   * Custom meta tree for the variable picker. Accepts an array, a sync getter,
+   * or an async getter — same shape as `FlowContextSelector`'s `metaTree`. If
+   * omitted, the full `ctx.getPropertyMetaTree()` is used (legacy default).
+   */
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  /**
+   * Format a picked meta node into the string inserted at the caret. When
+   * omitted, the FlowContextSelector default (`{{ ctx.X.Y }}`) is used.
+   * Override to match a different storage convention — e.g. NocoBase server
+   * templates use `{{$X.Y}}` without the `ctx.` prefix.
+   */
+  formatPathToValue?: (meta: MetaTreeNode) => string;
 }
 
 /**
@@ -41,6 +55,9 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
   rows = 3,
   maxRows = 24,
   style,
+  disabled,
+  metaTree,
+  formatPathToValue,
 }) => {
   const flowCtx = useFlowContext();
   const [innerValue, setInnerValue] = useState<string>(value || '');
@@ -76,10 +93,11 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
       const next = prev.slice(0, start) + toInsert + prev.slice(end);
       setInnerValue(next);
       onChange?.(next);
-      // 恢复光标位置并聚焦
+      // 插入后选中刚插入的变量文本，与 v1 RawTextArea 行为一致：
+      // 用户可立即按删除键移除整段变量，或继续输入直接替换。
       requestAnimationFrame(() => {
         const pos = start + (toInsert?.length || 0);
-        el.setSelectionRange(pos, pos);
+        el.setSelectionRange(start, pos);
         el.focus();
       });
     },
@@ -94,8 +112,8 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
     [insertAtCaret],
   );
 
-  // 使用函数形式提供变量树，保证与运行时上下文一致
-  const metaTree = useMemo(() => () => flowCtx.getPropertyMetaTree?.(), [flowCtx]);
+  // 使用函数形式提供变量树，保证与运行时上下文一致；当外部传入则尊重外部值。
+  const resolvedMetaTree = useMemo(() => metaTree ?? (() => flowCtx.getPropertyMetaTree?.()), [flowCtx, metaTree]);
 
   return (
     <div style={{ position: 'relative', width: '100%', ...style }}>
@@ -105,6 +123,7 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
         onChange={handleTextChange}
         autoSize={{ minRows: rows, maxRows }}
         placeholder={placeholder}
+        disabled={disabled}
         style={{ width: '100%' }}
       />
       <div
@@ -116,7 +135,12 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
           lineHeight: 0,
         }}
       >
-        <FlowContextSelector metaTree={metaTree} onChange={(val) => handleVariableSelected(val)}>
+        <FlowContextSelector
+          metaTree={resolvedMetaTree}
+          disabled={disabled}
+          formatPathToValue={formatPathToValue}
+          onChange={(val) => handleVariableSelected(val)}
+        >
           <Button
             type="default"
             style={{ fontStyle: 'italic', fontFamily: 'New York, Times New Roman, Times, serif' }}