@nocobase/flow-engine 2.2.0-beta.2 → 2.2.0-beta.3

package/lib/components/FieldModelRenderer.js

@@ -58,41 +58,54 @@ const flowModelRendererPropKeys = [
   "extraToolbarItems"
 ];
 function FieldModelRenderer(props) {
-  const { model, ...rest } = props;
+  const { model, onChange, ...rest } = props;
   const composingRef = (0, import_react.useRef)(false);
-  const handleChange = /* @__PURE__ */ __name((e) => {
-    var _a;
-    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) {
-      (_a = props.onChange) == null ? void 0 : _a.call(props, val);
-    }
-  }, "handleChange");
-  const handleCompositionStart = /* @__PURE__ */ __name(() => {
+  const handleChange = (0, import_react.useCallback)(
+    (e) => {
+      var _a;
+      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 isComposing = composingRef.current || ((_a = e == null ? void 0 : e.nativeEvent) == null ? void 0 : _a.isComposing);
+      if (isComposing) {
+        return;
+      }
+      model.setProps({ value: val });
+      if (!composingRef.current) {
+        onChange == null ? void 0 : onChange(val);
+      }
+    },
+    [model, onChange]
+  );
+  const handleCompositionStart = (0, import_react.useCallback)(() => {
     composingRef.current = true;
-  }, "handleCompositionStart");
-  const handleCompositionEnd = /* @__PURE__ */ __name((e, flag = true) => {
-    composingRef.current = false;
-    if (flag) {
-      props.onChange(e);
-    }
-  }, "handleCompositionEnd");
-  const modelProps = {
-    onCompositionStart: handleCompositionStart,
-    onCompositionEnd: handleCompositionEnd,
-    ...import_lodash.default.omit(rest, flowModelRendererPropKeys),
-    onChange: handleChange
-  };
+  }, []);
+  const handleCompositionEnd = (0, import_react.useCallback)(
+    (e, flag = true) => {
+      composingRef.current = false;
+      if (flag) {
+        handleChange(e);
+      }
+    },
+    [handleChange]
+  );
+  const modelProps = (0, import_react.useMemo)(
+    () => ({
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      ...import_lodash.default.omit(rest, flowModelRendererPropKeys),
+      onChange: handleChange
+    }),
+    [handleChange, handleCompositionEnd, handleCompositionStart, rest]
+  );
   (0, import_react.useEffect)(() => {
     model && model.setProps(modelProps);
-  }, [modelProps]);
+  }, [model, modelProps]);
   return /* @__PURE__ */ import_react.default.createElement(import_FlowModelRenderer.FlowModelRenderer, { model, ...rest });
 }
 __name(FieldModelRenderer, "FieldModelRenderer");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-beta.2",
+  "version": "2.2.0-beta.3",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.2.0-beta.2",
-    "@nocobase/shared": "2.2.0-beta.2",
+    "@nocobase/sdk": "2.2.0-beta.3",
+    "@nocobase/shared": "2.2.0-beta.3",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "2fe3e6a86fc1d0cd039349a68b2e4d1d6945ce45"
+  "gitHead": "7b16bb2cfd427c110c6671252138cd85155723c5"
 }

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} />;
 }

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

@@ -0,0 +1,165 @@
+/**
+ * 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 { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { vi } from 'vitest';
+import { FlowEngine } from '../../flowEngine';
+import { FlowModel } from '../../models/flowModel';
+import { FlowEngineProvider } from '../../provider';
+import { FieldModelRenderer } from '../FieldModelRenderer';
+
+class InputModel extends FlowModel {
+  render(): React.ReactNode {
+    return (
+      <input
+        data-testid="field-input"
+        value={this.props.value ?? ''}
+        onChange={this.props.onChange}
+        onCompositionStart={this.props.onCompositionStart}
+        onCompositionEnd={this.props.onCompositionEnd}
+      />
+    );
+  }
+}
+
+describe('FieldModelRenderer', () => {
+  it('updates model and form value for normal input changes', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'normal-input-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    const input = await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    fireEvent.change(input, { target: { value: 'abc' } });
+
+    expect(model.props.value).toBe('abc');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('abc');
+  });
+
+  it('updates model and form value when field components pass values directly', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'direct-value-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    act(() => {
+      model.props.onChange(123);
+    });
+
+    expect(model.props.value).toBe(123);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(123);
+  });
+
+  it('defers model and form value updates while IME composition is active', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'input-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    const input = await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 't' }, nativeEvent: { isComposing: true } });
+
+    expect(model.props.value).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.compositionEnd(input, { target: { value: 'te' } });
+
+    expect(model.props.value).toBe('te');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('te');
+  });
+
+  it('does not commit composition value when composition end opts out', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'composition-opt-out-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+      expect(model.props.onCompositionStart).toBeTypeOf('function');
+      expect(model.props.onCompositionEnd).toBeTypeOf('function');
+    });
+
+    act(() => {
+      model.props.onCompositionStart();
+      model.props.onChange({ target: { value: 'search' }, nativeEvent: { isComposing: true } });
+      model.props.onCompositionEnd({ target: { value: 'search' } }, false);
+    });
+
+    expect(model.props.value).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});