From 644039ba53264a8a2cee3ce563731763edbd27ee Mon Sep 17 00:00:00 2001 From: Junyi Date: Tue, 30 Jan 2024 09:34:31 +0800 Subject: [PATCH] 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 --- .../antd/variable/TextArea.tsx | 30 ++++++++++++------- .../antd/variable/VariableSelect.style.ts | 2 +- .../BranchIntoYesAndNoFormulaEngine.test.ts | 16 +++++----- .../BranchIntoYesAndNoMathEngine.test.ts | 8 ++--- .../continueWhenYesFormulaEngine.test.ts | 16 +++++----- .../continueWhenYesMathEngine.test.ts | 8 ++--- 6 files changed, 44 insertions(+), 36 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx index d888117a6..4b17afbf2 100644 --- a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx +++ b/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( - ) : null} - , + , ); } diff --git a/packages/core/client/src/schema-component/antd/variable/VariableSelect.style.ts b/packages/core/client/src/schema-component/antd/variable/VariableSelect.style.ts index 98d1de031..b1bfa32cc 100644 --- a/packages/core/client/src/schema-component/antd/variable/VariableSelect.style.ts +++ b/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)', diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts index 35e9255ac..74caa9a8e 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts +++ b/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}'`, ); diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoMathEngine.test.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoMathEngine.test.ts index 6fa9d40b2..f456e8b4e 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoMathEngine.test.ts +++ b/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}`, ); diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesFormulaEngine.test.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesFormulaEngine.test.ts index 05ec027ac..3a917faf5 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesFormulaEngine.test.ts +++ b/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(); diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesMathEngine.test.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesMathEngine.test.ts index d1233fb8b..d4947b87c 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/continueWhenYesMathEngine.test.ts +++ b/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}`, );