fix: select input width and placeholder Incorrect When typing Chinese #1458

Author: tangjinzhou

components/_util/antInputDirective.js

@@ -17,12 +17,15 @@ function makeMap(str, expectsLowerCase) {
 const isTextInputType = makeMap('text,number,password,search,email,tel,url');
 
 function onCompositionStart(e) {
+  e.target.originPlaceholder = e.target.placeholder;
+  e.target.placeholder = '';
   e.target.composing = true;
 }
 
 function onCompositionEnd(e) {
   // prevent triggering an input event for no reason
   if (!e.target.composing) return;
+  e.target.placeholder = e.target.originPlaceholder;
   e.target.composing = false;
   trigger(e.target, 'input');
 }

components/vc-select/Select.jsx

@@ -147,6 +147,7 @@ const Select = {
     };
     return {
       ...state,
+      _mirrorInputValue: state._inputValue, // https://github.com/vueComponent/ant-design-vue/issues/1458
       ...this.getDerivedStateFromProps(props, state),
     };
   },
@@ -167,6 +168,9 @@ const Select = {
     __propsSymbol__() {
       Object.assign(this.$data, this.getDerivedStateFromProps(getOptionProps(this), this.$data));
     },
+    '$data._inputValue': function(val) {
+      this.$data._mirrorInputValue = val;
+    },
   },
   updated() {
     this.$nextTick(() => {
@@ -305,7 +309,12 @@ const Select = {
     onInputChange(e) {
       const { value: val, composing } = e.target;
       const { _inputValue = '' } = this.$data;
-      if (composing || _inputValue === val) return;
+      if (composing || _inputValue === val) {
+        this.setState({
+          _mirrorInputValue: val,
+        });
+        return;
+      }
       const { tokenSeparators } = this.$props;
       if (
         isMultipleOrTags(this.$props) &&
@@ -606,7 +615,7 @@ const Select = {
     getPlaceholderElement() {
       const { $props: props, $data: state } = this;
       let hidden = false;
-      if (state._inputValue) {
+      if (state._mirrorInputValue) {
         hidden = true;
       }
       const value = state._value;
@@ -733,7 +742,7 @@ const Select = {
     },
     _getInputElement() {
       const props = this.$props;
-      const { _inputValue: inputValue } = this.$data;
+      const { _inputValue: inputValue, _mirrorInputValue } = this.$data;
       const attrs = getAttrs(this);
       const defaultInput = (
         <input
@@ -802,7 +811,7 @@ const Select = {
             // ref='inputMirrorRef'
             class={`${props.prefixCls}-search__field__mirror`}
           >
-            {inputValue}&nbsp;
+            {_mirrorInputValue}&nbsp;
           </span>
         </div>
       );

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

@@ -22,7 +22,16 @@ const SearchInput = {
   inject: {
     vcTreeSelect: { default: () => ({}) },
   },
-
+  data() {
+    return {
+      mirrorSearchValue: this.searchValue,
+    };
+  },
+  watch: {
+    searchValue(val) {
+      this.mirrorSearchValue = val;
+    },
+  },
   created() {
     this.inputRef = createRef();
     this.mirrorInputRef = createRef();
@@ -89,7 +98,10 @@ const SearchInput = {
     handleInputChange(e) {
       const { value, composing } = e.target;
       const { searchValue = '' } = this;
-      if (composing || searchValue === value) return;
+      if (composing || searchValue === value) {
+        this.mirrorSearchValue = value;
+        return;
+      }
       this.vcTreeSelect.onSearchInputChange(e);
     },
   },
@@ -99,6 +111,7 @@ const SearchInput = {
     const {
       vcTreeSelect: { onSearchInputKeyDown },
       handleInputChange,
+      mirrorSearchValue,
     } = this;
     return (
       <span class={`${prefixCls}-search__field__wrap`}>
@@ -136,7 +149,7 @@ const SearchInput = {
           }}
           class={`${prefixCls}-search__field__mirror`}
         >
-          {searchValue}&nbsp;
+          {mirrorSearchValue}&nbsp;
         </span>
         {renderPlaceholder ? renderPlaceholder() : null}
       </span>