sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.62k stars 1.33k forks source link

deselectFromDropdown not work #1670

Closed keizah7 closed 2 years ago

keizah7 commented 2 years ago

I tried hide that cross in selected option

image

It works only with css, any prop didin't help

.vs__deselect {
  display: none !important;
}
<template>
    <div>
        <div>
            <v-select
                v-model="value"
                :close-on-select="false"
                :deselect-from-dropdown="false" // not working
                :options="options"
                :placeholder="placeholder"
                multiple
            >
                <template #open-indicator="{ attributes }">
                    <span v-bind="attributes">
                        <svg class="fill-current text-black sm:w-10 sm:h-5 w-[22px] h-[11px]" height="20" width="40">
                            <use xlink:href="/images/icons/icons.svg#arrow-down"/>
                        </svg>
                    </span>
                </template>
            </v-select>
        </div>
        <div v-show="value !== '' && value.length !== 0" class="clear-selector" @click="clearList">Clear selection</div>
    </div>
</template>
sagalbot commented 2 years ago

Removing with CSS is the only viable option for v3. In v4 this will be done via a slot.