Commit e73275329036dc772f261e52b0aa1511bfdfa17d
1 parent
47f03c54
fix select
Showing
1 changed file
with
7 additions
and
25 deletions
Show diff stats
src/components/select/select.vue
| @@ -44,8 +44,6 @@ | @@ -44,8 +44,6 @@ | ||
| 44 | @on-input-focus="isFocused = true" | 44 | @on-input-focus="isFocused = true" |
| 45 | @on-input-blur="isFocused = false" | 45 | @on-input-blur="isFocused = false" |
| 46 | @on-clear="clearSingleSelect" | 46 | @on-clear="clearSingleSelect" |
| 47 | - | ||
| 48 | - @on-keydown="handleFilterInputKeyDown" | ||
| 49 | /> | 47 | /> |
| 50 | </slot> | 48 | </slot> |
| 51 | </div> | 49 | </div> |
| @@ -266,7 +264,7 @@ | @@ -266,7 +264,7 @@ | ||
| 266 | unchangedQuery: true, | 264 | unchangedQuery: true, |
| 267 | hasExpectedValue: false, | 265 | hasExpectedValue: false, |
| 268 | preventRemoteCall: false, | 266 | preventRemoteCall: false, |
| 269 | - filterQueryKeyDown: false, // #4273 | 267 | + filterQueryChange: false, // #4273 |
| 270 | }; | 268 | }; |
| 271 | }, | 269 | }, |
| 272 | computed: { | 270 | computed: { |
| @@ -296,12 +294,6 @@ | @@ -296,12 +294,6 @@ | ||
| 296 | [`${prefixCls}-selection-focused`]: this.isFocused | 294 | [`${prefixCls}-selection-focused`]: this.isFocused |
| 297 | }; | 295 | }; |
| 298 | }, | 296 | }, |
| 299 | - queryStringMatchesSelectedOption(){ | ||
| 300 | - const selectedOptions = this.values[0]; | ||
| 301 | - if (!selectedOptions) return false; | ||
| 302 | - const [query, label] = [this.query, selectedOptions.label].map(str => (str || '').trim()); | ||
| 303 | - return !this.multiple && this.unchangedQuery && query === label; | ||
| 304 | - }, | ||
| 305 | localeNotFoundText () { | 297 | localeNotFoundText () { |
| 306 | if (typeof this.notFoundText === 'undefined') { | 298 | if (typeof this.notFoundText === 'undefined') { |
| 307 | return this.t('i.select.noMatch'); | 299 | return this.t('i.select.noMatch'); |
| @@ -368,10 +360,6 @@ | @@ -368,10 +360,6 @@ | ||
| 368 | }); | 360 | }); |
| 369 | }); | 361 | }); |
| 370 | } | 362 | } |
| 371 | - /** | ||
| 372 | - * Not sure why use hasDefaultSelected #4273 | ||
| 373 | - * */ | ||
| 374 | - let hasDefaultSelected = slotOptions.some(option => this.query === option.key); | ||
| 375 | for (let option of slotOptions) { | 363 | for (let option of slotOptions) { |
| 376 | 364 | ||
| 377 | const cOptions = option.componentOptions; | 365 | const cOptions = option.componentOptions; |
| @@ -395,7 +383,7 @@ | @@ -395,7 +383,7 @@ | ||
| 395 | if (cOptions.children.length > 0) selectOptions.push({...option}); | 383 | if (cOptions.children.length > 0) selectOptions.push({...option}); |
| 396 | } else { | 384 | } else { |
| 397 | // ignore option if not passing filter | 385 | // ignore option if not passing filter |
| 398 | - if (!hasDefaultSelected || this.filterQueryKeyDown) { | 386 | + if (this.filterQueryChange) { |
| 399 | const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option; | 387 | const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option; |
| 400 | if (!optionPassesFilter) continue; | 388 | if (!optionPassesFilter) continue; |
| 401 | } | 389 | } |
| @@ -405,8 +393,6 @@ | @@ -405,8 +393,6 @@ | ||
| 405 | } | 393 | } |
| 406 | } | 394 | } |
| 407 | 395 | ||
| 408 | - this.filterQueryKeyDown = false; | ||
| 409 | - | ||
| 410 | return selectOptions; | 396 | return selectOptions; |
| 411 | }, | 397 | }, |
| 412 | flatOptions(){ | 398 | flatOptions(){ |
| @@ -479,8 +465,6 @@ | @@ -479,8 +465,6 @@ | ||
| 479 | }, | 465 | }, |
| 480 | 466 | ||
| 481 | validateOption({children, elm, propsData}){ | 467 | validateOption({children, elm, propsData}){ |
| 482 | - if (this.queryStringMatchesSelectedOption) return true; | ||
| 483 | - | ||
| 484 | const value = propsData.value; | 468 | const value = propsData.value; |
| 485 | const label = propsData.label || ''; | 469 | const label = propsData.label || ''; |
| 486 | const textContent = (elm && elm.textContent) || (children || []).reduce((str, node) => { | 470 | const textContent = (elm && elm.textContent) || (children || []).reduce((str, node) => { |
| @@ -545,6 +529,7 @@ | @@ -545,6 +529,7 @@ | ||
| 545 | this.focusIndex = -1; | 529 | this.focusIndex = -1; |
| 546 | this.unchangedQuery = true; | 530 | this.unchangedQuery = true; |
| 547 | this.values = []; | 531 | this.values = []; |
| 532 | + this.filterQueryChange = false; | ||
| 548 | }, | 533 | }, |
| 549 | handleKeydown (e) { | 534 | handleKeydown (e) { |
| 550 | if (e.key === 'Backspace'){ | 535 | if (e.key === 'Backspace'){ |
| @@ -644,11 +629,15 @@ | @@ -644,11 +629,15 @@ | ||
| 644 | if (!this.autoComplete) this.$nextTick(() => inputField.focus()); | 629 | if (!this.autoComplete) this.$nextTick(() => inputField.focus()); |
| 645 | } | 630 | } |
| 646 | this.broadcast('Drop', 'on-update-popper'); | 631 | this.broadcast('Drop', 'on-update-popper'); |
| 632 | + setTimeout(()=>{ | ||
| 633 | + this.filterQueryChange = false; | ||
| 634 | + },500) | ||
| 647 | }, | 635 | }, |
| 648 | onQueryChange(query) { | 636 | onQueryChange(query) { |
| 649 | if (query.length > 0 && query !== this.query) this.visible = true; | 637 | if (query.length > 0 && query !== this.query) this.visible = true; |
| 650 | this.query = query; | 638 | this.query = query; |
| 651 | this.unchangedQuery = this.visible; | 639 | this.unchangedQuery = this.visible; |
| 640 | + this.filterQueryChange = true; | ||
| 652 | }, | 641 | }, |
| 653 | toggleHeaderFocus({type}){ | 642 | toggleHeaderFocus({type}){ |
| 654 | if (this.disabled) { | 643 | if (this.disabled) { |
| @@ -664,13 +653,6 @@ | @@ -664,13 +653,6 @@ | ||
| 664 | this.hasExpectedValue = true; | 653 | this.hasExpectedValue = true; |
| 665 | } | 654 | } |
| 666 | }, | 655 | }, |
| 667 | - /** | ||
| 668 | - * 下面的方法,当 filterable 时,输入内容时,标记,用于区分和直接选择而引起的 bug | ||
| 669 | - * #4273 | ||
| 670 | - * */ | ||
| 671 | - handleFilterInputKeyDown () { | ||
| 672 | - this.filterQueryKeyDown = true; | ||
| 673 | - }, | ||
| 674 | }, | 656 | }, |
| 675 | watch: { | 657 | watch: { |
| 676 | value(value){ | 658 | value(value){ |