NuxtUI USelectMenu event issue with searchable
If I have searchable on USelectMenu, the click event on the options won't trigger
Here is the code:
without searchable, test() will be triggered, then selectCondition() will be triggered
with searchable, test() won't be triggered, selectCondition() will be triggered
```
<USelectMenu
v-model="model"
:options="options"
value-attribute="id"
@change="selectCondition($event)"
searchable <-- this cause the issue
>
<template #option="{option}">
<div @click="test($event)"></div>
</template>
</USelectMenu>
3 Replies
Hi @god830. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, I don't have specific information about this particular issue with the USelectMenu component and the searchable prop affecting click events. The documentation doesn't mention this specific behavior or any known issues related to it.
However, I can provide some general insights based on the available information:
1. The USelectMenu component supports a searchable prop, which enables search functionality. Components > Searchable
2. When the searchable prop is used, the component internally switches from using Headless UI's Listbox to Combobox component. This change in the underlying implementation might be causing the difference in event behavior you're experiencing.
3. The documentation doesn't mention any specific issues with click events or the @change event when using the searchable prop.
To troubleshoot this issue, you could try the following:
1. Check if there are any recent issues or discussions about this on the Nuxt UI GitHub repository.
2. Try using the @update:modelValue event instead of @change to see if it behaves differently.
3. Consider using the v-model:query binding to control the search query, which might give you more control over the component's behavior. Components > Control the query
If the issue persists, it might be worth reporting it as a potential bug to the Nuxt UI team for further investigation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@400074882555314177> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
What is the goal by creating a div with @click?
v-model="selected" performs that task.