fix: ie trigger input when set placeholder

pull/1431/head
tanjinzhou 2019-11-15 18:21:50 +08:00
parent 6c05e25f23
commit a857c253c9
9 changed files with 39 additions and 36 deletions

View File

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

View File

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

View File

@ -81,13 +81,11 @@ const DateInput = {
}); });
this.__emit('clear', null); this.__emit('clear', null);
}, },
onInputChange(event) { onInputChange(e) {
if (event.target.composing) return; const { value: str, composing } = e.target;
const str = event.target.value; const { str: oldStr = '' } = this;
// https://github.com/vueComponent/ant-design-vue/issues/92 if (composing || oldStr === str) return;
if (isIE && !isIE9 && this.str === str) {
return;
}
const { disabledDate, format, selectedValue } = this.$props; const { disabledDate, format, selectedValue } = this.$props;
// 退 // 退

View File

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

View File

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

View File

@ -62,13 +62,10 @@ const Header = {
}, },
methods: { methods: {
onInputChange(event) { onInputChange(e) {
if (event.target.composing) return; const { value: str, composing } = e.target;
const str = event.target.value; const { str: oldStr = '' } = this;
// https://github.com/vueComponent/ant-design-vue/issues/92 if (composing || oldStr === str) return;
if (isIE && !isIE9 && this.str === str) {
return;
}
this.setState({ this.setState({
str, str,

View File

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

View File

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

View File

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