ElemeFE / ElemeFE/element

[Bug Report] Invalid collapse button in select with filterable attribute

Open
#18,772 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### 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;
}
},

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.