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

package/src/__tests__/flowSettings.test.ts

@@ -8,6 +8,10 @@
  */
 
 import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField, FormProvider } from '@formily/react';
+import { render, screen } from '@testing-library/react';
 import { FlowSettings } from '../flowSettings';
 import { DefaultSettingsIcon } from '../components/settings/wrappers/contextual/DefaultSettingsIcon';
 import { FlowModel } from '../models';
@@ -142,10 +146,10 @@ describe('FlowSettings', () => {
       expect(settingsItem?.sort).toBe(0);
     });
 
-    test('should set up observable properties', () => {
+    test('should set up observable properties', async () => {
       // Test that enabled property is reactive
       const initialEnabled = flowSettings.enabled;
-      flowSettings.enable();
+      await flowSettings.enable();
       expect(flowSettings.enabled).not.toBe(initialEnabled);
       expect(flowSettings.enabled).toBe(true);
     });
@@ -186,6 +190,43 @@ describe('FlowSettings', () => {
       flowSettings.registerComponents({});
       expect(Object.keys(flowSettings.components)).toHaveLength(0);
     });
+
+    test('should register component loaders and load component on render', async () => {
+      const loader = vi.fn(async () => ({
+        default: () => React.createElement('div', null, 'Lazy Flow Settings Component'),
+      }));
+
+      flowSettings.registerComponentLoaders({
+        DemoFlowSettingsLazyField: loader,
+      });
+
+      expect(loader).not.toHaveBeenCalled();
+
+      const SchemaField = createSchemaField();
+      const form = createForm();
+
+      render(
+        React.createElement(
+          FormProvider,
+          { form },
+          React.createElement(SchemaField, {
+            schema: {
+              type: 'object',
+              properties: {
+                demo: {
+                  type: 'void',
+                  'x-component': 'DemoFlowSettingsLazyField',
+                },
+              },
+            },
+            components: flowSettings.components,
+          }),
+        ),
+      );
+
+      expect(await screen.findByText('Lazy Flow Settings Component')).toBeInTheDocument();
+      expect(loader).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('Scope Registration', () => {
@@ -228,30 +269,68 @@ describe('FlowSettings', () => {
   });
 
   describe('Enable/Disable Functionality', () => {
-    test('should enable flow settings', () => {
+    test('should enable flow settings', async () => {
       expect(flowSettings.enabled).toBe(false);
 
-      flowSettings.enable();
+      await flowSettings.enable();
 
       expect(flowSettings.enabled).toBe(true);
     });
 
-    test('should disable flow settings', () => {
-      flowSettings.enable();
+    test('should preload model loaders before enabling flow settings', async () => {
+      const preloadSpy = vi.spyOn(engine, 'preloadModelLoaders').mockResolvedValue({
+        requested: [],
+        loaded: [],
+        failed: [],
+      });
+
+      await flowSettings.enable();
+
+      expect(preloadSpy).toHaveBeenCalledTimes(1);
       expect(flowSettings.enabled).toBe(true);
+    });
 
-      flowSettings.disable();
+    test('should preload model loaders before force enabling flow settings', async () => {
+      const preloadSpy = vi.spyOn(engine, 'preloadModelLoaders').mockResolvedValue({
+        requested: [],
+        loaded: [],
+        failed: [],
+      });
+
+      await flowSettings.forceEnable();
+
+      expect(preloadSpy).toHaveBeenCalledTimes(1);
+      expect(flowSettings.enabled).toBe(true);
+    });
+
+    test('should disable flow settings', async () => {
+      await flowSettings.enable();
+      expect(flowSettings.enabled).toBe(true);
+
+      await flowSettings.disable();
 
       expect(flowSettings.enabled).toBe(false);
     });
 
-    test('should handle multiple enable/disable calls', () => {
-      flowSettings.enable();
-      flowSettings.enable();
+    test('should handle multiple enable/disable calls', async () => {
+      await flowSettings.enable();
+      await flowSettings.enable();
       expect(flowSettings.enabled).toBe(true);
 
-      flowSettings.disable();
-      flowSettings.disable();
+      await flowSettings.disable();
+      await flowSettings.disable();
+      expect(flowSettings.enabled).toBe(false);
+    });
+
+    test('forceDisable should clear force-enabled state and disable flow settings', async () => {
+      await flowSettings.forceEnable();
+      expect(flowSettings.enabled).toBe(true);
+
+      await flowSettings.forceDisable();
+
+      expect(flowSettings.enabled).toBe(false);
+
+      await flowSettings.disable();
       expect(flowSettings.enabled).toBe(false);
     });
   });
@@ -512,7 +591,7 @@ describe('FlowSettings', () => {
   });
 
   describe('Complex Integration Scenarios', () => {
-    test('should maintain state consistency during multiple operations', () => {
+    test('should maintain state consistency during multiple operations', async () => {
       // Initialize with components and scopes
       const TestComponent = () => 'TestComponent';
       const testScope = () => 'testScope';
@@ -528,7 +607,7 @@ describe('FlowSettings', () => {
       });
 
       // Enable/disable
-      flowSettings.enable();
+      await flowSettings.enable();
       expect(flowSettings.enabled).toBe(true);
 
       // Verify all state is maintained
@@ -536,7 +615,7 @@ describe('FlowSettings', () => {
       expect(flowSettings.scopes.testScope).toBe(testScope);
       expect(flowSettings.getToolbarItems().find((item) => item.key === 'integration-test')).toBeDefined();
 
-      flowSettings.disable();
+      await flowSettings.disable();
       expect(flowSettings.enabled).toBe(false);
 
       // State should still be maintained after disable

package/src/__tests__/renderHiddenInConfig.test.tsx

@@ -14,7 +14,7 @@ import { FlowEngine } from '../flowEngine';
 import { FlowModel, ModelRenderMode } from '../models/flowModel';
 
 describe('FlowModel.renderHiddenInConfig', () => {
-  it('renders via renderHiddenInConfig when hidden and config enabled (React element mode, mounted)', () => {
+  it('renders via renderHiddenInConfig when hidden and config enabled (React element mode, mounted)', async () => {
     class ElemModel extends FlowModel {
       render() {
         return <div data-testid="content">Content</div>;
@@ -28,14 +28,14 @@ describe('FlowModel.renderHiddenInConfig', () => {
     const model = new ElemModel({ uid: 'elem-1', flowEngine: engine });
 
     // runtime hidden => mounted result should be empty (no content/hidden)
-    engine.flowSettings.disable();
+    await engine.flowSettings.disable();
     model.setHidden(true);
     const { container, unmount, rerender } = render(model.render() as React.ReactElement);
     expect(screen.queryByTestId('content')).toBeNull();
     expect(screen.queryByTestId('hidden')).toBeNull();
 
     // config enabled + hidden => should show renderHiddenInConfig result
-    engine.flowSettings.enable();
+    await engine.flowSettings.enable();
     rerender(model.render() as React.ReactElement);
     expect(screen.getByTestId('hidden').textContent).toBe('HiddenViaAPI');
 
@@ -46,7 +46,7 @@ describe('FlowModel.renderHiddenInConfig', () => {
     unmount();
     cleanup();
   });
-  it('returns a render function when hidden and config enabled (RenderFunction mode)', () => {
+  it('returns a render function when hidden and config enabled (RenderFunction mode)', async () => {
     class FuncModel extends FlowModel {
       static override renderMode = ModelRenderMode.RenderFunction;
       render() {
@@ -63,13 +63,13 @@ describe('FlowModel.renderHiddenInConfig', () => {
     const model = engine.createModel({ use: 'FuncModel' }) as FuncModel;
 
     // runtime hidden => null
-    engine.flowSettings.disable();
+    await engine.flowSettings.disable();
     model.setHidden(true);
     const runtimeHidden = model.render();
     expect(runtimeHidden).toBeNull();
 
     // config enabled + hidden => renderHiddenInConfig (function)
-    engine.flowSettings.enable();
+    await engine.flowSettings.enable();
     const cfgHidden = model.render();
     expect(typeof cfgHidden).toBe('function');
     const cellNode = (cfgHidden as any)();

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -256,11 +256,11 @@ describe('ViewScopedFlowEngine', () => {
 
     // Both children should return null from hydration because parent has flowSettingsEnabled
     // This is the bug fix: previously only children with their own flowSettingsEnabled would return null
-    const result1 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result1 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'popup',
     });
-    const result2 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result2 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'items',
     });
@@ -298,7 +298,7 @@ describe('ViewScopedFlowEngine', () => {
     const scoped = createViewScopedEngine(root);
 
     // Call the private method hydrateModelFromPreviousEngines directly
-    const result = (scoped as any).hydrateModelFromPreviousEngines({
+    const result = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-normal',
       subKey: 'content',
     });

package/src/components/FlowModelRenderer.tsx

@@ -127,6 +127,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   settingsMenuLevel?: number;
   extraToolbarItems?: ToolbarItemConfig[];
   fallback?: React.ReactNode;
+  useCache?: boolean;
 }> = observer(
   ({
     model,
@@ -139,12 +140,12 @@ const FlowModelRendererWithAutoFlows: React.FC<{
     settingsMenuLevel,
     extraToolbarItems,
     fallback,
+    useCache,
   }) => {
     // hidden 占位由模型自身处理；无需在此注入
-
     const { loading: pending, error: autoFlowsError } = useApplyAutoFlows(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache,
+      useCache,
     });
     // 将错误下沉到 model 实例上，供内容层读取（类型安全的 WeakMap 存储）
     setAutoFlowError(model, autoFlowsError || null);
@@ -348,13 +349,15 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
     extraToolbarItems,
     useCache,
   }) => {
+    const resolvedUseCache = typeof useCache === 'boolean' ? useCache : model?.context?.useCache;
+
     useEffect(() => {
-      if (model?.context) {
+      if (model?.context && typeof resolvedUseCache !== 'undefined') {
         model.context.defineProperty('useCache', {
-          value: typeof useCache === 'boolean' ? useCache : model.context.useCache,
+          value: resolvedUseCache,
         });
       }
-    }, [model?.context, useCache]);
+    }, [model?.context, resolvedUseCache]);
 
     if (!model || typeof model.render !== 'function') {
       // 可以选择渲染 null 或者一个错误/提示信息
@@ -375,6 +378,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
         settingsMenuLevel={settingsMenuLevel}
         extraToolbarItems={extraToolbarItems}
         fallback={fallback}
+        useCache={resolvedUseCache}
       />
     );
 

package/src/components/MobilePopup.tsx

@@ -8,11 +8,13 @@
  */
 
 import { ConfigProvider } from 'antd';
-import { Popup } from 'antd-mobile';
 import React, { FC, ReactNode, useMemo } from 'react';
-import { CloseOutline } from 'antd-mobile-icons';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
+import { lazy } from '../lazy-helper';
+
+const { Popup } = lazy(() => import('antd-mobile'), 'Popup');
+const { CloseOutline } = lazy(() => import('antd-mobile-icons'), 'CloseOutline');
 
 interface MobilePopupProps {
   title?: string;

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

@@ -38,9 +38,8 @@ describe('FlowModelRenderer', () => {
   test('should pass useCache to useApplyAutoFlows and set it on context', async () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={true} />);
 
-    // Check if dispatchEvent was called with useCache: true
-    // useApplyAutoFlows calls dispatchEvent('beforeRender', inputArgs, { useCache })
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -58,6 +57,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={false} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -74,6 +74,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -86,4 +87,66 @@ describe('FlowModelRenderer', () => {
 
     unmount();
   });
+
+  test('should clear stale beforeRender state after unmount when reusing the same model', async () => {
+    const statefulEngine = new FlowEngine();
+    const onMountSpy = vi.fn();
+    const onUnmountSpy = vi.fn();
+
+    class StatefulModel extends FlowModel {
+      render(): any {
+        return <div>Stateful Content</div>;
+      }
+
+      protected onMount(): void {
+        onMountSpy();
+      }
+
+      protected onUnmount(): void {
+        onUnmountSpy();
+      }
+    }
+
+    const statefulModel = new StatefulModel({
+      uid: 'stateful-model',
+      flowEngine: statefulEngine,
+    });
+    const executorSpy = vi.spyOn((statefulEngine as any).executor, 'dispatchEvent').mockResolvedValue([]);
+
+    const firstRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    await waitFor(() => {
+      expect(executorSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(onMountSpy).toHaveBeenCalledTimes(1);
+    });
+
+    firstRender.unmount();
+    await waitFor(() => {
+      expect(onUnmountSpy).toHaveBeenCalledTimes(1);
+    });
+
+    executorSpy.mockClear();
+    statefulModel.setStepParams('anyFlow', 'anyStep', { x: 1 });
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    expect(executorSpy.mock.calls.length).toBe(0);
+
+    const secondRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    await waitFor(() => {
+      expect(executorSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(onMountSpy).toHaveBeenCalledTimes(2);
+    });
+    const [target, eventName, inputArgs, options] = executorSpy.mock.calls[0];
+    expect(target).toBe(statefulModel);
+    expect(eventName).toBe('beforeRender');
+    expect(inputArgs).toBeUndefined();
+    expect(options).toMatchObject({ useCache: true });
+
+    secondRender.unmount();
+    await waitFor(() => {
+      expect(onUnmountSpy).toHaveBeenCalledTimes(2);
+    });
+  });
 });

package/src/components/__tests__/flow-model-render-error-fallback.test.tsx

@@ -124,7 +124,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ BrokenModel });
     const model = engine.createModel({ use: 'BrokenModel', uid: 'broken-top-2' }) as BrokenModel;
     // satisfy FlowsFloatContextMenu styles
@@ -164,7 +164,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, BrokenChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-3' }) as ParentModel;
     const child = engine.createModel({ use: 'BrokenChild', uid: 'child-3' }) as BrokenChild;
@@ -210,7 +210,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, RenderFnChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-4' }) as ParentModel;
     const child = engine.createModel({ use: 'RenderFnChild', uid: 'cell-4' }) as RenderFnChild;

package/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx

@@ -70,6 +70,15 @@ interface BaseFloatContextMenuProps {
   toolbarPosition?: ToolbarPosition;
 }
 
+const getFloatMenuInstanceId = (model?: FlowModel | null) => {
+  if (!model) {
+    return '';
+  }
+
+  const forkId = (model as any)?.isFork ? (model as any)?.forkId : undefined;
+  return forkId == null || forkId === '' ? String(model.uid || '') : `${String(model.uid || '')}::${String(forkId)}`;
+};
+
 const hostContainerStyles = css`
   position: relative;
 
@@ -279,6 +288,7 @@ const detectButtonInDOM = (container: HTMLElement): boolean => {
 // 渲染工具栏项目，并让设置菜单与工具栏共享同一个 popup 容器。
 const renderToolbarItems = (
   model: FlowModel,
+  modelInstanceId: string,
   showDeleteButton: boolean,
   showCopyUidButton: boolean,
   flowEngine: FlowEngine,
@@ -304,7 +314,7 @@ const renderToolbarItems = (
           <ItemComponent
             key={itemConfig.key}
             model={model}
-            id={model.uid}
+            id={modelInstanceId}
             showDeleteButton={showDeleteButton}
             showCopyUidButton={showCopyUidButton}
             menuLevels={settingsMenuLevel}
@@ -517,7 +527,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
       updatePortalRect: () => {},
       schedulePortalRectUpdate: () => {},
     });
-    const modelUid = model?.uid || '';
+    const modelUid = getFloatMenuInstanceId(model);
     const flowEngine = useFlowEngine();
     const updatePortalRectProxy = useCallback(() => {
       portalActionsRef.current.updatePortalRect();
@@ -559,6 +569,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         model
           ? renderToolbarItems(
               model,
+              modelUid,
               showDeleteButton,
               showCopyUidButton,
               flowEngine,
@@ -629,7 +640,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         ref={toolbarContainerRef}
         className={`nb-toolbar-container ${toolbarContainerClassName}`}
         style={toolbarContainerStyle}
-        data-model-uid={model.uid}
+        data-model-uid={modelUid}
       >
         {showTitle && (model.title || model.extraTitle) && (
           <div className="nb-toolbar-container-title">
@@ -668,7 +679,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         className={`${hostContainerStyles} ${hasButton ? 'has-button-child' : ''} ${className || ''}`}
         style={containerStyle}
         data-has-float-menu="true"
-        data-float-menu-model-uid={model.uid}
+        data-float-menu-model-uid={modelUid}
         onMouseMove={handleChildHover}
         onMouseEnter={handleHostMouseEnter}
         onMouseLeave={handleHostMouseLeave}

package/src/components/settings/wrappers/contextual/__tests__/FlowsFloatContextMenu.test.tsx

@@ -192,7 +192,7 @@ describe('FlowsFloatContextMenu', () => {
 
   it('defaults to portal into app container and keeps toolbar visible while moving from host to toolbar', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     const model = createModel(engine, 'portal-model');
     const appContainer = createAppContainer();
     appContainer.scrollTop = 8;
@@ -254,7 +254,7 @@ describe('FlowsFloatContextMenu', () => {
 
   it('renders through FlowModelRenderer with app-container portal and keeps toolbar pinned while dropdown is open', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     const model = createModel(engine, 'renderer-model');
     const appContainer = createAppContainer();
     mockRect(appContainer, { top: 40, left: 60, width: 1200, height: 800 });
@@ -316,7 +316,7 @@ describe('FlowsFloatContextMenu', () => {
 
   it('portals field toolbar to the nearest popup root and treats inset values as rect adjustments', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     const model = createModel(engine, 'field-model');
     model.render = vi.fn().mockReturnValue(<input data-testid="field-input" />);
     const insetModel = createModel(engine, 'field-inset-model');
@@ -400,7 +400,7 @@ describe('FlowsFloatContextMenu', () => {
 
   it('hides parent toolbar when hovering a nested child host', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     const parentModel = createModel(engine, 'parent-model');
     const childModel = createModel(engine, 'child-model');
     const appContainer = createAppContainer();
@@ -470,7 +470,7 @@ describe('FlowsFloatContextMenu', () => {
 
   it('restores parent toolbar after leaving a child toolbar back into the parent block', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     const parentModel = createModel(engine, 'parent-restore-model');
     const childModel = createModel(engine, 'child-restore-model');
     const appContainer = createAppContainer();
@@ -544,4 +544,66 @@ describe('FlowsFloatContextMenu', () => {
       expect(parentOverlayAfterRestore?.className).toContain('nb-toolbar-visible');
     });
   });
+
+  it('treats forked models as distinct float menu instances even when they share the same uid', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const masterModel = new FlowModel({ uid: 'forked-model', flowEngine: engine });
+    masterModel.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+    masterModel.render = vi.fn(function (this: any) {
+      return <div data-testid={`content-${String(this.forkId || this.uid)}`}>{String(this.forkId || this.uid)}</div>;
+    });
+
+    const firstFork = masterModel.createFork({}, 'card-1') as FlowModel & { forkId?: string };
+    const secondFork = masterModel.createFork({}, 'card-2') as FlowModel & { forkId?: string };
+    const firstInstanceId = `forked-model::${String((firstFork as any).forkId)}`;
+    const secondInstanceId = `forked-model::${String((secondFork as any).forkId)}`;
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <>
+        <FlowsFloatContextMenu model={firstFork}>
+          <div data-testid="fork-host-1">first</div>
+        </FlowsFloatContextMenu>
+        <FlowsFloatContextMenu model={secondFork}>
+          <div data-testid="fork-host-2">second</div>
+        </FlowsFloatContextMenu>
+      </>,
+      { container: appContainer },
+    );
+
+    const firstHost = getHost(getByTestId('fork-host-1'));
+    const secondHost = getHost(getByTestId('fork-host-2'));
+    mockRect(firstHost, { top: 20, left: 20, width: 180, height: 72 });
+    mockRect(secondHost, { top: 120, left: 20, width: 180, height: 72 });
+
+    fireEvent.mouseEnter(firstHost);
+
+    const firstOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, firstInstanceId);
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(firstOverlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    fireEvent.mouseEnter(secondHost);
+
+    const secondOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, secondInstanceId);
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(secondOverlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    expect(firstOverlay.getAttribute('data-model-uid')).toBe(firstInstanceId);
+    expect(secondOverlay.getAttribute('data-model-uid')).toBe(secondInstanceId);
+  });
 });

package/src/components/subModel/AddSubModelButton.tsx

@@ -610,7 +610,7 @@ const AddSubModelButtonCore = function AddSubModelButton({
     let addedModel: FlowModel | undefined;
 
     try {
-      addedModel = model.flowEngine.createModel({
+      addedModel = await model.flowEngine.createModelAsync({
         ..._.cloneDeep(createOpts),
         parentId: model.uid,
         subKey: subModelKey,