Clearable <USelectMenu>
How can I make a sort of clearable menu?
I did it like this using a <UIcon> but it's so unreliable its all janky and doesn't work properly
I did it like this using a <UIcon> but it's so unreliable its all janky and doesn't work properly
<USelectMenu
icon="i-mingcute-suitcase-line"
:loading="statusCompanies === 'pending'"
clear-search-on-close
option-attribute="name"
v-model="selectedCompanyId"
value-attribute="id"
:options="companies"
searchable
searchable-placeholder="Filtrar empresa..."
label="Filtrar por empresa"
class="w-56"
>
<template #trailing>
<UIcon
v-if="selectedCompanyId"
color="primary"
class="h-5 w-5"
@click.stop="() => (selectedCompanyId = '')"
name="i-mingcute-close-circle-line"
></UIcon>
</template>
</USelectMenu><USelectMenu
icon="i-mingcute-suitcase-line"
:loading="statusCompanies === 'pending'"
clear-search-on-close
option-attribute="name"
v-model="selectedCompanyId"
value-attribute="id"
:options="companies"
searchable
searchable-placeholder="Filtrar empresa..."
label="Filtrar por empresa"
class="w-56"
>
<template #trailing>
<UIcon
v-if="selectedCompanyId"
color="primary"
class="h-5 w-5"
@click.stop="() => (selectedCompanyId = '')"
name="i-mingcute-close-circle-line"
></UIcon>
</template>
</USelectMenu>