Nuxt•3d ago

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>

<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?

3 Replies

kapa.ai•3d ago

Hi @Prem. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with the SelectMenu component is likely related to how the trailing slot interacts with the component's default behavior. Based on the knowledge sources, there are a few key points to consider: The Problem When you add a clickable element like a button to the trailing slot of the SelectMenu, it's likely conflicting with the default dropdown behavior. This is because the trailing area in input-like components typically has a pointer-events-none class applied to prevent interference with the main component functionality. Solution Here's how you can properly implement a clear functionality for the SelectMenu: 1. You need to modify the UI configuration to remove the pointer-events-none class from the trailing icon area:

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

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

This approach is similar to what's recommended for the Input component when adding clickable elements in the trailing slot, as shown in the Input component documentation. 2. Make sure your clearSelection method prevents event propagation:

function clearSelection(event) {
  event.preventDefault()
  event.stopPropagation()
  selectedCountry = null
}

function clearSelection(event) {
  event.preventDefault()
  event.stopPropagation()
  selectedCountry = null
}

3. You might also need to add @mousedown.stop.prevent to your button to prevent the default dropdown behavior when clicking the icon, as suggested in one of the Stack Overflow solutions:

<UButton
  v-show="selectedCountry"
  variant="link"
  icon="i-heroicons-x-mark-20-solid"
  :padded="false"
  @mousedown.stop.prevent
  @click="clearSelection"
/>

<UButton
  v-show="selectedCountry"
  variant="link"
  icon="i-heroicons-x-mark-20-solid"
  :padded="false"
  @mousedown.stop.prevent
  @click="clearSelection"
/>

This approach should allow you to implement the clear functionality without triggering warnings, as it properly handles the event propagation and prevents conflicts with the SelectMenu's default behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@659974026617421844> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PremOP•3d ago

@kapa.ai It didn't work, same issue persists.

Gaming

Programming

SelectMenu, trailing button issue.

Did you find this page helpful?