feat(SelectMenu): handle virtualizer #4572
Conversation
commit: |
|
Will this be merged? It would be really useful 🙂 PS: Any new @benjamincanac? It looks a nice short-term solution until the Reka UI team provides the proper fix. |
|
Does this get reviewed soon? It's already a dealbreaker for ppl choosing nuxtui over competing component libs that have a virtulized feature especially for input elements that have 100+ options. |
benjamincanac
changed the title
| @@ -52,6 +52,7 @@ const components = [ | |||
| 'radio-group', | |||
| 'select', | |||
| 'select-menu', | |||
| 'select-menu-virtualized', | |||
There was a problem hiding this comment.
Could this be done inside the select-menu page?
| * 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 |
There was a problem hiding this comment.
I'd rather have a single virtualize prop with boolean | ComboboxVirtualizerProps.
| :options="filteredGroups[0]!.map(item => item as AcceptableValue)" | ||
| :estimate-size="virtualItemEstimateSize" | ||
| > | ||
| <ComboboxItem |
There was a problem hiding this comment.
I think it would be better to move the whole <ComboboxItem> inside a <DefineItemTemplate> to avoid repetition.
| </ComboboxItem> | ||
| </ComboboxVirtualizer> | ||
|
|
||
| <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" v-else :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })"> |
There was a problem hiding this comment.
The v-else here should be on a <template> that wraps the <ComboboxGroup v-for="....
🔗 Linked issue
❓ Type of change
📚 Description
Added virtulization for single group in SelectMenu that goes around the limitation of RekaUI which makes ComboBoxGroup virtualization impossible right now.
📝 Checklist
This is solving the issue described here.
I have updated the SelectMenu props and added JSDoc comments to it, didn't go into adjusting the docs.