[Bug Report] Select option's list is not closing on click (on clicking icon also) when set to multiple and filterable

[akki-jat]

Element UI version

2.3.7

OS/Browsers version

Windows 7 / Chrome 66.0.3359.139

Vue version

2.5.11

Reproduction Link

https://codepen.io/akki-jat/pen/GdEYyG

Steps to reproduce

Open it then try to close it by clicking on select element

What is Expected?

Select option's list should be closed

What is actually happening?

Select option's list is not closing

[akki-jat]

Hey @Leopoldthecoder, what about this, is it suppose to work like that?

[leslieSie]

I think you should remove the property of filterable or change another version,version on 2.3.9 fixed this problem

[leslieSie]

@Leopoldthecoder dalao close this problem

[akki-jat]

Hi @leslieSie, I need the filter functionality and this issue is not solved either in 2.3.9 or 2.4.0.
In new version, on pc it is closed only first time and second time it does not close & on mobile it even not closes first time.

And I updated codepen's element-ui to 2.3.9 for the same. If you want to replicate the issue

[wacky6]

The problem is that if you want filterable, there will be an input where you type things. Clicking on select's text area will focus the input, thus preventing dropdown from closing (because the component is expecting user to input something).

Suppose dropdown is closed as you requested, imagine the scenario where user is selecting inputted text with mouse, which triggers click thus closes the dropdown. I doubt this is an appropriate behavior for user-interaction.

If you do really need to do so, you can listen on native click event on select, then modify select's internal state.

---

The arrow (caret) implementation seems buggy now. I suppose you are talking about clicking that button fails to close dropdown?

[akki-jat]

Hi @wacky6, I also thought that.
But in example on website, it is working fine.

Take a look

http://element.eleme.io/#/en-US/component/select#option-filtering

[wacky6]

Well, in your case multiple is also used. My guess would be multiple somehow interferes with caret's click handler.

[akki-jat]

Yes, you are right @wacky6.

[tripflex]

For those coming here wondering how to CLOSE the dropdown when using multiple on a select element (since it stays open by default) when someone selects a value, add a ref to the el-select item, then on @change method call that ref with the blur() method:

Like this:

<el-select ref="mySelectRef" v-model="myModel" multiple="multiple" @change="$refs.mySelectRef.blur()">
...
</el-select>