fix select
This commit is contained in:
parent
47f03c5419
commit
e732753290
1 changed files with 7 additions and 25 deletions
|
@ -44,8 +44,6 @@
|
||||||
@on-input-focus="isFocused = true"
|
@on-input-focus="isFocused = true"
|
||||||
@on-input-blur="isFocused = false"
|
@on-input-blur="isFocused = false"
|
||||||
@on-clear="clearSingleSelect"
|
@on-clear="clearSingleSelect"
|
||||||
|
|
||||||
@on-keydown="handleFilterInputKeyDown"
|
|
||||||
/>
|
/>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -266,7 +264,7 @@
|
||||||
unchangedQuery: true,
|
unchangedQuery: true,
|
||||||
hasExpectedValue: false,
|
hasExpectedValue: false,
|
||||||
preventRemoteCall: false,
|
preventRemoteCall: false,
|
||||||
filterQueryKeyDown: false, // #4273
|
filterQueryChange: false, // #4273
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -296,12 +294,6 @@
|
||||||
[`${prefixCls}-selection-focused`]: this.isFocused
|
[`${prefixCls}-selection-focused`]: this.isFocused
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
queryStringMatchesSelectedOption(){
|
|
||||||
const selectedOptions = this.values[0];
|
|
||||||
if (!selectedOptions) return false;
|
|
||||||
const [query, label] = [this.query, selectedOptions.label].map(str => (str || '').trim());
|
|
||||||
return !this.multiple && this.unchangedQuery && query === label;
|
|
||||||
},
|
|
||||||
localeNotFoundText () {
|
localeNotFoundText () {
|
||||||
if (typeof this.notFoundText === 'undefined') {
|
if (typeof this.notFoundText === 'undefined') {
|
||||||
return this.t('i.select.noMatch');
|
return this.t('i.select.noMatch');
|
||||||
|
@ -368,10 +360,6 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* Not sure why use hasDefaultSelected #4273
|
|
||||||
* */
|
|
||||||
let hasDefaultSelected = slotOptions.some(option => this.query === option.key);
|
|
||||||
for (let option of slotOptions) {
|
for (let option of slotOptions) {
|
||||||
|
|
||||||
const cOptions = option.componentOptions;
|
const cOptions = option.componentOptions;
|
||||||
|
@ -395,7 +383,7 @@
|
||||||
if (cOptions.children.length > 0) selectOptions.push({...option});
|
if (cOptions.children.length > 0) selectOptions.push({...option});
|
||||||
} else {
|
} else {
|
||||||
// ignore option if not passing filter
|
// ignore option if not passing filter
|
||||||
if (!hasDefaultSelected || this.filterQueryKeyDown) {
|
if (this.filterQueryChange) {
|
||||||
const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option;
|
const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option;
|
||||||
if (!optionPassesFilter) continue;
|
if (!optionPassesFilter) continue;
|
||||||
}
|
}
|
||||||
|
@ -405,8 +393,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.filterQueryKeyDown = false;
|
|
||||||
|
|
||||||
return selectOptions;
|
return selectOptions;
|
||||||
},
|
},
|
||||||
flatOptions(){
|
flatOptions(){
|
||||||
|
@ -479,8 +465,6 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
validateOption({children, elm, propsData}){
|
validateOption({children, elm, propsData}){
|
||||||
if (this.queryStringMatchesSelectedOption) return true;
|
|
||||||
|
|
||||||
const value = propsData.value;
|
const value = propsData.value;
|
||||||
const label = propsData.label || '';
|
const label = propsData.label || '';
|
||||||
const textContent = (elm && elm.textContent) || (children || []).reduce((str, node) => {
|
const textContent = (elm && elm.textContent) || (children || []).reduce((str, node) => {
|
||||||
|
@ -545,6 +529,7 @@
|
||||||
this.focusIndex = -1;
|
this.focusIndex = -1;
|
||||||
this.unchangedQuery = true;
|
this.unchangedQuery = true;
|
||||||
this.values = [];
|
this.values = [];
|
||||||
|
this.filterQueryChange = false;
|
||||||
},
|
},
|
||||||
handleKeydown (e) {
|
handleKeydown (e) {
|
||||||
if (e.key === 'Backspace'){
|
if (e.key === 'Backspace'){
|
||||||
|
@ -644,11 +629,15 @@
|
||||||
if (!this.autoComplete) this.$nextTick(() => inputField.focus());
|
if (!this.autoComplete) this.$nextTick(() => inputField.focus());
|
||||||
}
|
}
|
||||||
this.broadcast('Drop', 'on-update-popper');
|
this.broadcast('Drop', 'on-update-popper');
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.filterQueryChange = false;
|
||||||
|
},500)
|
||||||
},
|
},
|
||||||
onQueryChange(query) {
|
onQueryChange(query) {
|
||||||
if (query.length > 0 && query !== this.query) this.visible = true;
|
if (query.length > 0 && query !== this.query) this.visible = true;
|
||||||
this.query = query;
|
this.query = query;
|
||||||
this.unchangedQuery = this.visible;
|
this.unchangedQuery = this.visible;
|
||||||
|
this.filterQueryChange = true;
|
||||||
},
|
},
|
||||||
toggleHeaderFocus({type}){
|
toggleHeaderFocus({type}){
|
||||||
if (this.disabled) {
|
if (this.disabled) {
|
||||||
|
@ -664,13 +653,6 @@
|
||||||
this.hasExpectedValue = true;
|
this.hasExpectedValue = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* 下面的方法,当 filterable 时,输入内容时,标记,用于区分和直接选择而引起的 bug
|
|
||||||
* #4273
|
|
||||||
* */
|
|
||||||
handleFilterInputKeyDown () {
|
|
||||||
this.filterQueryKeyDown = true;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value(value){
|
value(value){
|
||||||
|
|
Loading…
Add table
Reference in a new issue