NuxtN
Nuxt•11mo ago•
5 replies
Prem

SelectMenu, trailing button issue.

I’m trying to add a clear functionality to the SelectMenu component using a button in the trailing slot:

<USelectMenu
  v-model:model-value="selectedCountry"
  :items="countries"
  value-key="id"
  placeholder="Select Country"
  :ui="{
    base: 'p-4 rounded-2xl',
    placeholder: 'text-sm',
  }"
>
  <template #trailing>
    <UButton
      v-show="selectedCountry"
      variant="link"
      icon="i-heroicons-x-mark-20-solid"
      :padded="false"
      @click.stop="clearSelection"
    />
  </template>
</USelectMenu>

However, I’m seeing multiple warnings in the console when the button is present. If I remove the button or replace it with an icon, the warnings disappear.

What could be causing this issue, and how can I properly implement the clear functionality without triggering these warnings?
CleanShot_2025-03-06_at_22.39.192x.png
Was this page helpful?