[USelectMenu] Hide non-matching group labels during search and improve UI #5787
Description
Package
v4.x
Description
When using USelectMenu with items type (using label for groups), the current search behavior keeps all group labels visible, even when none of their items match the search query.
This makes search results harder to scan for a user, especially if they are a lot of groups.
Current behavior
In the code below, Fruits displays even if the user searches for Aubergine.
<script setup lang="ts">
import type { SelectMenuItem } from '@nuxt/ui'
const items = ref<SelectMenuItem[]>([
{
type: 'label',
label: 'Fruits'
},
'Apple',
'Banana',
'Blueberry',
'Grapes',
'Pineapple',
{
type: 'separator'
},
{
type: 'label',
label: 'Vegetables'
},
'Aubergine',
'Broccoli',
'Carrot',
'Courgette',
'Leek'
])
const value = ref('Apple')
</script>
<template>
<USelectMenu v-model="value" :items="items" class="w-48" />
</template>
Expected behavior
When searching, only group labels that contain at least one matching item should be displayed.
For example:
In this case, only Vegetables should display while Fruits should disappear.
UI Improvement
It would also be nice to slightly change the style of group labels to make it easier to scan the items.
Here are images of before and after (and my explanations of the changes below):
Before:
After:
Explanations
When searching, I think the emphasis should be on the item, rather than the label.
That's why the label is grey, and the item is white.
The label is also uppercase to further differentiate it from an item, and to improve visual hierarchy.
The classes I added to the label are:
:ui="{
label: 'text-[10px] uppercase text-secondary-200/80'
}"
with text-secondary-200 = oklch(78.65% 0.031 254.841).
Wishing everyone a happy new year already and thanks for all the great work you do with nuxt and nuxt ui.