Skip to content

feat(SelectMenu): handle virtualizer #4572

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: v3
Choose a base branch
from
+75 −3
Open

feat(SelectMenu): handle virtualizer #4572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26543f1
added support for item virtualization in SelectMenu for a single group
urbanambroz Jul 22, 2025
c6d7e46
removed unused import
urbanambroz Jul 23, 2025
2acb0e6
added new property for controlling the virtualization to fix tests
urbanambroz Jul 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions playground/app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const components = [
'radio-group',
'select',
'select-menu',
'select-menu-virtualized',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be done inside the select-menu page?

'separator',
'shortcuts',
'skeleton',
Expand Down
16 changes: 16 additions & 0 deletions playground/app/pages/components/select-menu-virtualized.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
import type { SelectMenuItem } from '@nuxt/ui'

const items: SelectMenuItem[][] = [Array(5000).fill(0).map((_, i) => ({ label: `item-${i}`, value: i }))]
</script>

<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-48">
<USelectMenu
:items="items"
placeholder="Search..."
/>
</div>
</div>
</template>
61 changes: 58 additions & 3 deletions src/runtime/components/SelectMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,17 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
ignoreFilter?: boolean
autofocus?: boolean
autofocusDelay?: number
/**
* When `true` the items in the SelectMenu are virtualized. Keep in mind that this only works with a single group due to a limitation of RekaUI (https://github.com/unovue/reka-ui/issues/1885).
* @defaultValue false
*/
virtualize?: boolean
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather have a single virtualize prop with boolean | ComboboxVirtualizerProps.

/**
* The height of items to be used by the virtualizer to determine the amount of items to render.
* Keep in mind that virtualization only works when you have no groups due to a limitation of RekaUI (https://github.com/unovue/reka-ui/issues/1885).
* @defaultValue 20
*/
virtualItemEstimateSize?: number
class?: any
ui?: SelectMenu['slots']
}
Expand Down Expand Up @@ -168,7 +179,7 @@ export interface SelectMenuSlots<

<script setup lang="ts" generic="T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
import { ref, computed, onMounted, toRef, toRaw } from 'vue'
import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from 'reka-ui'
import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, ComboboxVirtualizer, FocusScope, useForwardPropsEmits, useFilter } from 'reka-ui'
import { defu } from 'defu'
import { reactivePick, createReusableTemplate } from '@vueuse/core'
import { useAppConfig } from '#imports'
Expand All @@ -192,7 +203,8 @@ const props = withDefaults(defineProps<SelectMenuProps<T, VK, M>>(), {
labelKey: 'label' as never,
resetSearchTermOnBlur: true,
resetSearchTermOnSelect: true,
autofocusDelay: 0
autofocusDelay: 0,
virtualItemEstimateSize: 20
})
const emits = defineEmits<SelectMenuEmits<T, VK, M>>()
const slots = defineSlots<SelectMenuSlots<T, VK, M>>()
Expand Down Expand Up @@ -447,7 +459,50 @@ defineExpose({
<div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
<ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />

<ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
<ComboboxVirtualizer
v-if="virtualize"
v-slot="{ option: item, virtualItem: { index } }"
:options="filteredGroups[0]!.map(item => item as AcceptableValue)"
:estimate-size="virtualItemEstimateSize"
>
<ComboboxItem
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better to move the whole <ComboboxItem> inside a <DefineItemTemplate> to avoid repetition.

:class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
:disabled="isSelectItem(item) && item.disabled"
:value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey as string) : item"
@select="onSelect($event, item)"
>
<slot name="item" :item="(item as NestedItem<T>)" :index="index">
<slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
<UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
<UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
<UChip
v-else-if="isSelectItem(item) && item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
/>
</slot>

<span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
<slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
{{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
</slot>
</span>

<span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
<slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" />

<ComboboxItemIndicator as-child>
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
</ComboboxItemIndicator>
</span>
</slot>
</ComboboxItem>
</ComboboxVirtualizer>

<ComboboxGroup v-for="(group, groupIndex) in filteredGroups" v-else :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The v-else here should be on a <template> that wraps the <ComboboxGroup v-for="....

<template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
<ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
{{ get(item, props.labelKey as string) }}
Expand Down