NuxtN
Nuxt•12mo ago•
15 replies
Viridian

<USelect> in #trailing slot in <UInput> does not appear clickable

I'm trying to make this work:

<UFormGroup :label="labels.daily" size="lg" :ui="{ label: { base: 'font-semibold text-md' } }">
      <UInput
        type="number"
        step="0.01"
        placeholder="3.14"
        input-class="no-spinner"
        :model-value="rateValue"
        @update:model-value="updateRateValue"
        icon="i-material-symbols-electric-bolt"
      >
        <template #trailing>
          <USelect
            v-model="selectedPeriod"
            :options="periodOptions"
            size="xs"
            :ui="{ base: 'w-28' }"
          />
        </template>
      </UInput>
    </UFormGroup>

However, the <USelect> inside the UInput's trailing slot doesn't seem to be clickable and doesn't activate a dropdown when clicked. Instead, the click seems to propagate through to the button. I tried @click.prevent and @click.stop, but they didn't seem to work.

What else am I missing?
Was this page helpful?