fix: ie trigger input when set placeholder

Author: tangjinzhou

components/input/Input.jsx

@@ -38,7 +38,7 @@ export default {
     configProvider: { default: () => ConfigConsumerProps },
   },
   data() {
-    const { value, defaultValue } = this.$props;
+    const { value = '', defaultValue = '' } = this.$props;
     return {
       stateValue: !hasProp(this, 'value') ? defaultValue : value,
     };
@@ -85,18 +85,15 @@ export default {
     },
 
     setValue(value, e) {
-      // https://github.com/vueComponent/ant-design-vue/issues/92
-      if (isIE && !isIE9 && this.stateValue === value) {
+      if (this.stateValue === value) {
         return;
       }
       if (!hasProp(this, 'value')) {
         this.stateValue = value;
       } else {
         this.$forceUpdate();
       }
-      if (!e.target.composing) {
-        this.$emit('change.value', value);
-      }
+      this.$emit('change.value', value);
       let event = e;
       if (e.type === 'click' && this.$refs.input) {
         // click clear icon
@@ -124,8 +121,9 @@ export default {
     },
 
     handleChange(e) {
-      if (e.target.composing) return;
-      this.setValue(e.target.value, e);
+      const { value, composing } = e.target;
+      if (composing || this.stateValue === value) return;
+      this.setValue(value, e);
     },
 
     renderClearIcon(prefixCls) {

components/input/TextArea.jsx

@@ -42,7 +42,7 @@ export default {
     configProvider: { default: () => ConfigConsumerProps },
   },
   data() {
-    const { value, defaultValue } = this.$props;
+    const { value = '', defaultValue = '' } = this.$props;
     return {
       stateValue: fixControlledValue(!hasProp(this, 'value') ? defaultValue : value),
       nextFrameActionId: undefined,
@@ -116,16 +116,16 @@ export default {
     },
 
     handleTextareaChange(e) {
-      if (e.target.composing) return;
+      const { value, composing } = e.target;
+      if (composing || this.stateValue === value) return;
       if (!hasProp(this, 'value')) {
-        this.stateValue = e.target.value;
+        this.stateValue = value;
         this.resizeTextarea();
       } else {
         this.$forceUpdate();
       }
-      if (!e.target.composing) {
-        this.$emit('change.value', e.target.value);
-      }
+
+      this.$emit('change.value', value);
       this.$emit('change', e);
       this.$emit('input', e);
     },

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

@@ -81,13 +81,11 @@ 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) {
-        return;
-      }
+    onInputChange(e) {
+      const { value: str, composing } = e.target;
+      const { str: oldStr = '' } = this;
+      if (composing || oldStr === str) return;
+
       const { disabledDate, format, selectedValue } = this.$props;
 
       // 没有内容，合法并直接退出

components/vc-pagination/Options.jsx

@@ -32,9 +32,10 @@ export default {
       return `${opt.value} ${this.locale.items_per_page}`;
     },
     handleChange(e) {
-      if (e.target.composing) return;
+      const { value, composing } = e.target;
+      if (composing || this.goInputText === value) return;
       this.setState({
-        goInputText: e.target.value,
+        goInputText: value,
       });
     },
     handleBlur() {

components/vc-select/Select.jsx

@@ -302,10 +302,11 @@ const Select = {
       return value;
     },
 
-    onInputChange(event) {
-      if (event.target.composing) return;
+    onInputChange(e) {
+      const { value: val, composing } = e.target;
+      const { _inputValue = '' } = this;
+      if (composing || _inputValue === val) return;
       const { tokenSeparators } = this.$props;
-      const val = event.target.value;
       if (
         isMultipleOrTags(this.$props) &&
         tokenSeparators.length &&

components/vc-time-picker/Header.jsx

@@ -62,13 +62,10 @@ 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) {
-        return;
-      }
+    onInputChange(e) {
+      const { value: str, composing } = e.target;
+      const { str: oldStr = '' } = this;
+      if (composing || oldStr === str) return;
 
       this.setState({
         str,

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

@@ -86,12 +86,19 @@ const SearchInput = {
         this.inputRef.current.blur();
       }
     },
+    handleInputChange(e) {
+      const { value, composing } = e.target;
+      const { searchValue = '' } = this;
+      if (composing || searchValue === value) return;
+      this.vcTreeSelect.onSearchInputChange(e);
+    },
   },
 
   render() {
     const { searchValue, prefixCls, disabled, renderPlaceholder, open, ariaId } = this.$props;
     const {
-      vcTreeSelect: { onSearchInputChange, onSearchInputKeyDown },
+      vcTreeSelect: { onSearchInputKeyDown },
+      handleInputChange,
     } = this;
     return (
       <span class={`${prefixCls}-search__field__wrap`}>
@@ -108,7 +115,7 @@ const SearchInput = {
               },
             ],
           }}
-          onInput={onSearchInputChange}
+          onInput={handleInputChange}
           onKeydown={onSearchInputKeyDown}
           value={searchValue}
           disabled={disabled}

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

@@ -790,7 +790,6 @@ const Select = {
     },
 
     onSearchInputChange(event) {
-      if (event.target.composing) return;
       const value = event.target.value;
       const { _treeNodes: treeNodes, _valueEntities: valueEntities } = this.$data;
       const { filterTreeNode, treeNodeFilterProp } = this.$props;

tests/setup.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import Base from '../components/base';
 // Vue.config.silent = true
 
 /* eslint-disable global-require */
@@ -25,6 +26,7 @@ const mockMath = Object.create(global.Math);
 mockMath.random = () => 0.5;
 global.Math = mockMath;
 
+Vue.use(Base);
 Vue.component('transition-group', {
   props: ['tag'],
   render(createElement) {