From 5c24dbdbcb17ae07664e31f2e6dfb28336ead306 Mon Sep 17 00:00:00 2001
From: WarnerHooh <Warner.Hooh@gmail.com>
Date: Fri, 13 Oct 2017 16:13:53 +0800
Subject: [PATCH] Add composition event for Input component

---
 src/Select.jsx                                | 26 +++++++++++++++----
 .../Select.multiple.spec.js.snap              |  2 ++
 tests/__snapshots__/Select.tags.spec.js.snap  |  2 ++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/Select.jsx b/src/Select.jsx
index ce0a7191c..9a3fed8f6 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -99,6 +99,7 @@ export default class Select extends React.Component {
       inputValue,
       open,
     };
+    this.isInputInComposition = false;
     this.adjustOpenState();
   }
 
@@ -153,6 +154,7 @@ export default class Select extends React.Component {
   onInputChange = event => {
     const { tokenSeparators } = this.props;
     const val = event.target.value;
+    const type = event.type;
     if (
       isMultipleOrTags(this.props) &&
       tokenSeparators &&
@@ -168,12 +170,24 @@ export default class Select extends React.Component {
     this.setState({
       open: true,
     });
+
     if (isCombobox(this.props)) {
-      this.fireChange([
-        {
-          key: val,
-        },
-      ]);
+      if (type === 'compositionend') {
+        this.isInputInComposition = false;
+        this.fireChange([
+          {
+            key: val,
+          },
+        ]);
+      } else if (type === 'change' && !this.isInputInComposition) {
+        this.fireChange([
+          {
+            key: val,
+          },
+        ]);
+      } else {
+        this.isInputInComposition = true;
+      }
     }
   };
 
@@ -540,6 +554,8 @@ export default class Select extends React.Component {
             this.onInputKeyDown,
             inputElement.props.onKeyDown
           ),
+          onCompositionStart: this.onInputChange,
+          onCompositionEnd: this.onInputChange,
           value: this.state.inputValue,
           disabled: props.disabled,
           className: inputCls,
diff --git a/tests/__snapshots__/Select.multiple.spec.js.snap b/tests/__snapshots__/Select.multiple.spec.js.snap
index 32a9b815c..85944b11d 100644
--- a/tests/__snapshots__/Select.multiple.spec.js.snap
+++ b/tests/__snapshots__/Select.multiple.spec.js.snap
@@ -106,6 +106,8 @@ exports[`Select.multiple render render animation 1`] = `
                 autoComplete="off"
                 className="rc-select-search__field"
                 onChange={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
                 onKeyDown={[Function]}
                 value=""
               />
diff --git a/tests/__snapshots__/Select.tags.spec.js.snap b/tests/__snapshots__/Select.tags.spec.js.snap
index ac5d5857b..60c11ab8d 100644
--- a/tests/__snapshots__/Select.tags.spec.js.snap
+++ b/tests/__snapshots__/Select.tags.spec.js.snap
@@ -106,6 +106,8 @@ exports[`Select.tags render render animation 1`] = `
                 autoComplete="off"
                 className="rc-select-search__field"
                 onChange={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
                 onKeyDown={[Function]}
                 value=""
               />