The selected-option-container slot has an inconsistent deselect function API

[lloydjatkinson]

selected-option-container
This is the root element where v-for="option in selectedValue". Most of the time you'll want to use selected-option, but this container is useful if you want to disable the deselect button, or have fine grain control over the markup.

option {Object} - Currently iterated selected option
deselect {Function} - Method used to deselect a given option when multiple is true
disabled {Boolean} - Determine if the component is disabled
multiple {Boolean} - If the component supports the selection of multiple values

It's not clear from the docs that the deselect function requires passing the current option, e.g. deselect(option).

I was going to make a PR to add a sentence explaining this but it raises the question of if option should even be passed to deselect. The reason I ask this is because this slot is being rendered in a v-for in the Select component, and it also has all of context for the current option:

• option is the exact option

• disabled indicates if the exact option is disabled or not

• deselect requires passing the current option

I propose instead that this function be bound from within the v-for.

Instead of:

vue-select/src/components/Select.vue

Lines 11 to 16 in 2f18243

	<slot v-for="option in selectedValue"
	name="selected-option-container"
	:option="normalizeOptionForSlot(option)"
	:deselect="deselect"
	:multiple="multiple"
	:disabled="disabled">

It would become:

        <slot v-for="option in selectedValue"
              name="selected-option-container"
              :option="normalizeOptionForSlot(option)"
              :deselect="() => deselect(option)"
              :multiple="multiple"
              :disabled="disabled">

This would then also match the existing behaviour in the existing slots default content:

vue-select/src/components/Select.vue

Lines 21 to 23 in 2f18243

	<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="vs__deselect" :title="`Deselect ${getOptionLabel(option)}`" :aria-label="`Deselect ${getOptionLabel(option)}`" ref="deselectButtons">
	<component :is="childComponents.Deselect" />
	</button>

[bkuzma]

+1 to this 🙂 Not understanding why my deselect call wasn't working led me to this issue.

[me-shaon]

@bkuzma same here. 🙂