SelectMenu with empty value

[kicaj]

Environment

• Node version: v18.18.2
• Nuxt version: 3.8.0

Version

v2.10.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-xmeysw?file=app.vue

Description

During the creating SelectMenu component with one of options is empty value, like below:

<USelectMenu :options="[ '', 'A1', 'A2', ..., 'Native' ]" placeholder="Level..." />

• empty option is without height, height is just sum of padding values;
  Set   is helpful
• when select empty value, height of SelectMenu is just sum of padding values;
  Set value like above is helpful
• why color of placeholder text is other then color of placeholder of Input component, by default?

Additional context

No response

Logs

No response

[benjamincanac]

This is the normal behaviour, what would you expect to see instead? You can use the #option slot to display what you want: https://ui.nuxt.com/forms/select-menu#option

[aloky]

@benjamincanac how add in options clear button?

[aloky]

@connerblanton If i use multiple, how add clear button in option list?

[connerblanton]

@aloky I don't believe you can add a clear button in the option list, but you can add a clear button on the SelectMenu by doing something like this:

<template>
  <UContainer class="min-h-screen flex items-center">
    <USelectMenu multiple v-model="selected" :options="people">
      <UInput
        class="flex-1 cursor-pointer"
        placeholder="Select people"
        :value="selected.length ? selected.join(', ') : ''"
        :ui="{ icon: { trailing: { pointer: '' } } }"
        readonly
      >
        <template #trailing>
          <UButton v-show="selected.length > 0" icon="i-heroicons-x-mark" @click.stop="selected = []" :padded="false" color="gray" variant="ghost" />
        </template>
      </UInput>
    </USelectMenu>
  </UContainer>
</template>

<script setup>
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']

const selected = ref([])
</script>

There's also more info about it in #246

[aloky]

I don't believe you can add a clear button in the option list

@connerblanton maybe add option header slot?

[kicaj]

This is the normal behaviour, what would you expect to see instead? You can use the #option slot to display what you want: https://ui.nuxt.com/forms/select-menu#option

I think, it should be has the same height, like options below.