@nocobase/flow-engine 2.2.0-beta.1 → 2.2.0-beta.11

package/src/__tests__/flowContext.test.ts

@@ -14,6 +14,8 @@ import { FlowEngine } from '../flowEngine';
 import { FlowModel } from '../models/flowModel';
 import { RunJSContextRegistry } from '../runjs-context/registry';
 import { setupRunJSContexts } from '../runjs-context/setup';
+import { createViewScopedEngine } from '../ViewScopedFlowEngine';
+import { DATA_SOURCE_DIRTY_EVENT } from '../views/viewEvents';
 
 describe('FlowContext properties and methods', () => {
   it('should return static property value', () => {
@@ -177,6 +179,49 @@ describe('FlowContext properties and methods', () => {
     });
   });
 
+  it('should expose current role as a top-level variable', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: 'admin' } } });
+
+    expect(ctx.role).toBe('admin');
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toBe('admin');
+
+    const roleNode = ctx.getPropertyMetaTree().find((node) => node.name === 'role');
+    expect(roleNode).toMatchObject({
+      name: 'role',
+      title: '{{t("Current role")}}',
+      paths: ['role'],
+    });
+  });
+
+  it('should expose actual role names for union role mode', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: '__union__' } } });
+    ctx.defineProperty('user', {
+      value: {
+        roles: [
+          { name: 'admin', title: 'Admin' },
+          { name: 'member', title: 'Member' },
+        ],
+      },
+    });
+
+    expect(ctx.role).toEqual(['admin', 'member']);
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toEqual(['admin', 'member']);
+  });
+
+  it('should expose an empty role list for union role mode without user roles', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: '__union__' } } });
+    ctx.defineProperty('user', { value: {} });
+
+    expect(ctx.role).toEqual([]);
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toEqual([]);
+  });
+
   it('should throw sync error in get', () => {
     const ctx = new FlowContext();
     ctx.defineProperty('error', {
@@ -1386,6 +1431,92 @@ describe('FlowEngine context', () => {
     expect(engine.context.appName).toBe('NocoBase');
   });
 
+  it('ctx.api should return a dirty-aware wrapper for static api properties', async () => {
+    const engine = new FlowEngine();
+    const update = vi.fn(async () => ({ data: { data: { id: 1 } } }));
+    const api = {
+      auth: { locale: 'zh-CN' },
+      request: vi.fn(async () => ({ data: { ok: true } })),
+      resource: vi.fn(() => ({ update })),
+    };
+    engine.context.defineProperty('api', { value: api });
+
+    await engine.context.api.resource('posts').update({ filterByTk: 1, values: { title: 't' } });
+
+    expect(update).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(engine.context.api).toBe(engine.context.api);
+  });
+
+  it('ctx.api should stay dirty-aware when resolved from a scoped context delegate', async () => {
+    const root = new FlowEngine();
+    const scoped = createViewScopedEngine(root);
+    const update = vi.fn(async () => ({ data: { data: { id: 1 } } }));
+    root.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request: vi.fn(async () => ({ data: { ok: true } })),
+        resource: vi.fn(() => ({ update })),
+      },
+    });
+
+    await scoped.context.api.resource('posts').update({ filterByTk: 1, values: { title: 't' } });
+
+    expect(update).toHaveBeenCalledTimes(1);
+    expect(root.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(scoped.context.engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+  });
+
+  it('ctx.request should use the dirty-aware api wrapper', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn(async () => ({ data: { ok: true } }));
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+
+    await engine.context.request({
+      resource: 'posts',
+      action: 'update',
+      headers: { 'X-Data-Source': 'analytics' },
+      params: { filterByTk: 1 },
+    } as any);
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('analytics', 'posts')).toBe(1);
+  });
+
+  it('ctx.request should use the caller context when resolved through a scoped delegate', async () => {
+    const root = new FlowEngine();
+    const scoped = createViewScopedEngine(root);
+    const callerCtx = new FlowContext();
+    const dirtyEvents: Array<{ dataSourceKey: string; resourceNames: string[] }> = [];
+    const request = vi.fn(async () => ({ data: { ok: true } }));
+    root.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+    callerCtx.addDelegate(scoped.context);
+    scoped.context.engine.emitter.on(DATA_SOURCE_DIRTY_EVENT, (event) => dirtyEvents.push(event));
+
+    await callerCtx.request({
+      resource: 'posts',
+      action: 'update',
+      params: { filterByTk: 1 },
+    } as any);
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(root.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(scoped.context.engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(dirtyEvents).toEqual([{ dataSourceKey: 'main', resourceNames: ['posts'] }]);
+  });
+
   it('ctx.sql should resolve template variables from caller context in delegate chain', async () => {
     const engine = new FlowEngine();
     const request = vi.fn(async () => ({ data: { data: [] } }));
@@ -1476,6 +1607,29 @@ describe('FlowEngine context', () => {
     await expect((engine.context as any).getVar('foo.bar')).rejects.toThrow();
   });
 
+  it('model.context.getVar should resolve the latest ctx.auth.user after user changes', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('api', {
+      value: { auth: { role: 'admin', locale: 'en-US', token: 'token-1' } },
+    });
+    engine.context.defineProperty('user', { value: { id: 1, nickname: 'Alice' } });
+
+    class AuthUserModel extends FlowModel {}
+    engine.registerModels({ AuthUserModel });
+    const model = engine.createModel({ use: 'AuthUserModel' });
+
+    expect(await model.context.getVar('ctx.auth.user.id')).toBe(1);
+    expect(await model.context.getVar('ctx.auth.token')).toBe('token-1');
+
+    engine.context.api.auth.role = 'member';
+    engine.context.api.auth.token = 'token-2';
+    engine.context.defineProperty('user', { value: { id: 2, nickname: 'Bob' } });
+
+    expect(await model.context.getVar('ctx.auth.user.id')).toBe(2);
+    expect(await model.context.getVar('ctx.auth.roleName')).toBe('member');
+    expect(await model.context.getVar('ctx.auth.token')).toBe('token-2');
+  });
+
   it('engine.context.runAction should resolve action from engine.getAction', async () => {
     const engine = new FlowEngine();
 

package/src/__tests__/flowEngine.dataSourceDirty.test.ts

@@ -11,6 +11,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine } from '../flowEngine';
 import { MultiRecordResource } from '../resources/multiRecordResource';
 import { SingleRecordResource } from '../resources/singleRecordResource';
+import { DATA_SOURCE_DIRTY_EVENT } from '../views/viewEvents';
 
 describe('FlowEngine dataSource dirty registry', () => {
   it('tracks versions per dataSourceKey + resourceName', () => {
@@ -60,4 +61,54 @@ describe('FlowEngine dataSource dirty registry', () => {
     // plus root collection (safety)
     expect(markSpy).toHaveBeenCalledWith('main', 'users');
   });
+
+  it('marks dirty once for record write helpers when using the dirty-aware context api', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn(async () => ({ data: { data: { id: 1 }, meta: {} } }));
+    const dirtyEvents: Array<{ dataSourceKey: string; resourceNames: string[] }> = [];
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+    engine.emitter.on(DATA_SOURCE_DIRTY_EVENT, (event) => dirtyEvents.push(event));
+
+    const multi = engine.createResource(MultiRecordResource);
+    multi.setDataSourceKey('main').setResourceName('posts');
+    await multi.create({ title: 't' } as any, { refresh: false });
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(dirtyEvents).toEqual([{ dataSourceKey: 'main', resourceNames: ['posts'] }]);
+
+    const single = engine.createResource(SingleRecordResource);
+    single.setDataSourceKey('main').setResourceName('posts').setFilterByTk(1);
+    await single.save({ title: 'u' } as any, { refresh: false });
+
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(2);
+    expect(dirtyEvents).toEqual([
+      { dataSourceKey: 'main', resourceNames: ['posts'] },
+      { dataSourceKey: 'main', resourceNames: ['posts'] },
+    ]);
+  });
+
+  it('still marks dirty for direct runAction writes', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request: vi.fn(async () => ({ data: { data: { id: 1 }, meta: {} } })),
+        resource: vi.fn(),
+      },
+    });
+
+    const multi = engine.createResource(MultiRecordResource);
+    multi.setDataSourceKey('main').setResourceName('posts');
+    await multi.runAction('create', { data: { title: 't' } });
+
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+  });
 });

package/src/__tests__/flowModel.openView.navigation.test.ts

@@ -104,4 +104,32 @@ describe('FlowModelContext.openView - navigation enforcement', () => {
     expect(child.dispatchEvent).toHaveBeenCalledTimes(1);
     expect(child.dispatchEvent.mock.calls[0][0]).toBe('click');
   });
+
+  it('inherits current model input args when opening an external popup', async () => {
+    const { parent, child } = setup();
+    parent['getInputArgs'] = vi.fn(() => ({
+      filterByTk: 2,
+      sourceId: 10,
+      defaultInputKeys: ['filterByTk', 'sourceId'],
+    }));
+
+    await (parent.context as any).openView('child-uid', { mode: 'dialog' });
+
+    expect(child.dispatchEvent).toHaveBeenCalledTimes(1);
+    expect(child.dispatchEvent.mock.calls[0][1]).toMatchObject({
+      mode: 'dialog',
+      filterByTk: 2,
+      sourceId: 10,
+    });
+    expect(child.dispatchEvent.mock.calls[0][1]).not.toHaveProperty('defaultInputKeys');
+  });
+
+  it('does not debounce external popup dispatches', async () => {
+    const { parent, child } = setup();
+
+    await (parent.context as any).openView('child-uid', { mode: 'dialog', filterByTk: 1 });
+
+    expect(child.dispatchEvent).toHaveBeenCalledTimes(1);
+    expect(child.dispatchEvent.mock.calls[0][2]).toBeUndefined();
+  });
 });

package/src/__tests__/flowSettings.test.ts

@@ -557,6 +557,78 @@ describe('FlowSettings', () => {
     });
   });
 
+  describe('Dynamic Flow Source Providers', () => {
+    test('should return current model as the default dynamic flow source', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+
+      expect(sources).toHaveLength(1);
+      expect(sources[0].key).toBe('self');
+      expect(sources[0].label).toBe('Current block');
+      expect(sources[0].model).toBe(model);
+    });
+
+    test('should register, resolve, and dispose dynamic flow source providers', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+      const target = new FlowModel({ uid: 'target-model', flowEngine: engine });
+
+      const dispose = flowSettings.registerDynamicFlowSourceProvider({
+        key: 'test-provider',
+        visible: (m) => m.uid === model.uid,
+        getSources: () => [{ key: 'target', label: 'Target model', model: target, sort: 10 }],
+      });
+
+      expect(flowSettings.hasDynamicFlowSourceProvider(model)).toBe(true);
+      expect(flowSettings.hasDynamicFlowSourceProvider(target)).toBe(false);
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+      expect(sources.map((source) => source.key)).toEqual(['self', 'target']);
+
+      dispose();
+
+      expect(flowSettings.hasDynamicFlowSourceProvider(model)).toBe(false);
+      await expect(flowSettings.getDynamicFlowSources(model)).resolves.toHaveLength(1);
+    });
+
+    test('should skip duplicate dynamic flow source keys and model uids', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+      const target = new FlowModel({ uid: 'target-model', flowEngine: engine });
+
+      flowSettings.registerDynamicFlowSourceProvider({
+        key: 'test-provider',
+        getSources: () => [
+          { key: 'target', label: 'Target model', model: target },
+          { key: 'target', label: 'Duplicate key', model: new FlowModel({ uid: 'other-model', flowEngine: engine }) },
+          { key: 'duplicate-uid', label: 'Duplicate uid', model: target },
+        ],
+      });
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+
+      expect(sources.map((source) => source.key)).toEqual(['self', 'target']);
+    });
+
+    test('should ignore failing dynamic flow source providers', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+
+      flowSettings.registerDynamicFlowSourceProvider({
+        key: 'failing-provider',
+        getSources: () => {
+          throw new Error('provider failed');
+        },
+      });
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+
+      expect(sources.map((source) => source.key)).toEqual(['self']);
+      expect(consoleSpy.warn).toHaveBeenCalledWith(
+        "FlowSettings: Dynamic flow source provider 'failing-provider' failed.",
+        expect.any(Error),
+      );
+    });
+  });
+
   describe('Step Settings Dialog', () => {
     test('should call openStepSettingsDialog with correct parameters', async () => {
       const { openStepSettingsDialog } = await import('../components/settings/wrappers/contextual/StepSettingsDialog');

package/src/__tests__/runjsRuntimeFeatures.test.ts

@@ -8,9 +8,9 @@
  */
 
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { FlowContext, FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { RUNJS_OPEN_VIEW_ROUTE_STATE } from '../utils/openViewRouteState';
 import { FlowEngine } from '../flowEngine';
-import { FlowContext } from '../flowContext';
 import { setupRunJSContexts } from '../runjs-context/setup';
 import { createJSRunnerWithVersion } from '..';
 import { RunJSContextRegistry } from '../runjs-context/registry';
@@ -267,6 +267,19 @@ describe('RunJS Runtime Features', () => {
       expect(runCtx.libs.dayjs).toBeDefined();
       expect(runCtx.libs.antdIcons).toBeDefined();
     });
+
+    it('should mark ctx.openView calls with route state only when RunJS passes display overrides', async () => {
+      const parentCtx = new FlowContext();
+      const openView = vi.fn(async () => undefined);
+      parentCtx.defineMethod('openView', openView);
+
+      const runCtx = new FlowRunJSContext(parentCtx);
+      await (runCtx as any).openView('popup', { mode: 'dialog', size: 'large' });
+      await (runCtx as any).openView('popup', { filterByTk: 1 });
+
+      expect(openView.mock.calls[0][1][RUNJS_OPEN_VIEW_ROUTE_STATE]).toEqual({ mode: 'dialog', size: 'large' });
+      expect(Object.prototype.hasOwnProperty.call(openView.mock.calls[1][1], RUNJS_OPEN_VIEW_ROUTE_STATE)).toBe(false);
+    });
   });
 
   describe('Actual code execution', () => {

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -340,9 +340,9 @@ describe('ViewScopedFlowEngine', () => {
     const repository = new DirtyPageRepository();
     root.setModelRepository(repository);
 
-    class ParentModel extends FlowModel {}
-    class PageModel extends FlowModel {}
     class BlockModel extends FlowModel {}
+    class PageModel extends FlowModel<{ parent?: FlowModel; subModels: { items: BlockModel[] } }> {}
+    class ParentModel extends FlowModel<{ parent?: FlowModel; subModels: { page?: PageModel } }> {}
     root.registerModels({ ParentModel, PageModel, BlockModel });
 
     const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'popup-action' });
@@ -357,7 +357,10 @@ describe('ViewScopedFlowEngine', () => {
         items: [{ use: 'BlockModel', uid: 'stale-block' }],
       },
     });
-    const staleBlock = stalePage.findSubModel('items' as any, (item) => item.uid === 'stale-block') as FlowModel;
+    const staleBlock = stalePage.findSubModel('items', (item) => item.uid === 'stale-block');
+    if (!staleBlock) {
+      throw new Error('Expected stale block to be loaded');
+    }
     parent.setSubModel('page', stalePage);
     oldScoped.unlinkFromStack();
 
@@ -372,7 +375,7 @@ describe('ViewScopedFlowEngine', () => {
       },
     };
 
-    root.flowSettings.enable();
+    await root.flowSettings.enable();
     await staleBlock.saveStepParams();
     root.flowSettings.disable();
     repository.findOneCalls = 0;
@@ -388,8 +391,8 @@ describe('ViewScopedFlowEngine', () => {
 
     expect(repository.findOneCalls).toBe(1);
     expect(loaded).not.toBe(stalePage);
-    expect((parent.subModels as any).page).toBe(loaded);
-    expect(loaded?.mapSubModels('items' as any, (item) => item.uid)).toEqual(['fresh-block']);
+    expect(parent.subModels.page).toBe(loaded);
+    expect(loaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-block']);
 
     repository.findOneCalls = 0;
     const nextRuntimeScoped = createViewScopedEngine(root);
@@ -405,6 +408,69 @@ describe('ViewScopedFlowEngine', () => {
     expect(loadedAgain?.uid).toBe('popup-page');
   });
 
+  it('reloads a page after it was loaded in flow settings mode', async () => {
+    const root = new FlowEngine();
+    const repository = new DirtyPageRepository();
+    root.setModelRepository(repository);
+
+    class ParentModel extends FlowModel {}
+    class PageModel extends FlowModel {}
+    class BlockModel extends FlowModel {}
+    root.registerModels({ ParentModel, PageModel, BlockModel });
+
+    const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'settings-popup-action' });
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'stale-settings-block' }],
+      },
+    };
+
+    await root.flowSettings.enable();
+    const designScoped = createViewScopedEngine(root);
+    const designLoaded = await designScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+    expect(repository.findOneCalls).toBe(1);
+    expect(designLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['stale-settings-block']);
+    designScoped.unlinkFromStack();
+
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'fresh-settings-block' }],
+      },
+    };
+    root.flowSettings.disable();
+    repository.findOneCalls = 0;
+
+    const runtimeScoped = createViewScopedEngine(root);
+    const runtimeLoaded = await runtimeScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+
+    expect(repository.findOneCalls).toBe(1);
+    expect(runtimeLoaded).not.toBe(designLoaded);
+    expect(parent.subModels.page).toBe(runtimeLoaded);
+    expect(runtimeLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-settings-block']);
+  });
+
   it('does not bypass loaded page cache after a non-config save', async () => {
     const root = new FlowEngine();
     const repository = new DirtyPageRepository();

package/src/components/FieldModelRenderer.tsx

@@ -10,7 +10,7 @@
 import type { FlowModelRendererProps } from './FlowModelRenderer';
 import { FlowModelRenderer } from './FlowModelRenderer';
 import _ from 'lodash';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
   'model',
@@ -28,49 +28,63 @@ const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
 ];
 
 export function FieldModelRenderer(props: any) {
-  const { model, ...rest } = props;
+  const { model, onChange, ...rest } = props;
   const composingRef = useRef(false);
 
-  const handleChange = (e: any) => {
-    let val;
-    if (e && e.target && typeof e.target.value !== 'undefined') {
-      val = e.target.value;
-    } else if (
-      typeof e === 'string' ||
-      typeof e === 'number' ||
-      typeof e === 'boolean' ||
-      (typeof e === 'object' && !(e instanceof Event))
-    ) {
-      val = e;
-    } else {
-      val = null;
-    }
+  const handleChange = useCallback(
+    (e: any) => {
+      let val;
+      if (e && e.target && typeof e.target.value !== 'undefined') {
+        val = e.target.value;
+      } else if (
+        typeof e === 'string' ||
+        typeof e === 'number' ||
+        typeof e === 'boolean' ||
+        (typeof e === 'object' && !(e instanceof Event))
+      ) {
+        val = e;
+      } else {
+        val = null;
+      }
 
-    model.setProps({ value: val });
-    if (!composingRef.current) {
-      props.onChange?.(val);
-    }
-  };
-  const handleCompositionStart = () => {
+      const isComposing = composingRef.current || e?.nativeEvent?.isComposing;
+      if (isComposing) {
+        return;
+      }
+
+      model.setProps({ value: val });
+      if (!composingRef.current) {
+        onChange?.(val);
+      }
+    },
+    [model, onChange],
+  );
+  const handleCompositionStart = useCallback(() => {
     composingRef.current = true;
-  };
+  }, []);
 
-  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
-    composingRef.current = false;
-    if (flag) {
-      props.onChange(e);
-    }
-  };
+  const handleCompositionEnd = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
+      composingRef.current = false;
+      if (flag) {
+        handleChange(e);
+      }
+    },
+    [handleChange],
+  );
 
-  const modelProps = {
-    onCompositionStart: handleCompositionStart,
-    onCompositionEnd: handleCompositionEnd,
-    ..._.omit(rest, flowModelRendererPropKeys),
-    onChange: handleChange,
-  };
+  const modelProps = useMemo(
+    () => ({
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      ..._.omit(rest, flowModelRendererPropKeys),
+      onChange: handleChange,
+    }),
+    [handleChange, handleCompositionEnd, handleCompositionStart, rest],
+  );
   useEffect(() => {
     model && model.setProps(modelProps);
-  }, [modelProps]);
+  }, [model, modelProps]);
 
   return <FlowModelRenderer model={model} {...rest} />;
 }