fix(Select): native onCompositionStart onCompositionEnd fix alibaba-f…

…usion#3181
chrainbow · Jul 27, 2021 · 0b24e3a · 0b24e3a
1 parent 4416c62
commit 0b24e3a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/input/base.jsx b/src/input/base.jsx
@@ -274,7 +274,17 @@ class Base extends React.Component {
     }
 
     getProps() {
-        const { placeholder, inputStyle, disabled, readOnly, cutString, maxLength, name } = this.props;
+        const {
+            placeholder,
+            inputStyle,
+            disabled,
+            readOnly,
+            cutString,
+            maxLength,
+            name,
+            onCompositionStart,
+            onCompositionEnd,
+        } = this.props;
         const props = {
             style: inputStyle,
             placeholder,
@@ -286,6 +296,8 @@ class Base extends React.Component {
             onChange: this.onChange.bind(this),
             onBlur: this.onBlur.bind(this),
             onFocus: this.onFocus.bind(this),
+            onCompositionStart,
+            onCompositionEnd,
         };
 
         // fix accessibility：auto process status of aria disabled

diff --git a/test/input/index-spec.js b/test/input/index-spec.js
@@ -108,6 +108,26 @@ describe('input', () => {
             assert(onCompositionEnd.calledOnce);
             assert(onChange.calledOnce);
         });
+
+        it('Navitve onCompositionStart/onCompositionUpdate/onCompositionEnd events', () => {
+            const onCompositionStart = sinon.spy();
+            const onCompositionUpdate = sinon.spy();
+            const onCompositionEnd = sinon.spy();
+            const wrapper = mount(
+                <Input
+                    onCompositionStart={onCompositionStart}
+                    onCompositionUpdate={onCompositionUpdate}
+                    onCompositionEnd={onCompositionEnd}
+                />
+            );
+            wrapper.find('input').simulate('compositionstart', { target: { value: 'zh' } });
+            assert(onCompositionStart.calledOnce);
+            wrapper.find('input').simulate('compositionupdate', { target: { value: 'zhon' } });
+            assert(onCompositionUpdate.calledOnce);
+            wrapper.find('input').simulate('compositionend', { target: { value: '中' } });
+            assert(onCompositionEnd.calledOnce);
+        });
+
         it('should support onChange', done => {
             let onChange = value => {
                     assert(value === '20');