fix(input): forget to remove :on=$listeners of input, this may cause some native event be put into wrong handler

demo/components/inputDemo.vue

@@ -100,6 +100,7 @@ export default {
             @focus="handleFocus"
             @change="handleChange"
             @keyup="handleKeyUp"
+            @input="handleInput"
           />
           <br>
           value: {{ value }}
@@ -121,6 +122,23 @@ export default {
     return {
       value: null
     }
+  },
+  methods: {
+    handleFocus () {
+      this.$NMessage.success('focus')
+    },
+    handleBlur () {
+      this.$NMessage.success('blur')
+    },
+    handleInput (value) {
+      this.$NMessage.success('input: ' + value)
+    },
+    handleChange (value) {
+      this.$NMessage.success('change: ' + value)
+    },
+    handleKeyUp (e) {
+      this.$NMessage.success('keyup')
+    }
   }
 }
 </script></textarea>
@@ -353,6 +371,9 @@ export default {
     handleBlur () {
       this.$NMessage.success('blur')
     },
+    handleInput (value) {
+      this.$NMessage.success('input: ' + value)
+    },
     handleChange (value) {
       this.$NMessage.success('change: ' + value)
     },

demo/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.93)"
+      name="NAIVE UI (0.1.94)"
       :padding-body="false"
       :items="items"
     >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.93",
+  "version": "0.1.94",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Input/src/main.vue

@@ -7,6 +7,7 @@
     }"
   >
     <textarea
+      ref="textarea"
       class="n-input__textarea"
       :class="{
         [`n-input__textarea--${size}-size`]: true
@@ -15,11 +16,13 @@
       :placeholder="placeholder"
       :value="value"
       :disabled="disabled === true"
-      v-on="$listeners"
       @blur="handleBlur"
       @focus="handleFocus"
       @input="handleInput"
+      @change="handleChange"
       @keyup="handleKeyUp"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
     />
   </div>
   <div
@@ -30,6 +33,7 @@
     }"
   >
     <input
+      ref="input"
       :type="type"
       class="n-input__input"
       :class="{
@@ -38,13 +42,15 @@
         [`n-input__input--icon`]: icon
       }"
       :placeholder="placeholder"
-      :value="value"
       :disabled="disabled === true"
       :maxlength="maxlength"
       @blur="handleBlur"
       @focus="handleFocus"
       @input="handleInput"
+      @change="handleChange"
       @keyup="handleKeyUp"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
     >
     <div
       v-if="icon"
@@ -65,7 +71,7 @@ export default {
   },
   model: {
     prop: 'value',
-    event: 'change'
+    event: 'input'
   },
   props: {
     type: {
@@ -105,9 +111,22 @@ export default {
       default: 'false'
     }
   },
+  data () {
+    return {
+      isComposing: false
+    }
+  },
   methods: {
+    handleCompositionStart () {
+      this.isComposing = true
+    },
+    handleCompositionEnd (event) {
+      this.isComposing = false
+      this.handleInput(event)
+    },
     handleInput (e) {
-      this.$emit('change', e.target.value)
+      if (this.isComposing) return
+      this.$emit('input', e.target.value)
     },
     handleBlur (e) {
       this.$emit('blur', e)
@@ -116,7 +135,11 @@ export default {
       this.$emit('focus', e)
     },
     handleKeyUp (e) {
+      if (this.isComposing) return
       this.$emit('keyup', e)
+    },
+    handleChange (e) {
+      this.$emit('change', e.target.value)
     }
   }
 }