From a857c253c955971f48ab6f835dbbf1851c3a100c Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Fri, 15 Nov 2019 18:21:50 +0800 Subject: [PATCH] fix: ie trigger input when set placeholder --- components/input/Input.jsx | 14 ++++++-------- components/input/TextArea.jsx | 12 ++++++------ components/vc-calendar/src/date/DateInput.jsx | 12 +++++------- components/vc-pagination/Options.jsx | 5 +++-- components/vc-select/Select.jsx | 7 ++++--- components/vc-time-picker/Header.jsx | 11 ++++------- components/vc-tree-select/src/SearchInput.jsx | 11 +++++++++-- components/vc-tree-select/src/Select.jsx | 1 - tests/setup.js | 2 ++ 9 files changed, 39 insertions(+), 36 deletions(-) diff --git a/components/input/Input.jsx b/components/input/Input.jsx index 24ddf1fe0..c638954dc 100644 --- a/components/input/Input.jsx +++ b/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,8 +85,7 @@ 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')) { @@ -94,9 +93,7 @@ export default { } 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) { diff --git a/components/input/TextArea.jsx b/components/input/TextArea.jsx index 4ff2c40d7..3a43f00e1 100644 --- a/components/input/TextArea.jsx +++ b/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); }, diff --git a/components/vc-calendar/src/date/DateInput.jsx b/components/vc-calendar/src/date/DateInput.jsx index 13960b63f..0183fc97c 100644 --- a/components/vc-calendar/src/date/DateInput.jsx +++ b/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; // 没有内容，合法并直接退出 diff --git a/components/vc-pagination/Options.jsx b/components/vc-pagination/Options.jsx index 9b698fc18..60d14234c 100644 --- a/components/vc-pagination/Options.jsx +++ b/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() { diff --git a/components/vc-select/Select.jsx b/components/vc-select/Select.jsx index 5faeaf9bf..ac382be38 100644 --- a/components/vc-select/Select.jsx +++ b/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 && diff --git a/components/vc-time-picker/Header.jsx b/components/vc-time-picker/Header.jsx index 1e2a7db32..8432bccc3 100644 --- a/components/vc-time-picker/Header.jsx +++ b/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, diff --git a/components/vc-tree-select/src/SearchInput.jsx b/components/vc-tree-select/src/SearchInput.jsx index fe8aab11e..ba8b81c38 100644 --- a/components/vc-tree-select/src/SearchInput.jsx +++ b/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 ( @@ -108,7 +115,7 @@ const SearchInput = { }, ], }} - onInput={onSearchInputChange} + onInput={handleInputChange} onKeydown={onSearchInputKeyDown} value={searchValue} disabled={disabled} diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx index f513e2fa8..f722aea28 100644 --- a/components/vc-tree-select/src/Select.jsx +++ b/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; diff --git a/tests/setup.js b/tests/setup.js index f7094e983..abe570e9e 100644 --- a/tests/setup.js +++ b/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) {