This repository was archived by the owner on Jan 18, 2025. It is now read-only.
This repository was archived by the owner on Jan 18, 2025. It is now read-only.
Label slot is not visible when input is searchable #364
Open
Description
Describe the bug
Is not possible to change the view when item selected and input is searchable.
Expected behavior
When item selected show custom label slot. On focus switch to the search input
Screenshots
Result:
Expected result:
Code:
<vue-select
:options="getCustomers"
v-model="form.customer_id"
:closeOnSelect="true"
:clearOnSelect="true"
:clearOnClose="true"
labelBy="name"
value-by="id"
placeholder="Select customer"
@selected="selectCustomer"
>
<template #label="{ selected }">
<div class="flex flex-1 items-center gap-2 leading-4 px-2 py-1 text-sm">
<div :class="'color-' + selected.color || ''" class="flex justify-center items-center w-7 h-7 text-xs font-medium rounded-lg">
{{ selected.initial }}
</div>
<div>
{{ selected.name }}
</div>
</div>
</template>
<template #dropdown-item="{ option }">
<div class="flex items-center gap-2">
<div :class="'color-' + option.color" class="flex justify-center items-center w-7 h-7 text-xs font-medium rounded-lg -my-0.5">
{{ option.initial }}
</div>
<div>{{ option.name }}</div>
</div>
</template>
</vue-select>