@nocobase/flow-engine 2.2.0-alpha.6 → 2.2.0-alpha.8

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

@@ -7,8 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it } from 'vitest';
-import { formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { FormItem, formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
 
 describe('FormItem', () => {
   it('keeps vertical label-to-value spacing consistent with v1', () => {
@@ -22,4 +24,17 @@ 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/__tests__/MobilePopup.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../MobilePopup.style', () => ({
+  useMobileActionDrawerStyle: () => ({
+    componentCls: 'nb-mobile-action-drawer',
+    hashId: 'hash',
+  }),
+}));
+
+vi.mock('../../lazy-helper', () => ({
+  lazy: (_loader: unknown, name: string) => {
+    if (name === 'Popup') {
+      const Popup = ({
+        children,
+        bodyStyle,
+        maskStyle,
+        style,
+      }: {
+        children: React.ReactNode;
+        bodyStyle?: React.CSSProperties;
+        maskStyle?: React.CSSProperties;
+        style?: React.CSSProperties;
+      }) => (
+        <div data-testid="mobile-popup" style={style}>
+          <div data-testid="mobile-popup-mask" style={maskStyle} />
+          <div data-testid="mobile-popup-body" style={bodyStyle}>
+            {children}
+          </div>
+        </div>
+      );
+
+      return { Popup };
+    }
+
+    return {
+      CloseOutline: () => <span data-testid="close-outline" />,
+    };
+  },
+}));
+
+describe('MobilePopup', () => {
+  const MobilePopupWithDrawerStyles = MobilePopup as React.ComponentType<
+    React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
+  >;
+
+  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()}>
+        body
+      </MobilePopupWithDrawerStyles>,
+    );
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-mask')).not.toHaveStyle({
+      maxHeight: '50vh',
+    });
+  });
+
+  it('closes from the header close icon with Enter or Space', () => {
+    const onClose = vi.fn();
+    render(
+      <MobilePopup visible title="Title" onClose={onClose}>
+        body
+      </MobilePopup>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+    fireEvent.keyDown(closeButton, { key: 'Enter' });
+    fireEvent.keyDown(closeButton, { key: ' ' });
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps long header titles in a constrained title element separate from the close button', () => {
+    const longTitle = 'A very long table column title that should not push the close button outside the drawer';
+
+    render(
+      <MobilePopup visible title={longTitle} onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByText(longTitle)).toHaveClass('nb-mobile-action-drawer-title');
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('nb-mobile-action-drawer-close-icon');
+  });
+});

package/src/components/variables/VariableInput.tsx

@@ -125,16 +125,19 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     [onChange],
   );
 
+  const resolvedPath = useMemo(() => {
+    return resolvePathFromValue?.(innerValue);
+  }, [innerValue, resolvePathFromValue]);
+
   const resolvedMetaTreeNode = useMemo(() => {
     if (currentMetaTreeNode) return currentMetaTreeNode;
     if (Array.isArray(resolvedMetaTree)) {
-      const path = resolvePathFromValue?.(innerValue);
-      if (path) {
-        return findMetaTreeNodeByPath(resolvedMetaTree, path);
+      if (resolvedPath) {
+        return findMetaTreeNodeByPath(resolvedMetaTree, resolvedPath);
       }
     }
     return null;
-  }, [currentMetaTreeNode, innerValue, resolvedMetaTree, resolvePathFromValue]);
+  }, [currentMetaTreeNode, resolvedMetaTree, resolvedPath]);
 
   // 当 value 存在但 currentMetaTreeNode 还未恢复，尝试按路径逐级加载（支持 children 为函数的场景）
   useEffect(() => {
@@ -197,9 +200,31 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
   const ValueComponent = useMemo(() => {
     const Component = renderInputComponent?.(resolvedMetaTreeNode);
     const CustomComponent = resolvedMetaTreeNode?.render;
-    const finalComponent = isVariableValue(innerValue) ? VariableTag : Component || CustomComponent || Input;
+    // Some domains (workflow) persist variables as `{{$context...}}` rather than the core `{{ ctx... }}` form.
+    // Those values are not recognized by `isVariableValue`, but if the active converters can resolve them back to a
+    // real meta-tree path and that path maps to a plain variable node (not Constant / Null / RunJS), they should still
+    // render as the labelled pill instead of falling back to the raw input text.
+    const shouldRenderVariableTag =
+      isVariableValue(innerValue) ||
+      (Boolean(resolvedMetaTreeNode) &&
+        Array.isArray(resolvedPath) &&
+        resolvedPath.length > 0 &&
+        !Component &&
+        !CustomComponent);
+    const finalComponent = shouldRenderVariableTag ? VariableTag : Component || CustomComponent || Input;
     return finalComponent;
-  }, [renderInputComponent, resolvedMetaTreeNode, innerValue]);
+  }, [renderInputComponent, resolvedMetaTreeNode, innerValue, resolvedPath]);
+
+  const isVariableActive = useMemo(() => {
+    return (
+      isVariableValue(innerValue) ||
+      (Boolean(resolvedMetaTreeNode) &&
+        Array.isArray(resolvedPath) &&
+        resolvedPath.length > 0 &&
+        !renderInputComponent?.(resolvedMetaTreeNode) &&
+        !resolvedMetaTreeNode?.render)
+    );
+  }, [innerValue, renderInputComponent, resolvedMetaTreeNode, resolvedPath]);
 
   useEffect(() => {
     if (!resolvedMetaTreeNode) return;
@@ -303,6 +328,8 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       return {
         ...baseProps,
         onClear: handleClear,
+        disabled,
+        allowCustomTagInput: false,
         metaTreeNode: resolvedMetaTreeNode,
         metaTree,
         style: stableProps.style,
@@ -356,7 +383,8 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       <FlowContextSelector
         metaTree={resolvedMetaTree}
         value={innerValue}
-        active={isVariableValue(innerValue)}
+        active={isVariableActive}
+        disabled={disabled}
         onChange={handleVariableSelect}
         parseValueToPath={resolvePathFromValue}
         formatPathToValue={resolveValueFromPath}

package/src/components/variables/VariableTag.tsx

@@ -17,9 +17,13 @@ import { useRequest } from 'ahooks';
 import { useFlowContext } from '../../FlowContextProvider';
 import type { MetaTreeNode } from '../../flowContext';
 
+const VARIABLE_PARSING_FAILED_TEXT = 'Variable parsing failed';
+
 const VariableTagComponent: React.FC<VariableTagProps> = ({
   value,
   onClear,
+  disabled = false,
+  allowCustomTagInput = true,
   className,
   style,
   metaTreeNode,
@@ -28,30 +32,30 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
   const { resolvedMetaTree } = useResolvedMetaTree(metaTree);
   const ctx = useFlowContext();
 
-  const { data: displayedValue } = useRequest(
+  const { data: displayState } = useRequest(
     async () => {
-      const resolveLabelFromPath = async (rawPath?: (string | number)[]): Promise<string | null> => {
-        if (!rawPath) return null;
-        if (!Array.isArray(rawPath)) return null;
-        if (!Array.isArray(resolvedMetaTree)) return null;
+      const resolveLabelFromPath = async (
+        rawPath?: (string | number)[],
+      ): Promise<{ label: string | null; resolved: boolean; attempted: boolean }> => {
+        if (!rawPath) return { label: null, resolved: false, attempted: false };
+        if (!Array.isArray(rawPath)) return { label: null, resolved: false, attempted: false };
+        if (!Array.isArray(resolvedMetaTree)) return { label: null, resolved: false, attempted: false };
 
         // 兼容 metaTree 为子树：顶层不含首段时，裁剪首段
         const topNames = new Set((resolvedMetaTree || []).map((n: any) => String(n?.name)));
         const path = !topNames.has(String(rawPath[0])) ? rawPath.slice(1) : rawPath;
-        if (!path.length) return '';
+        if (!path.length) return { label: '', resolved: true, attempted: true };
 
         let nodes: MetaTreeNode[] | undefined = resolvedMetaTree as MetaTreeNode[];
         const titleChain: string[] = [];
-        let matchedCount = 0;
 
         for (let i = 0; i < path.length; i++) {
-          if (!nodes) break;
+          if (!nodes) return { label: null, resolved: false, attempted: true };
           const seg = String(path[i]);
           const node = nodes.find((n) => String(n?.name) === seg) as MetaTreeNode | undefined;
-          if (!node) break; // 停在第一个无效段之前
+          if (!node) return { label: null, resolved: false, attempted: true };
 
           titleChain.push(String(node.title ?? node.name ?? seg));
-          matchedCount = i + 1;
 
           if (i < path.length - 1) {
             if (Array.isArray(node.children)) {
@@ -70,34 +74,41 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
           }
         }
 
-        if (matchedCount === 0) return null;
-
-        let label = titleChain.map(ctx.t).join('/');
-        if (matchedCount < path.length) {
-          const tail = path.slice(matchedCount).join('/');
-          label = tail ? `${label}/${tail}` : label;
-        }
-        return label;
+        return { label: titleChain.map(ctx.t).join('/'), resolved: true, attempted: true };
       };
 
       // 1) 优先使用已解析到的节点（包含完整父标题链）
       if (metaTreeNode?.parentTitles) {
-        return [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/');
+        return {
+          text: [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/'),
+          invalid: false,
+        };
       }
 
       // 2) metaTreeNode 存在但缺少 parentTitles：尝试根据 value/metaTreeNode.paths 从 metaTree 还原完整路径
       if (metaTreeNode) {
         const rawPath = parseValueToPath(value) || metaTreeNode.paths;
-        const label = await resolveLabelFromPath(rawPath as any);
-        return label ?? ctx.t(metaTreeNode.title) ?? '';
+        const result = await resolveLabelFromPath(rawPath as any);
+        if (result.resolved && result.label != null) {
+          return { text: result.label, invalid: false };
+        }
+        if (result.attempted) {
+          return { text: VARIABLE_PARSING_FAILED_TEXT, invalid: true, rawValue: String(value ?? '') };
+        }
+        return { text: ctx.t(metaTreeNode.title) ?? '', invalid: false };
       }
 
       // 3) 无 metaTreeNode：从 value 还原路径并拼接标题链；若找不到任何前缀则回退原始路径字符串
-      if (!value) return String(value);
+      if (!value) return { text: String(value), invalid: false };
       const rawPath = parseValueToPath(value);
-      const label = await resolveLabelFromPath(rawPath as any);
-      if (label != null) return label;
-      return Array.isArray(rawPath) ? rawPath.join('/') : String(value);
+      const result = await resolveLabelFromPath(rawPath as any);
+      if (result.resolved && result.label != null) {
+        return { text: result.label, invalid: false };
+      }
+      if (result.attempted) {
+        return { text: VARIABLE_PARSING_FAILED_TEXT, invalid: true, rawValue: String(value ?? '') };
+      }
+      return { text: Array.isArray(rawPath) ? rawPath.join('/') : String(value), invalid: false };
     },
     { refreshDeps: [resolvedMetaTree, value, metaTreeNode] },
   );
@@ -119,13 +130,13 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
   `;
 
   const customTagRender = (props: any) => {
-    const { label } = props;
-    const fullText = typeof label === 'string' ? label : String(label);
+    const fullText = displayState?.text || (typeof props.label === 'string' ? props.label : String(props.label));
+    const tooltipText = displayState?.invalid ? displayState.rawValue || fullText : fullText;
 
     return (
-      <Tooltip title={fullText} placement="top" getPopupContainer={() => document.body}>
+      <Tooltip title={tooltipText} placement="top" getPopupContainer={() => document.body}>
         <Tag
-          color="blue"
+          color={displayState?.invalid ? 'error' : 'blue'}
           style={{
             margin: `0 ${token.marginXXS || token.marginXS}px`,
             borderRadius: token.borderRadiusSM,
@@ -166,12 +177,14 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
         flex: '1 1 auto',
         ...style,
       }}
-      value={displayedValue ? [displayedValue] : []}
-      mode="tags"
+      value={displayState?.text ? [displayState.text] : []}
+      mode={allowCustomTagInput ? 'tags' : 'multiple'}
       open={false}
-      allowClear={!!onClear}
-      onClear={onClear}
-      disabled={!onClear}
+      showSearch={allowCustomTagInput}
+      searchValue={allowCustomTagInput ? undefined : ''}
+      allowClear={!disabled && !!onClear}
+      onClear={disabled ? undefined : onClear}
+      disabled={disabled || !onClear}
       variant="outlined"
       suffixIcon={null}
       tagRender={customTagRender}

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

@@ -101,6 +101,81 @@ describe('VariableInput', () => {
     );
   });
 
+  it('renders a variable tag when custom converters resolve a non-ctx workflow variable format', async () => {
+    const flowContext = createTestFlowContext();
+    const workflowMetaTree = [
+      {
+        name: '$context',
+        title: 'Trigger variables',
+        type: 'object',
+        paths: ['$context'],
+        children: [
+          {
+            name: 'data',
+            title: 'Trigger data',
+            type: 'object',
+            paths: ['$context', 'data'],
+            children: [
+              {
+                name: 'updatedAt',
+                title: 'Last updated at',
+                type: 'string',
+                paths: ['$context', 'data', 'updatedAt'],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput
+          value="{{$context.data.updatedAt}}"
+          metaTree={workflowMetaTree}
+          converters={{
+            resolvePathFromValue: (currentValue) =>
+              currentValue === '{{$context.data.updatedAt}}' ? ['$context', 'data', 'updatedAt'] : undefined,
+            resolveValueFromPath: () => undefined,
+          }}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(
+      () => {
+        const variableTag = screen.getByText('Trigger variables/Trigger data/Last updated at');
+        expect(variableTag).toBeInTheDocument();
+        expect(variableTag.closest('.ant-tag')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectorButton = screen.getByRole('button');
+    expect(selectorButton.className).toContain('ant-btn-primary');
+  });
+
+  it('disables custom tag input when rendering a selected variable', async () => {
+    const flowContext = createTestFlowContext();
+    const { container } = render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput value="{{ ctx.user.name }}" metaTree={() => flowContext.getPropertyMetaTree()} />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('User/Name')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement).not.toHaveClass('ant-select-show-search');
+    expect(container.querySelector('.ant-select-selection-search-input')).toHaveAttribute('readonly');
+  });
+
   it('should render FlowContextSelector button', async () => {
     const flowContext = createTestFlowContext();
     render(
@@ -113,6 +188,18 @@ describe('VariableInput', () => {
     expect(selectorButton).toBeInTheDocument();
   });
 
+  it('disables the FlowContextSelector button when disabled', async () => {
+    const flowContext = createTestFlowContext();
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput value="test" metaTree={() => flowContext.getPropertyMetaTree()} disabled />
+      </TestFlowContextWrapper>,
+    );
+
+    const selectorButton = await screen.findByRole('button');
+    expect(selectorButton).toBeDisabled();
+  });
+
   it('should not highlight the selector button for synthetic constant/null paths', async () => {
     const flowContext = createTestFlowContext();
 
@@ -322,7 +409,24 @@ describe('VariableInput', () => {
     expect(input).toHaveClass('custom-class');
 
     // Note: The disabled prop might not be correctly passed through in the current implementation
-    // This is a known limitation of the current component design
+    expect(input).toBeDisabled();
+  });
+
+  it('disables the rendered variable tag when the input is disabled', async () => {
+    const flowContext = createTestFlowContext();
+    const { container } = render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput value="{{ ctx.user.name }}" metaTree={() => flowContext.getPropertyMetaTree()} disabled />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('User/Name')).toBeInTheDocument();
+    });
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toHaveClass('ant-select-disabled');
+    expect(container.querySelector('.ant-select-clear')).not.toBeInTheDocument();
   });
 
   it('should handle empty metaTree', async () => {

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

@@ -54,6 +54,44 @@ describe('VariableTag', () => {
     expect(onClear).toBeInstanceOf(Function);
   });
 
+  it('keeps custom tag input enabled by default', async () => {
+    const onClear = vi.fn();
+    const { container } = renderWithCtx(<VariableTag value="{{ ctx.User.Email }}" onClear={onClear} />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('User/Email')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement).toHaveClass('ant-select-show-search');
+    expect(container.querySelector('.ant-select-selection-search-input')).not.toHaveAttribute('readonly');
+  });
+
+  it('can disable custom tag input while keeping clear enabled', async () => {
+    const onClear = vi.fn();
+    const { container } = renderWithCtx(
+      <VariableTag value="{{ ctx.User.Email }}" onClear={onClear} allowCustomTagInput={false} />,
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('User/Email')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement).not.toHaveClass('ant-select-disabled');
+    expect(selectElement).not.toHaveClass('ant-select-show-search');
+    expect(container.querySelector('.ant-select-clear')).toBeInTheDocument();
+    expect(container.querySelector('.ant-select-selection-search-input')).toHaveAttribute('readonly');
+  });
+
   it('should not show close button when onClear is not provided', async () => {
     const { container } = renderWithCtx(<VariableTag value="{{ ctx.User.Name }}" />);
 
@@ -166,6 +204,32 @@ describe('VariableTag', () => {
     }
   });
 
+  it('renders a red failure pill when the variable path cannot be resolved', async () => {
+    renderWithCtx(
+      <VariableTag
+        value="{{ ctx.missing.field }}"
+        metaTree={[
+          {
+            name: 'user',
+            title: 'User',
+            type: 'object',
+            paths: ['user'],
+            children: [{ name: 'name', title: 'Name', type: 'string', paths: ['user', 'name'] }],
+          },
+        ]}
+      />,
+    );
+
+    await waitFor(
+      () => {
+        const tag = screen.getByText('Variable parsing failed');
+        expect(tag).toBeInTheDocument();
+        expect(tag.closest('.ant-tag')).toHaveClass('ant-tag-error');
+      },
+      { timeout: 3000 },
+    );
+  });
+
   it('should render Select component with proper structure', async () => {
     const { container } = render(<VariableTag value="{{ ctx.Test }}" />);
 
@@ -233,6 +297,22 @@ describe('VariableTag', () => {
     expect(selectElement).not.toHaveClass('ant-select-disabled');
   });
 
+  it('does not show clear affordance when disabled even if onClear is provided', async () => {
+    const onClear = vi.fn();
+    const { container } = renderWithCtx(<VariableTag value="{{ ctx.Test }}" onClear={onClear} disabled />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Test')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toHaveClass('ant-select-disabled');
+    expect(container.querySelector('.ant-select-clear')).not.toBeInTheDocument();
+  });
+
   it('should have proper accessibility attributes for Select component', async () => {
     const { container } = renderWithCtx(<VariableTag value="{{ ctx.Test }}" />);
 

package/src/components/variables/types.ts

@@ -95,6 +95,8 @@ export interface VariableInputProps {
 export interface VariableTagProps {
   value?: string;
   onClear?: () => void;
+  disabled?: boolean;
+  allowCustomTagInput?: boolean;
   className?: string;
   style?: React.CSSProperties;
   metaTreeNode?: MetaTreeNode | null;

package/src/flowEngine.ts

@@ -1343,6 +1343,9 @@ export class FlowEngine {
     if (!this.ensureModelRepository()) return;
     const refresh = !!options?.refresh;
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (!refresh && !bypassLoadedPageCache) {
       const model = this.findModelByParentId(options.parentId, options.subKey);
       if (model) {
@@ -1412,6 +1415,9 @@ export class FlowEngine {
     if (!this.ensureModelRepository()) return;
     const { uid, parentId, subKey } = options;
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (uid && !bypassLoadedPageCache && this._modelInstances.has(uid)) {
       return this._modelInstances.get(uid) as T;
     }