option:deselected and option:deselecting are not getting emitted

[closingin]

Describe the bug

Hello there! I've installed the latest version of vue-select (3.11.2, but also tried 3.11.1), and it seems like the two deselection events do not get emitted.

To Reproduce

<vue-select
    :searchable="false"
    :options="options"
    :value="value"
    :reduce="option => option.value"
    @input="$emit('input', $event)"
    @option:selected="$emit('select')"
    @option:deselected="$emit('select')" />

Expected behavior
option:deselected should get fired. As you can see in my screenshot, the two selecting and selected events do get fired, but not deselection ones (corresponding to the last input event you see). I've also tried with option:deselecting, and it also doesn't work.

Screenshots

[allanbenelli]

I have encountered the same 'problem' when using single selections. However using a multiple selection emits the two deselection events (version 3.11.2 & 3.11.1). Is that intended, that emitting the deselection events only works with multiple selections? (see line 21 in the code)

@closingin for my usecase with the single selection it is sufficient to take the emit value of @input and check if it is equal to null -> deselect.

[closingin]

@allanbenelli Yeah I made the same change as a workaround, but I felt like it was worth opening the issue, thanks for confirming the bug though!

[closingin]

After a small investigation, the problems comes from the fact that clicking on the "clear selection" button doesn't call the same method (clearSelection()) as when you deselect an option in a multiple select (deselect()). The option:deselect(ing|ed) events get only emitted in the deselect() method, and they get passed the deselected option as parameter.

I would say that technically it's not a bug, as "clearing selection" is not the same as "deselecting something". But if we have option:selected then I think that we must also have option:deselected.

This would mean adding two $emit in the clearSelection method, maybe with no parameter?

[ferrykranenburgcw]

Same issue here, at least option:deselected should be emitted when clearSelection was called or implement a new $emit like option:cleared. Now I have to implement this logic inside a watcher on a variable that works with v-model...

[ataldev]

@input="$emit('input', $event)"

How could you explain? I am not able to handle callback of @input on single selects. I am using Vue-Select 4.0.0-beta.2

[LeeDongGeon1996]

Yeah, I got the same problem.. Implementing option:cleared is a great idea.

[clwilliams8]

I'm running into a new issue. How can I fix this without overwriting the base code of the package? I tried doing:
@option:deselecting="this.$emit('optionDeselecting', $event)"
@deselect="this.$emit('optionDeselecting', $event)"

but neither are firing off the event to the parent when clicking the "X" button or Deselect button

[iwasherefirst2]

Having the same issue. I am using a select via ajax, meaning when editing a form I only have one option in my list, and then deselect does not work.

[KeionneDerousselle]

@input="$emit('input', $event)"

How could you explain? I am not able to handle callback of @input on single selects. I am using Vue-Select 4.0.0-beta.2

I'm also experiencing this issue. I cannot listen to @input events

[rizkhal]

Any idea about this issue?

Only @option:selected event works for me

[Monty9120]

Using @update:modelValue worked for me. That seems to fire both when selecting and deselecting items.

[heartforit]

I had to drill trough the back of the head, but it works (very ugly workaround i guess):

const abc = ref()
$(abc.value.$refs.clearButton).click((e) => {
  selectedOption(null)
})

<v-select ref="abc"
@search="findData"
@update:modelValue="selected"
v-model="selected"
@option:selected="selectedOption"
label="name"
:filterable="false"
:options="options"
></v-select>

[MatejLukacUP]

Using @update:modelValue worked for me. That seems to fire both when selecting and deselecting items.

WORKS, THANKS

[buraksturk]

:deselectFromDropdown="true" property worked for me

[akashdubey2211]

Update vue-select to the latest version and set :deselectFromDropdown="true" to enable deselection from the dropdown.