Skip to content
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
@rocevas

Description

@rocevas

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
Screenshot 2021-12-11 at 10 07 09
Result:
Screenshot 2021-12-11 at 10 20 28
Expected result:
Screenshot 2021-12-11 at 10 24 56

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions