fix(client): fix variable textarea ime state under edge (#3458)

* fix(client): fix variable textarea ime state under edge

* test(plugin-workflow): adjust delay for typing in test case

* test(plugin-workflow): adjust delay for typing in test case

packages/core/client/src/schema-component/antd/variable/TextArea.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
-import { Input } from 'antd';
+import { Input, Space } from 'antd';
 import { cloneDeep } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import sanitizeHTML from 'sanitize-html';
@@ -308,15 +308,22 @@ export function TextArea(props) {
     if (ev.key === 'Enter') {
       ev.preventDefault();
     }
-    setIME(ev.keyCode === 229 && ![' ', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'Enter'].includes(ev.key));
-    // if (ev.key === 'Control') {
-    //   console.debug(getSelection().getRangeAt(0));
-    // }
-    // if (ev.key === 'Alt') {
-    //   console.debug(getCurrentRange(ev.currentTarget));
-    // }
   }, []);
 
+  const onCompositionStart = useCallback(function () {
+    setIME(true);
+  }, []);
+
+  const onCompositionEnd = useCallback(
+    ({ currentTarget }) => {
+      setIME(false);
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      onChange(getValue(currentTarget));
+    },
+    [onChange],
+  );
+
   const onPaste = useCallback(
     function (ev) {
       ev.preventDefault();
@@ -353,8 +360,7 @@ export function TextArea(props) {
   const disabled = props.disabled || form.disabled;
 
   return wrapSSR(
-    <Input.Group
+    <Space.Compact
-      compact
       className={cx(
         componentCls,
         hashId,
@@ -386,6 +392,8 @@ export function TextArea(props) {
         onBlur={onBlur}
         onKeyDown={onKeyDown}
         onPaste={onPaste}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
         className={cx(
           hashId,
           'ant-input',
@@ -416,7 +424,7 @@ export function TextArea(props) {
           changeOnSelect={changeOnSelect}
         />
       ) : null}
-    </Input.Group>,
+    </Space.Compact>,
   );
 }
 

packages/core/client/src/schema-component/antd/variable/VariableSelect.style.ts

@@ -9,7 +9,7 @@ const useStyles = genStyleHook('nb-variable-select', (token) => {
       '.ant-select.ant-cascader': {
         position: 'absolute',
         top: '-1px',
-        left: '-1px',
+        right: '-1px',
         minWidth: 'auto',
         width: 'calc(100% + 2px)',
         height: 'calc(100% + 2px)',

packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts

@@ -72,7 +72,7 @@ test('Collection event Add Data Trigger, determines that the trigger node single
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.lorem.words();
-  await page.keyboard.type(`=='${conditionalRightConstant}'`);
+  await page.keyboard.type(`=='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}=='${conditionalRightConstant}'`,
   );
@@ -188,7 +188,7 @@ test('Collection event Add Data Trigger, determines that the trigger node single
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.lorem.words();
-  await page.keyboard.type(`=='${conditionalRightConstant}'`);
+  await page.keyboard.type(`=='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}=='${conditionalRightConstant}'`,
   );
@@ -304,7 +304,7 @@ test('Collection event Add Data Trigger, determines that the trigger node single
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.lorem.words();
-  await page.keyboard.type(`!='${conditionalRightConstant}'`);
+  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`,
   );
@@ -420,7 +420,7 @@ test('Collection event Add Data Trigger, determines that the trigger node single
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.lorem.words();
-  await page.keyboard.type(`!='${conditionalRightConstant}'`);
+  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`,
   );
@@ -559,7 +559,7 @@ test('Collection event add data trigger, determine the trigger node integer vari
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('==');
+  await page.keyboard.type('==', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();
@@ -709,7 +709,7 @@ test('Collection event add data trigger, determine trigger node integer variable
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('==');
+  await page.keyboard.type('==', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();
@@ -849,7 +849,7 @@ test('Collection event add data trigger, determine trigger node integer variable
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('!=');
+  await page.keyboard.type('!=', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();
@@ -993,7 +993,7 @@ test('Collection event add data trigger, determine the trigger node integer vari
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.lorem.words();
-  await page.keyboard.type(`!='${conditionalRightConstant}'`);
+  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`,
   );

packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoMathEngine.test.ts

@@ -73,7 +73,7 @@ test('Collection event add data trigger, determine trigger node integer field va
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`==${conditionalRightConstant}`);
+  await page.keyboard.type(`==${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}==${conditionalRightConstant}`,
   );
@@ -189,7 +189,7 @@ test('Collection event Add Data Trigger, determines that the trigger node intege
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`==${conditionalRightConstant}`);
+  await page.keyboard.type(`==${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}==${conditionalRightConstant}`,
   );
@@ -302,7 +302,7 @@ test('Collection event Add Data Trigger, determines that the trigger node intege
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`!=${conditionalRightConstant}`);
+  await page.keyboard.type(`!=${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!=${conditionalRightConstant}`,
   );
@@ -415,7 +415,7 @@ test('Collection event add data trigger, determines that the trigger node intege
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`!=${conditionalRightConstant}`);
+  await page.keyboard.type(`!=${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!=${conditionalRightConstant}`,
   );

packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesFormulaEngine.test.ts

@@ -72,7 +72,7 @@ test('Collection event Add Data Trigger, Formula engine, determines that the tri
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.string.alphanumeric(10);
-  await page.keyboard.type(`=='${conditionalRightConstant}'`);
+  await page.keyboard.type(`=='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}=='${conditionalRightConstant}'`,
   );
@@ -154,7 +154,7 @@ test('Collection event Add Data Trigger, Formula engine, determines that the tri
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.string.alphanumeric(10);
-  await page.keyboard.type(`=='${conditionalRightConstant}'`);
+  await page.keyboard.type(`=='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}=='${conditionalRightConstant}'`,
   );
@@ -234,7 +234,7 @@ test('Collection event Add Data Trigger, Formula engine, determines that the tri
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.string.alphanumeric(10);
-  await page.keyboard.type(`!='${conditionalRightConstant}'`);
+  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`,
   );
@@ -315,7 +315,7 @@ test('Collection event Add Data Trigger, Formula engine, determines that the tri
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.string.alphanumeric(10);
-  await page.keyboard.type(`!='${conditionalRightConstant}'`);
+  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`,
   );
@@ -422,7 +422,7 @@ test('Collection event add data trigger, Formula engine, determine the trigger n
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('==');
+  await page.keyboard.type('==', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();
@@ -532,7 +532,7 @@ test('Collection event add data trigger, Formula engine, determine trigger node
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('==');
+  await page.keyboard.type('==', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();
@@ -640,7 +640,7 @@ test('Collection event add data trigger, Formula engine, determine trigger node
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('!=');
+  await page.keyboard.type('!=', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();
@@ -750,7 +750,7 @@ test('Collection event add data trigger, Formula engine, determine the trigger n
   await page.getByRole('menuitemcheckbox', { name: 'Trigger variables' }).click();
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
-  await page.keyboard.type('!=');
+  await page.keyboard.type('!=', { delay: 50 });
   await page.getByLabel('variable-button').click();
   await page.getByRole('menuitemcheckbox', { name: 'Node result' }).click();
   await page.getByRole('menuitemcheckbox', { name: preQueryRecordNodeTitle }).click();

packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesMathEngine.test.ts

@@ -73,7 +73,7 @@ test('Collection event add data trigger, Math engine, determine trigger node int
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`==${conditionalRightConstant}`);
+  await page.keyboard.type(`==${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}==${conditionalRightConstant}`,
   );
@@ -156,7 +156,7 @@ test('Collection event Add Data Trigger, Math engine, determines that the trigge
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`==${conditionalRightConstant}`);
+  await page.keyboard.type(`==${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}==${conditionalRightConstant}`,
   );
@@ -238,7 +238,7 @@ test('Collection event Add Data Trigger, Math engine, determines that the trigge
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`!=${conditionalRightConstant}`);
+  await page.keyboard.type(`!=${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!=${conditionalRightConstant}`,
   );
@@ -320,7 +320,7 @@ test('Collection event add data trigger, Math engine, determines that the trigge
   await page.getByRole('menuitemcheckbox', { name: 'Trigger data' }).click();
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.number.int();
-  await page.keyboard.type(`!=${conditionalRightConstant}`);
+  await page.keyboard.type(`!=${conditionalRightConstant}`, { delay: 50 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!=${conditionalRightConstant}`,
   );