feat: input not trigger input event when chinese not complete #1281

Author: tangjinzhou

components/input/Input.jsx

@@ -124,6 +124,7 @@ export default {
     },
 
     handleChange(e) {
+      if (e.target.composing) return;
       this.setValue(e.target.value, e);
     },
 
@@ -237,6 +238,7 @@ export default {
       ]);
       const { stateValue, getInputClassName, handleKeyDown, handleChange, $listeners } = this;
       const inputProps = {
+        directives: [{ name: 'ant-input' }],
         domProps: {
           value: fixControlledValue(stateValue),
         },
@@ -251,7 +253,6 @@ export default {
         ref: 'input',
         key: 'ant-input',
       };
-      inputProps.directives = [{ name: 'ant-input' }];
       return this.renderLabeledIcon(prefixCls, <input {...inputProps} />);
     },
   },
@@ -263,8 +264,9 @@ export default {
         attrs: this.$attrs,
         on: {
           ...$listeners,
-          change: this.handleChange,
+          input: this.handleChange,
           keydown: this.handleKeyDown,
+          change: noop,
         },
         directives: [
           {

components/input/TextArea.jsx

@@ -116,6 +116,7 @@ export default {
     },
 
     handleTextareaChange(e) {
+      if (e.target.composing) return;
       if (!hasProp(this, 'value')) {
         this.stateValue = e.target.value;
         this.resizeTextarea();
@@ -163,6 +164,7 @@ export default {
     });
 
     const textareaProps = {
+      directives: [{ name: 'ant-input' }],
       attrs: { ...otherProps, ...$attrs },
       on: {
         ...$listeners,
@@ -171,9 +173,6 @@ export default {
         change: noop,
       },
     };
-    if ($listeners['change.value']) {
-      textareaProps.directives = [{ name: 'ant-input' }];
-    }
     return (
       <textarea
         {...textareaProps}

components/vc-calendar/src/date/DateInput.jsx

@@ -82,6 +82,7 @@ const DateInput = {
       this.__emit('clear', null);
     },
     onInputChange(event) {
+      if (event.target.composing) return;
       const str = event.target.value;
       // https://github.com/vueComponent/ant-design-vue/issues/92
       if (isIE && !isIE9 && this.str === str) {

components/vc-pagination/Options.jsx

@@ -32,6 +32,7 @@ export default {
       return `${opt.value} ${this.locale.items_per_page}`;
     },
     handleChange(e) {
+      if (e.target.composing) return;
       this.setState({
         goInputText: e.target.value,
       });
@@ -126,7 +127,7 @@ export default {
             disabled={disabled}
             type="text"
             value={goInputText}
-            onChange={this.handleChange}
+            onInput={this.handleChange}
             onKeyup={this.go}
             onBlur={this.handleBlur}
             {...{

components/vc-pagination/Pagination.jsx

@@ -171,6 +171,7 @@ export default {
       }
     },
     handleKeyUp(e) {
+      if (e.target.composing) return;
       const value = this.getValidValue(e);
       const stateCurrentInputValue = this.stateCurrentInputValue;
 

components/vc-select/Select.jsx

@@ -303,6 +303,7 @@ const Select = {
     },
 
     onInputChange(event) {
+      if (event.target.composing) return;
       const { tokenSeparators } = this.$props;
       const val = event.target.value;
       if (

components/vc-time-picker/Header.jsx

@@ -63,6 +63,7 @@ const Header = {
 
   methods: {
     onInputChange(event) {
+      if (event.target.composing) return;
       const str = event.target.value;
       // https://github.com/vueComponent/ant-design-vue/issues/92
       if (isIE && !isIE9 && this.str === str) {

components/vc-time-picker/TimePicker.jsx

@@ -377,13 +377,6 @@ export default {
             autoFocus={autoFocus}
             readOnly={!!inputReadOnly}
             id={id}
-            {...{
-              directives: [
-                {
-                  name: 'ant-input',
-                },
-              ],
-            }}
           />
           {inputIcon || <span class={`${prefixCls}-icon`} />}
           {this.renderClearButton()}

components/vc-tree-select/src/Select.jsx

@@ -789,7 +789,9 @@ const Select = {
       this.setOpenState(open, true);
     },
 
-    onSearchInputChange({ target: { value } }) {
+    onSearchInputChange(event) {
+      if (event.target.composing) return;
+      const value = event.target.value;
       const { _treeNodes: treeNodes, _valueEntities: valueEntities } = this.$data;
       const { filterTreeNode, treeNodeFilterProp } = this.$props;
       this.__emit('update:searchValue', value);