Show ‘3 items selected’ instead of the actual 3 tags

[unitedworx]

Is your feature request related to a problem? Please describe. The problem is that when you have a search box which includes several drop downs you need to make sure the layout does not break and Vue-select will NOT grow in height to fit all the selected items/tags.

Describe the solution you'd like The perfect solution is to show the number of items selected istead on the actual tags while also showing the clear icon of the right to clear all options. Or even better a slot allowing us to control how the selected tags are rendered.

Describe alternatives you've considered snapappointments/bootstrap-select

Additional context

[andreasvirkus]

Huge +1 for this! Also, I think this is heavily linked to https://github.com/sagalbot/vue-select/issues/894

[unitedworx]

@andreasvirkus thanks for the +1 :)

P.S I have found that element ui multiselect has this functionality built in if you need this functionality yesterday! Although it uses tags as well you can collapse them to a text by using collapse-tags attribute. A good example for vue-select to follow imho

[jcargilo]

While @andreasvirkus's solution works quite nicely, I also found that by providing another slot for the wrapper at https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L10 and passing along the selectedValue prop to obtain the current items is a super light change that would allow for other scenarios as well that I thought I'd share since this issue helped me a great deal.

<slot class="vs__selected-options" ref="selectedOptions" name="selected-options" :selectedValue="selectedValue">

...allowed me to define whatever custom header was desired for the currently selected option(s):

<template #selected-options="{ selectedValue }" v-if="selected">
    <template v-if="selected.length < 3">
        <span class="vs__selected" v-for="option in selectedValue" :key="option.value">
            {{ option.label }}
        </span>
    </template>
    <span v-else>{{ selected.length }} items selected</span>
</template>

[Stalinko]

Is this still pending? I'm so disappointed. Such good widget doesn't support such obvious option and there is no way to implement this somehow :( It would be logical to have a slot for "selected tags" and let the user control how it is rendered. So sad to refuse from this cool widget because of it's strict limitations.

[andreasvirkus]

@Stalinko feel free to use our fork for now http://github.com/klausapp/vue-select, until https://github.com/sagalbot/vue-select/pull/1036 gets merged 🤞

[chrissyast]

@jcargilo Is selected-options a typo? Nothing happens with options for me. With selected-option I get X tags each saying "X items selected".

[jcargilo]

https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L10

Sorry @chrissyast - Just saw this. It's not a typo, I have a fork where I added a selected-options slot so that I could define this myself.

Check out my fork here for an example of what I was referring to: https://github.com/jcargilo/vue-select/blob/3.x/src/components/Select.vue#L11-L26