stale[bot]
commented
2 years ago This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Element UI version
2.13.0
OS/Browsers version
Windows 10 / Chrome 78
Vue version
2.5.17
Reproduction Link
Https://jsfiddle.net/fy0739nq/1/
Steps to reproduce
When el-select has a filterable attribute, after clicking the stretch button on the right to expand the drop-down list, then clicking the collapse button cannot collapse the drop-down list.
What is Expected?
Click the arrow to expand and collapse the drop-down list.
What is actually happening?
Clicking the arrow can only expand the drop-down list, and cannot collapse the drop-down list.
I found in the select.vue file that clicking the select drop-down button with the filterable property first triggers the toggleMenu method. In this method, the visible property is switched, that is, the drop-down button is switched to the collapse button, and then the handleFocus method is executed. If filterable is true The method will set the menuVisibleOnFocus property to true, and then click the collapse button to execute the toggleMenu method. When the menuVisibleOnFocus is true, the visible property will not be switched. Clicking the collapse button will have no response. Now I try to comment out the code for special handling of filterable in the handleFocus method, click the collapse button, and the drop-down list can be collapsed normally. The toggleMenu method and handleFocus method are as follows： toggleMenu() { if (!this.selectDisabled) { if (this.menuVisibleOnFocus) { this.menuVisibleOnFocus = false; } else { this.visible = !this.visible; } if (this.visible) { (this.$refs.input || this.$refs.reference).focus(); } } }, handleFocus(event) { if (!this.softFocus) { if (this.automaticDropdown || this.filterable) { this.visible = true; // if (this.filterable) { // this.menuVisibleOnFocus = true; // } } this.$emit('focus', event); } else { this.softFocus = false; } },