Allow select to navigate AutoComplete custom children
This commit is contained in:
parent
f7f65c8410
commit
06a74f9ed7
1 changed files with 42 additions and 9 deletions
|
@ -92,6 +92,20 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const findOptionsInVNode = (node) => {
|
||||||
|
const opts = node.componentOptions;
|
||||||
|
if (opts && opts.tag === 'Option') return [node];
|
||||||
|
if (!node.children) return [];
|
||||||
|
const options = node.children.reduce(
|
||||||
|
(arr, el) => [...arr, ...findOptionsInVNode(el)], []
|
||||||
|
).filter(Boolean);
|
||||||
|
return options.length > 0 ? options : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractOptions = (options) => options.reduce((options, slotEntry) => {
|
||||||
|
return options.concat(findOptionsInVNode(slotEntry));
|
||||||
|
}, []);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'iSelect',
|
name: 'iSelect',
|
||||||
mixins: [ Emitter, Locale ],
|
mixins: [ Emitter, Locale ],
|
||||||
|
@ -275,16 +289,39 @@
|
||||||
},
|
},
|
||||||
selectOptions() {
|
selectOptions() {
|
||||||
const selectOptions = [];
|
const selectOptions = [];
|
||||||
|
const slotOptions = (this.slotOptions || []);
|
||||||
let optionCounter = -1;
|
let optionCounter = -1;
|
||||||
const currentIndex = this.focusIndex;
|
const currentIndex = this.focusIndex;
|
||||||
const selectedValues = this.values.map(({value}) => value);
|
const selectedValues = this.values.map(({value}) => value);
|
||||||
if (this.autoComplete) return this.slotOptions;
|
if (this.autoComplete) {
|
||||||
|
const copyChildren = (node, fn) => {
|
||||||
|
return {
|
||||||
|
...node,
|
||||||
|
children: (node.children || []).map(fn).map(child => copyChildren(child, fn))
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const autoCompleteOptions = extractOptions(slotOptions);
|
||||||
|
const selectedSlotOption = autoCompleteOptions[currentIndex];
|
||||||
|
|
||||||
for (let option of (this.slotOptions || [])) {
|
return slotOptions.map(node => copyChildren(node, (child) => {
|
||||||
|
if (child !== selectedSlotOption) return child;
|
||||||
|
return {
|
||||||
|
...child,
|
||||||
|
componentOptions: {
|
||||||
|
...child.componentOptions,
|
||||||
|
propsData: {
|
||||||
|
...child.componentOptions.propsData,
|
||||||
|
isFocused: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let option of slotOptions) {
|
||||||
|
|
||||||
const cOptions = option.componentOptions;
|
const cOptions = option.componentOptions;
|
||||||
if (!cOptions) continue;
|
if (!cOptions) continue;
|
||||||
|
|
||||||
if (cOptions.tag.match(optionGroupRegexp)){
|
if (cOptions.tag.match(optionGroupRegexp)){
|
||||||
let children = cOptions.children;
|
let children = cOptions.children;
|
||||||
|
|
||||||
|
@ -315,11 +352,7 @@
|
||||||
return selectOptions;
|
return selectOptions;
|
||||||
},
|
},
|
||||||
flatOptions(){
|
flatOptions(){
|
||||||
return this.selectOptions.reduce((options, option) => {
|
return extractOptions(this.selectOptions);
|
||||||
const isOptionGroup = option.componentOptions.tag.match(optionGroupRegexp);
|
|
||||||
if (isOptionGroup) return options.concat(option.componentOptions.children || []);
|
|
||||||
else return options.concat(option);
|
|
||||||
}, []);
|
|
||||||
},
|
},
|
||||||
selectTabindex(){
|
selectTabindex(){
|
||||||
return this.disabled || this.filterable ? -1 : 0;
|
return this.disabled || this.filterable ? -1 : 0;
|
||||||
|
@ -595,7 +628,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
focusIndex(index){
|
focusIndex(index){
|
||||||
if (index < 0) return;
|
if (index < 0 || this.autoComplete) return;
|
||||||
// update scroll
|
// update scroll
|
||||||
const optionValue = this.flatOptions[index].componentOptions.propsData.value;
|
const optionValue = this.flatOptions[index].componentOptions.propsData.value;
|
||||||
const optionInstance = findChild(this, ({$options}) => {
|
const optionInstance = findChild(this, ({$options}) => {
|
||||||
|
|
Loading…
Add table
Reference in a new issue