@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.11

package/src/flow/models/fields/InputFieldModel.tsx

@@ -9,18 +9,56 @@
 
 import { EditableItemModel, FilterableItemModel, tExpr } from '@nocobase/flow-engine';
 import { Input } from 'antd';
-import React from 'react';
+import type { InputProps } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { customAlphabet as Alphabet } from 'nanoid';
 import { FieldModel } from '../base/FieldModel';
 import { ScanInput } from '../../../components/form/ScanInput';
 
+function IMESafeInput(props: InputProps) {
+  const { value, onChange, onCompositionStart, onCompositionEnd, ...rest } = props;
+  const [inputValue, setInputValue] = useState<InputProps['value']>(() => normalizeInputValue(value));
+
+  useEffect(() => {
+    setInputValue(normalizeInputValue(value));
+  }, [value]);
+
+  const getEventValue = (event: React.ChangeEvent<HTMLInputElement> | React.CompositionEvent<HTMLInputElement>) =>
+    event.currentTarget.value;
+
+  return (
+    <Input
+      {...rest}
+      value={inputValue}
+      onChange={(event) => {
+        setInputValue(getEventValue(event));
+        onChange?.(event);
+      }}
+      onCompositionStart={(event) => {
+        setInputValue(getEventValue(event));
+        onCompositionStart?.(event);
+      }}
+      onCompositionEnd={(event) => {
+        setInputValue(getEventValue(event));
+        onCompositionEnd?.(event);
+      }}
+    />
+  );
+}
+
+function normalizeInputValue(nextValue: unknown): InputProps['value'] {
+  if (typeof nextValue === 'bigint') return String(nextValue);
+  if (nextValue == null) return '';
+  return nextValue as InputProps['value'];
+}
+
 export class InputFieldModel extends FieldModel {
   render() {
     if (this.props.enableScan) {
       return <ScanInput {...this.props} />;
     }
     const { enableScan, disableManualInput, ...inputProps } = this.props;
-    return <Input {...inputProps} />;
+    return <IMESafeInput {...inputProps} />;
   }
 }
 

package/src/flow/models/fields/JSEditableFieldModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ElementProxy, tExpr, createSafeDocument, createSafeWindow, createSafeNavigator } from '@nocobase/flow-engine';
+import { ElementProxy, tExpr } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Input } from 'antd';
 import { FieldModel } from '../base/FieldModel';
@@ -398,16 +398,7 @@ JSEditableFieldModel.registerFlow({
             get: () => isReadOnlyMode(ctx.model),
             cache: false,
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            {
-              window: createSafeWindow({ navigator }),
-              document: createSafeDocument(),
-              navigator,
-            },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/fields/JSFieldModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ElementProxy, tExpr, createSafeWindow, createSafeDocument, createSafeNavigator } from '@nocobase/flow-engine';
+import { ElementProxy, tExpr } from '@nocobase/flow-engine';
 import React, { useEffect } from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { resolveRunJsParams } from '../utils/resolveRunJsParams';
@@ -211,12 +211,7 @@ JSFieldModel.registerFlow({
             get: () => ctx.model.props?.value,
             cache: false,
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/fields/JSItemModel.tsx

@@ -7,14 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import {
-  ElementProxy,
-  FormItem,
-  createSafeDocument,
-  createSafeWindow,
-  createSafeNavigator,
-  tExpr,
-} from '@nocobase/flow-engine';
+import { ElementProxy, FormItem, tExpr } from '@nocobase/flow-engine';
 import React from 'react';
 import { CodeEditor } from '../../components/code-editor';
 import { CommonItemModel } from '../base/CommonItemModel';
@@ -150,12 +143,7 @@ ctx.render(<JsItem />);
           ctx.defineProperty('element', {
             get: () => new ElementProxy(element),
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/fields/SelectFieldModel.tsx

@@ -15,17 +15,20 @@ import { MobileSelect } from './mobile-components/MobileSelect';
 import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
-  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
+  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, model.translate) || [];
   if (fromEnum.length > 0) {
     return fromEnum.map((option) => ({ ...option }));
   }
   const current = Array.isArray(model.props.options) ? model.props.options : [];
-  return current.map((option) => ({ ...option }));
+  return current.map((option) => ({
+    ...option,
+    label: translateOptionLabel(option.label, model.translate),
+  }));
 };
-
 export class SelectFieldModel extends FieldModel {
   render() {
     const fallbackOptions = getOriginalEnumOptions(this);
+
     const options = this.props.options?.map((v) => {
       return {
         ...v,
@@ -46,7 +49,6 @@ export class SelectFieldModel extends FieldModel {
     if (this.context.isMobileLayout) {
       return <MobileSelect {...this.props} options={options} displayValue={value} />;
     }
-
     return (
       <Select
         {...this.props}

package/src/flow/models/fields/TextareaFieldModel.tsx

@@ -8,15 +8,84 @@
  */
 
 import { Input } from 'antd';
-import React from 'react';
-import _ from 'lodash';
+import type { TextAreaProps } from 'antd/es/input';
+import React, { useEffect, useRef, useState } from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
 import { FieldModel } from '../base/FieldModel';
 
+function IMESafeTextArea(props: TextAreaProps) {
+  const { value, onChange, onCompositionStart, onCompositionEnd, ...rest } = props;
+  const [textAreaValue, setTextAreaValue] = useState<TextAreaProps['value']>(() => normalizeTextAreaValue(value));
+  const textAreaValueRef = useRef<TextAreaProps['value']>(textAreaValue);
+  const pendingLocalValuesRef = useRef<TextAreaProps['value'][]>([]);
+
+  useEffect(() => {
+    const nextValue = normalizeTextAreaValue(value);
+    const pendingValues = pendingLocalValuesRef.current;
+    const pendingIndex = pendingValues.findIndex((item) => Object.is(item, nextValue));
+
+    if (pendingIndex >= 0) {
+      pendingValues.splice(0, pendingIndex + 1);
+      if (!Object.is(textAreaValueRef.current, nextValue)) {
+        return;
+      }
+    }
+
+    pendingValues.length = 0;
+    if (Object.is(textAreaValueRef.current, nextValue)) {
+      return;
+    }
+
+    textAreaValueRef.current = nextValue;
+    setTextAreaValue(nextValue);
+  }, [value]);
+
+  const getEventValue = (event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>) =>
+    event.currentTarget.value;
+
+  const recordLocalValue = (
+    event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>,
+  ) => {
+    const nextValue = getEventValue(event);
+    const pendingValues = pendingLocalValuesRef.current;
+    pendingValues.push(nextValue);
+    if (pendingValues.length > 20) {
+      pendingValues.shift();
+    }
+    textAreaValueRef.current = nextValue;
+    setTextAreaValue(nextValue);
+  };
+
+  return (
+    <Input.TextArea
+      {...rest}
+      value={textAreaValue}
+      onChange={(event) => {
+        recordLocalValue(event);
+        onChange?.(event);
+      }}
+      onCompositionStart={(event) => {
+        recordLocalValue(event);
+        onCompositionStart?.(event);
+      }}
+      onCompositionEnd={(event) => {
+        recordLocalValue(event);
+        onCompositionEnd?.(event);
+      }}
+    />
+  );
+}
+
+function normalizeTextAreaValue(nextValue: unknown): TextAreaProps['value'] {
+  if (typeof nextValue === 'bigint') return String(nextValue);
+  if (nextValue == null) return '';
+  return nextValue as TextAreaProps['value'];
+}
+
 @largeField()
 export class TextareaFieldModel extends FieldModel {
   render() {
-    return <Input.TextArea {...this.props} />;
+    return <IMESafeTextArea {...this.props} />;
   }
 }
 

package/src/flow/models/fields/VariableFieldFormModel.tsx

@@ -48,12 +48,12 @@ export class VariableFieldFormModel extends FlowModel {
       <FormProvider form={this.form}>
         <FormLayout layout={'vertical'}>
           {this.mapSubModels('fields', (field) => {
-            // 确保字段模型具备稳定的 id/name，便于依赖路径的组件（如公式字段）正确解析
+            // Avoid conflicting with the DOM nodeName property when rendering the temporary input.
             const init = field?.getStepParams?.('fieldSettings', 'init') || {};
             const fp = init?.fieldPath as string | undefined;
             if (fp) {
-              const namePath = fp.includes('.') ? fp.split('.') : [fp];
-              const toSet: any = {};
+              const namePath = (fp === 'nodeName' ? '__nb_variable_field_nodeName' : fp).split('.');
+              const toSet: Record<string, unknown> = {};
               if (!field?.props?.id) toSet.id = namePath;
               if (!field?.props?.name) toSet.name = namePath;
               if (Object.keys(toSet).length) field?.setProps?.(toSet);

package/src/flow/models/fields/__tests__/DisplayDateTimeFieldModel.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { DisplayDateTimeFieldModel } from '../DisplayDateTimeFieldModel';
+
+describe('DisplayDateTimeFieldModel', () => {
+  it('uses dateFormat, showTime, and timeFormat when rendering read pretty datetime text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15 13:05:06')).toBeInTheDocument();
+  });
+
+  it('does not reuse a time-only format when rendering datetime text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-stale-time-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        format: 'HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15 13:05:06')).toBeInTheDocument();
+    expect(screen.queryByText('13:05:06')).not.toBeInTheDocument();
+  });
+
+  it('keeps an existing complete datetime format when no split format props are configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-complete-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        format: 'YYYY/MM/DD HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026/06/15 13:05:06')).toBeInTheDocument();
+  });
+
+  it('renders only the date for date-only fields even when a datetime format remains', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-date-only',
+      props: {
+        value: '2026-06-15 13:05:06',
+        dateOnly: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: false,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15')).toBeInTheDocument();
+    expect(screen.queryByText('2026-06-15 13:05:06')).not.toBeInTheDocument();
+  });
+});

package/src/flow/models/fields/__tests__/InputFieldModel.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { FlowEngine } from '@nocobase/flow-engine';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { InputFieldModel } from '../InputFieldModel';
@@ -43,6 +43,122 @@ describe('InputFieldModel', () => {
     consoleError.mockRestore();
   });
 
+  it('keeps IME composition text visible before the parent value is committed', () => {
+    const onChange = vi.fn();
+    const onCompositionStart = vi.fn();
+    const onCompositionEnd = vi.fn();
+    const model = createInputFieldModel({
+      value: '',
+      onChange,
+      onCompositionStart,
+      onCompositionEnd,
+    });
+
+    render(<>{model.render()}</>);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 'ni' }, nativeEvent: { isComposing: true } });
+
+    expect(input.value).toBe('ni');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onCompositionStart).toHaveBeenCalledTimes(1);
+
+    fireEvent.compositionEnd(input, { target: { value: '你' } });
+
+    expect(input.value).toBe('你');
+    expect(onCompositionEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns to the committed parent value after IME composition is submitted', () => {
+    const onChange = vi.fn();
+    const onCompositionEnd = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+        onCompositionEnd,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 'ni' }, nativeEvent: { isComposing: true } });
+    fireEvent.compositionEnd(input, { target: { value: '你' } });
+
+    expect(input.value).toBe('你');
+
+    rerender(<>{createModel('你').render()}</>);
+
+    expect(input.value).toBe('你');
+  });
+
+  it('does not overwrite in-progress DOM input with a stale parent value', async () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'té' } });
+    rerender(<>{createModel('').render()}</>);
+
+    expect(input.value).toBe('té');
+
+    rerender(<>{createModel('reset').render()}</>);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('reset');
+    });
+  });
+
+  it('keeps replacement-style Vietnamese IME edits in the DOM', () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'te' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(input.value).toBe('te');
+
+    fireEvent.change(input, { target: { value: 'té' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(input.value).toBe('té');
+
+    fireEvent.change(input, { target: { value: 'tét' } });
+    rerender(<>{createModel('té').render()}</>);
+    expect(input.value).toBe('tét');
+  });
+
+  it('does not overwrite local replacement edit when parent advances to an older value', () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'té' } });
+    rerender(<>{createModel('t').render()}</>);
+
+    expect(input.value).toBe('té');
+  });
+
   it('renders ScanInput when scan input is enabled', () => {
     const model = createInputFieldModel({ enableScan: true });
 

package/src/flow/models/fields/__tests__/SelectFieldModel.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { SelectFieldModel } from '../SelectFieldModel';
+
+function mockT(text: string) {
+  if (text === '{{t("Yes")}}') return '是';
+  if (text === '{{t("No")}}') return '否';
+  return text;
+}
+
+describe('SelectFieldModel', () => {
+  it('translates enum fallback labels for selected values', () => {
+    const model = {
+      props: {
+        value: true,
+      },
+      context: {
+        collectionField: {
+          uiSchema: {
+            enum: [
+              { label: '{{t("Yes")}}', value: true },
+              { label: '{{t("No")}}', value: false },
+            ],
+          },
+        },
+      },
+      translate: mockT,
+    } as unknown as SelectFieldModel;
+
+    const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+    expect(element.props.value).toEqual({ label: '是', value: true });
+  });
+});

package/src/flow/models/fields/__tests__/TextareaFieldModel.test.tsx

@@ -0,0 +1,131 @@
+/**
+ * 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 { FieldModelRenderer, FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { TextareaFieldModel } from '../TextareaFieldModel';
+
+function createTextareaFieldModel(props?: Record<string, unknown>) {
+  const engine = new FlowEngine();
+  return new TextareaFieldModel({
+    uid: 'textarea-field-model-test',
+    flowEngine: engine,
+    props,
+  });
+}
+
+describe('TextareaFieldModel', () => {
+  it('syncs multiline values assigned through the form renderer', async () => {
+    const flowEngine = new FlowEngine();
+    const model = createTextareaFieldModel();
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+
+    function FormHost() {
+      const [form] = Form.useForm();
+
+      React.useEffect(() => {
+        form.setFieldsValue({ address: 'aaaaaa\nbbbbbb' });
+      }, [form]);
+
+      return (
+        <FlowEngineProvider engine={flowEngine}>
+          <Form form={form}>
+            <Form.Item name="address">
+              <FieldModelRenderer model={model} />
+            </Form.Item>
+          </Form>
+        </FlowEngineProvider>
+      );
+    }
+
+    render(<FormHost />);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe('aaaaaa\nbbbbbb');
+    });
+  });
+
+  it('keeps IME composition text visible before the parent value is committed', () => {
+    const onChange = vi.fn();
+    const onCompositionStart = vi.fn();
+    const onCompositionEnd = vi.fn();
+    const model = createTextareaFieldModel({
+      value: '',
+      onChange,
+      onCompositionStart,
+      onCompositionEnd,
+    });
+
+    render(<>{model.render()}</>);
+
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
+
+    fireEvent.compositionStart(textarea);
+    fireEvent.change(textarea, { target: { value: 'ni' }, nativeEvent: { isComposing: true } });
+
+    expect(textarea.value).toBe('ni');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onCompositionStart).toHaveBeenCalledTimes(1);
+
+    fireEvent.compositionEnd(textarea, { target: { value: '你' } });
+
+    expect(textarea.value).toBe('你');
+    expect(onCompositionEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not overwrite in-progress DOM input with a stale parent value', async () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createTextareaFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: 'té' } });
+    rerender(<>{createModel('').render()}</>);
+
+    expect(textarea.value).toBe('té');
+
+    rerender(<>{createModel('reset').render()}</>);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe('reset');
+    });
+  });
+
+  it('keeps replacement-style Vietnamese IME edits in the DOM', () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createTextareaFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: 'te' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(textarea.value).toBe('te');
+
+    fireEvent.change(textarea, { target: { value: 'té' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(textarea.value).toBe('té');
+
+    fireEvent.change(textarea, { target: { value: 'tét' } });
+    rerender(<>{createModel('té').render()}</>);
+    expect(textarea.value).toBe('tét');
+  });
+});