Repository: arco-design/arco-design (ts)

Issue:
使用中文输入法时，选择浏览器表单建议下拉框中内容会导致表单出错
- [x] I'm sure this does not appear in [the issue list of the repository](https://github.com/arco-design/arco-design/issues)

## 基本信息 
- **依赖包名 及 版本:** @arco-design/web-react: 2.27.2
- **系统版本:** macOS Big Sur 11.6
- **浏览器版本:** 96.0.4664.110
- **复现地址:** https://vn8m7.csb.app/

## 预期结果
表单正常运行

## 复现步骤
1. 输入任意值（如 'arco'）后提交，使浏览器记忆该值
2. 清空表单或刷新页面
3. 切换至中文输入法
4. 输入 'a' 后直接选择下拉框中的值
5. 点击提交可以看到错误提示

![Jan-05-2022 16-52-18](https://user-images.githubusercontent.com/42296111/148188753-a7c1b8c5-10eb-4a58-8eda-03b72bd9abb5.gif)

<!-- generated by arco-issue. DO NOT REMOVE -->

Pull request:
fix: Input composition error
<!--
  Thanks so much for your PR and contribution.

  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design/blob/main/CONTRIBUTING.md
-->

<!-- Put an `x` in "[ ]" to check a box) -->

## Types of changes

<!-- What types of changes does this PR introduce -->
- [ ] New feature
- [x] Bug fix
- [ ] Documentation change
- [ ] Coding style change
- [ ] Component style change
- [ ] Refactoring
- [ ] Performance improvement
- [ ] Test cases
- [ ] Continuous integration
- [ ] Typescript definition change
- [ ] Breaking change
- [ ] Others 

## Background and context

<!-- Explain what problem does the PR solve -->
<!-- Link to related open issues if applicable -->

## Solution

<!-- Describe how the problem is fixed in detail -->

## How is the change tested?

<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->
<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->

## Changelog

| Component | Changelog(CN) | Changelog(EN) | Related issues |
| --------- | ------------- | ------------- | -------------- |
|     Input      |     修复 `Input` 组件在输入中文并直接选中自动补全选项时，未触发 `onChange` 的 bug。          |      Fix the bug that the `onChange` is not triggered when the `Input` component enters Chinese and selects the auto-completion option directly.         |      Close #395           |

## Checklist:

- [x] Test suite passes (`npm run test`)
- [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
- [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others should be submitted to `main` branch)

## Other information

<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->


Patch:
diff --git a/components/Input/input-element.tsx b/components/Input/input-element.tsx
index 9eb30b86..99f3467b 100644
--- a/components/Input/input-element.tsx
+++ b/components/Input/input-element.tsx
@@ -89,6 +89,7 @@ const InputComponent = React.forwardRef<RefInputType, InputComponentProps>(
     const onChange: React.ChangeEventHandler<HTMLInputElement> = (e: any) => {
       const newValue = e.target.value;
       if (!isComposition.current) {
+        compositionValue && setCompositionValue(undefined);
         if (!onValueChange) {
           return;
         }
@@ -101,6 +102,9 @@ const InputComponent = React.forwardRef<RefInputType, InputComponentProps>(
           onValueChange(newValue, e);
         }
       } else {
+        // https://github.com/arco-design/arco-design/issues/397
+        // compositionupdate => onchange
+        isComposition.current = false;
         setCompositionValue(newValue);
       }
     };
diff --git a/components/Menu/index.tsx b/components/Menu/index.tsx
index 03a9d51e..74870ad3 100644
--- a/components/Menu/index.tsx
+++ b/components/Menu/index.tsx
@@ -145,7 +145,7 @@ function Menu(baseProps: MenuProps, ref) {
   };
 
   const usedStyle = { ...style };
-  if (mergedCollapse) {
+  if (mergedCollapse && !inDropdown) {
     delete usedStyle.width;
   }
 


Test patch:
diff --git a/components/Input/__test__/index.test.tsx b/components/Input/__test__/index.test.tsx
index 97b097ca..94df0a07 100644
--- a/components/Input/__test__/index.test.tsx
+++ b/components/Input/__test__/index.test.tsx
@@ -45,6 +45,29 @@ describe('Input', () => {
     // expect(component.state().value).toBe('Hello');
   });
 
+  it('composition input', () => {
+    const onChange = jest.fn();
+    const component = mountInput(<Input onChange={onChange} />);
+    const input = component.find('input');
+    input.simulate('compositionupdate', {
+      target: {
+        value: 'aa',
+      },
+    });
+    input.simulate('change', {
+      target: {
+        value: 'bb',
+      },
+    });
+    expect(onChange.mock.calls.length).toBe(0);
+    input.simulate('change', {
+      target: {
+        value: 'bb',
+      },
+    });
+    expect(onChange.mock.calls.length).toBe(1);
+  });
+
   it('prefix, suffix, addBefore, addAfter correctly', () => {
     const component = mountInput(
       <Input