Commit bb6d1eeb9460dc66d99e0b5a7d127ceaa9f3dff6
Committed by
GitHub
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,11 +18,17 @@ | ||
| 18 | }, | 18 | }, |
| 19 | }, | 19 | }, |
| 20 | functional: true, | 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 | return props.options; | 32 | return props.options; |
| 27 | } | 33 | } |
| 28 | }; | 34 | }; |
src/components/select/select.vue
| @@ -356,14 +356,12 @@ | @@ -356,14 +356,12 @@ | ||
| 356 | }); | 356 | }); |
| 357 | }); | 357 | }); |
| 358 | } | 358 | } |
| 359 | - let hasDefaultSelected = slotOptions.some(option => this.query === option.key); | ||
| 360 | for (let option of slotOptions) { | 359 | for (let option of slotOptions) { |
| 361 | 360 | ||
| 362 | const cOptions = option.componentOptions; | 361 | const cOptions = option.componentOptions; |
| 363 | if (!cOptions) continue; | 362 | if (!cOptions) continue; |
| 364 | if (cOptions.tag.match(optionGroupRegexp)){ | 363 | if (cOptions.tag.match(optionGroupRegexp)){ |
| 365 | let children = cOptions.children; | 364 | let children = cOptions.children; |
| 366 | - | ||
| 367 | // remove filtered children | 365 | // remove filtered children |
| 368 | if (this.filterable){ | 366 | if (this.filterable){ |
| 369 | children = children.filter( | 367 | children = children.filter( |
| @@ -380,11 +378,8 @@ | @@ -380,11 +378,8 @@ | ||
| 380 | if (cOptions.children.length > 0) selectOptions.push({...option}); | 378 | if (cOptions.children.length > 0) selectOptions.push({...option}); |
| 381 | } else { | 379 | } else { |
| 382 | // ignore option if not passing filter | 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 | optionCounter = optionCounter + 1; | 383 | optionCounter = optionCounter + 1; |
| 389 | selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex)); | 384 | selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex)); |
| 390 | } | 385 | } |
| @@ -641,6 +636,9 @@ | @@ -641,6 +636,9 @@ | ||
| 641 | }, | 636 | }, |
| 642 | updateSlotOptions(){ | 637 | updateSlotOptions(){ |
| 643 | this.slotOptions = this.$slots.default; | 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 | checkUpdateStatus() { | 643 | checkUpdateStatus() { |
| 646 | if (this.getInitialValue().length > 0 && this.selectOptions.length === 0) { | 644 | if (this.getInitialValue().length > 0 && this.selectOptions.length === 0) { |