close-on-select="false" property doesn't work in Chrome(68,69)

[kirejko]

When set close-on-select to false and searchable to true it isn't work correctly in Chrome, but works fine in the

Reproduction Link

https://jsfiddle.net/jqofkzxc/6066/

Steps to reproduce

Set :close-on-select="false" :multiple="true" :searchable="true" props.

Expected behaviour

Dropdown doesn't close on select.

Actual behaviour

Dropdown closes on select. (in Chrome)

[jasonlfunk]

This is also present on Chrome 70.

[Maadtin]

It seems that changing :searchable to false works.

[dlindahl]

No idea if this is the source of the bug or not, but when a value is selected from the list and deactivate is called, activate is immediately called due to the @focus.prevent="activate()" handler on the search input tag. If you comment out this.$refs.search.blur() in the deactivate method, it works as expected (the list is closed).

I don't think this is a particularly good "fix" for the issue, but hopefully it provides some more information as to what the source of the bug could be.

[thangnq1001]

I also got the issue when :multiple="true" and :searchable="true" (by default). When the multiselect is opening and the user clicks on selected items (the tags) or the spaces around them, @close and then @open are triggered in a short time, causing a "flicker" visual effect (clearer if the multiselect is overlapping another element). It seems the following event handlings of the search input are the cause (as @dlindahl said):

@focus.prevent="activate()"
@blur.prevent="deactivate()"

My code is using @close to handle some business logic, so this issue forces me to workaround too much. I don't want to turn off searchable or customize the code, so hope it will be fixed in the next release.

[dhavalbudhelia]

this issue exists on chrome 87

[kcsujeet]

here's a workaround:

<v-select ref="vueSelect"  @option:selected="onOptionSelected" />

 onOptionSelected: function () {
     this.$refs?.vueSelect?.$refs?.search?.focus()
},