Commit bb6d1eeb9460dc66d99e0b5a7d127ceaa9f3dff6
Committed by
GitHub
Merge pull request #4403 from oyv1cent/fix-select
Fix select
Showing
2 changed files
with
16 additions
and
12 deletions
Show diff stats
src/components/select/functional-options.vue
... | ... | @@ -18,11 +18,17 @@ |
18 | 18 | }, |
19 | 19 | }, |
20 | 20 | functional: true, |
21 | - render(h, {props, parent}){ | |
22 | - // to detect changes in the $slot children/options we do this hack | |
23 | - // so we can trigger the parents computed properties and have everything reactive | |
24 | - // although $slot.default is not | |
25 | - if (props.slotOptions !== parent.$slots.default) props.slotUpdateHook(); | |
21 | + render(h, {props, parent}) { | |
22 | + // In order to response data changes,i do this hack. #4372 | |
23 | + if(props.slotOptions.length > 0) { | |
24 | + for(let i in props.slotOptions) { | |
25 | + if(props.slotOptions[i].key !== parent.$slots.default[i].key) { | |
26 | + props.slotUpdateHook(); | |
27 | + break; | |
28 | + } | |
29 | + } | |
30 | + } | |
31 | + if(props.slotOptions && parent.$slots.default && props.slotOptions.length !== parent.$slots.default.length) props.slotUpdateHook(); | |
26 | 32 | return props.options; |
27 | 33 | } |
28 | 34 | }; | ... | ... |
src/components/select/select.vue
... | ... | @@ -356,14 +356,12 @@ |
356 | 356 | }); |
357 | 357 | }); |
358 | 358 | } |
359 | - let hasDefaultSelected = slotOptions.some(option => this.query === option.key); | |
360 | 359 | for (let option of slotOptions) { |
361 | 360 | |
362 | 361 | const cOptions = option.componentOptions; |
363 | 362 | if (!cOptions) continue; |
364 | 363 | if (cOptions.tag.match(optionGroupRegexp)){ |
365 | 364 | let children = cOptions.children; |
366 | - | |
367 | 365 | // remove filtered children |
368 | 366 | if (this.filterable){ |
369 | 367 | children = children.filter( |
... | ... | @@ -380,11 +378,8 @@ |
380 | 378 | if (cOptions.children.length > 0) selectOptions.push({...option}); |
381 | 379 | } else { |
382 | 380 | // ignore option if not passing filter |
383 | - if (!hasDefaultSelected) { | |
384 | - const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option; | |
385 | - if (!optionPassesFilter) continue; | |
386 | - } | |
387 | - | |
381 | + const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option; | |
382 | + if (!optionPassesFilter) continue; | |
388 | 383 | optionCounter = optionCounter + 1; |
389 | 384 | selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex)); |
390 | 385 | } |
... | ... | @@ -641,6 +636,9 @@ |
641 | 636 | }, |
642 | 637 | updateSlotOptions(){ |
643 | 638 | this.slotOptions = this.$slots.default; |
639 | + // #4372 issue, i find that this.query's value affects the judgment of the validateOption method. | |
640 | + this.query = ''; | |
641 | + this.focusIndex = -1; | |
644 | 642 | }, |
645 | 643 | checkUpdateStatus() { |
646 | 644 | if (this.getInitialValue().length > 0 && this.selectOptions.length === 0) { | ... | ... |