drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bug fixed #6357

Browse source 
optimize when use select filterable,
Option cannot selected
This commit is contained in:
mo.duan 2019-11-12 12:29:35 +08:00
parent 1a98ac1a97
commit 78e96edfdf
2 changed files with 42 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/routers/select.vue
View file

@ -51,6 +51,12 @@
}, },
test:'', test:'',
list:[{ list:[{
name:"测试测试2",
value:1
},{
name:"dddddd",
value:2
},{
name:"测试测试", name:"测试测试",
value:8 value:8
},{ },{

59
src/components/select/select.vue
View file

@ -286,6 +286,8 @@
hasExpectedValue: false, hasExpectedValue: false,
preventRemoteCall: false, preventRemoteCall: false,
filterQueryChange: false, // #4273 filterQueryChange: false, // #4273
// #6349
hideMenuTimer: null
}; };
}, },
computed: { computed: {
@ -410,9 +412,8 @@
const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option; const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option;
if (!optionPassesFilter) continue; if (!optionPassesFilter) continue;
} }
optionCounter = optionCounter + 1; optionCounter = optionCounter + 1;
selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex)); selectOptions.push(this.processOption(option, selectedValues, this.focusIndex === optionCounter));
} }
} }
@ -472,7 +473,6 @@
const optionValue = option.componentOptions.propsData.value; const optionValue = option.componentOptions.propsData.value;
const disabled = option.componentOptions.propsData.disabled; const disabled = option.componentOptions.propsData.disabled;
const isSelected = values.includes(optionValue); const isSelected = values.includes(optionValue);
const propsData = { const propsData = {
...option.componentOptions.propsData, ...option.componentOptions.propsData,
selected: isSelected, selected: isSelected,
@ -497,12 +497,11 @@
}, '') || ''; }, '') || '';
const stringValues = [label, textContent]; const stringValues = [label, textContent];
const query = this.query.toLowerCase().trim(); const query = this.query.toLowerCase().trim();
for (let i = 0; i < stringValues.length; ++i) { const findValuesIndex = stringValues.findIndex(item=>{
if (stringValues[i].toLowerCase().includes(query)) { let itemToLowerCase = item.toLowerCase();
return true; return itemToLowerCase.includes(query);
} });
} return findValuesIndex === -1 ? false : true;
return false;
}, },
toggleMenu (e, force) { toggleMenu (e, force) {
@ -516,9 +515,24 @@
this.broadcast('Drop', 'on-update-popper'); this.broadcast('Drop', 'on-update-popper');
} }
}, },
updateFocusIndex(){
this.focusIndex = this.flatOptions.findIndex((opt) => {
if (!opt || !opt.componentOptions) return false;
return opt.componentOptions.propsData.value === this.publicValue;
});
},
hideMenu () { hideMenu () {
this.toggleMenu(null, false); this.toggleMenu(null, false);
setTimeout(() => this.unchangedQuery = true, ANIMATION_TIMEOUT); setTimeout(() =>{
this.unchangedQuery = true;
// resolve if we use filterable, dropItem not selected #6349
if(this.filterable){
this.hideMenuTimer = setTimeout(()=>{
this.updateFocusIndex();
this.hideMenuTimer = null;
});
}
}, ANIMATION_TIMEOUT);
}, },
onClickOutside(event){ onClickOutside(event){
if (this.visible) { if (this.visible) {
@ -636,7 +650,6 @@
}, },
onOptionClick(option) { onOptionClick(option) {
if (this.multiple){ if (this.multiple){
// keep the query for remote select // keep the query for remote select
if (this.remote) this.lastRemoteQuery = this.lastRemoteQuery || this.query; if (this.remote) this.lastRemoteQuery = this.lastRemoteQuery || this.query;
else this.lastRemoteQuery = ''; else this.lastRemoteQuery = '';
@ -647,7 +660,6 @@
} else { } else {
this.values = this.values.concat(option); this.values = this.values.concat(option);
} }
this.isFocused = true; // so we put back focus after clicking with mouse on option elements this.isFocused = true; // so we put back focus after clicking with mouse on option elements
} else { } else {
this.query = String(option.label).trim(); this.query = String(option.label).trim();
@ -655,12 +667,10 @@
this.lastRemoteQuery = ''; this.lastRemoteQuery = '';
this.hideMenu(); this.hideMenu();
} }
this.focusIndex = this.flatOptions.findIndex((opt) => { this.focusIndex = this.flatOptions.findIndex((opt) => {
if (!opt || !opt.componentOptions) return false; if (!opt || !opt.componentOptions) return false;
return opt.componentOptions.propsData.value === option.value; return opt.componentOptions.propsData.value === option.value;
}); });
if (this.filterable){ if (this.filterable){
const inputField = this.$el.querySelector('input[type="text"]'); const inputField = this.$el.querySelector('input[type="text"]');
if (!this.autoComplete) this.$nextTick(() => inputField.focus()); if (!this.autoComplete) this.$nextTick(() => inputField.focus());
@ -690,6 +700,9 @@
this.query = query; this.query = query;
this.unchangedQuery = this.visible; this.unchangedQuery = this.visible;
this.filterQueryChange = true; this.filterQueryChange = true;
if(this.filterable){
this.updateFocusIndex();
}
}, },
toggleHeaderFocus({type}){ toggleHeaderFocus({type}){
if (this.disabled) { if (this.disabled) {
@ -709,7 +722,6 @@
watch: { watch: {
value(value){ value(value){
const {getInitialValue, getOptionData, publicValue, values} = this; const {getInitialValue, getOptionData, publicValue, values} = this;
this.checkUpdateStatus(); this.checkUpdateStatus();
if (value === '') this.values = []; if (value === '') this.values = [];
@ -777,14 +789,15 @@
const optionInstance = findChild(this, ({$options}) => { const optionInstance = findChild(this, ({$options}) => {
return $options.componentName === 'select-item' && $options.propsData.value === optionValue; return $options.componentName === 'select-item' && $options.propsData.value === optionValue;
}); });
if(optionInstance && optionInstance.$el ){
let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom; let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top; let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
if (bottomOverflowDistance > 0) { if (bottomOverflowDistance > 0) {
this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance; this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
} }
if (topOverflowDistance < 0) { if (topOverflowDistance < 0) {
this.$refs.dropdown.$el.scrollTop += topOverflowDistance; this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
}
} }
}, },
dropVisible(open){ dropVisible(open){