[Feature Request]: Make group-item in combo box a container #7732
Description
Feature Request Description
In the current documentation of the combo box component, the "Grouping" feature is defined in the following way:
<ui5-combobox placeholder="Grouping of items">
<ui5-cb-group-item text="A"></ui5-cb-group-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>
<ui5-cb-group-item text="B"></ui5-cb-group-item>
<ui5-cb-item text="Bahrain"></ui5-cb-item>
<ui5-cb-item text="Belgium"></ui5-cb-item>
<ui5-cb-item text="Brazil"></ui5-cb-item>
<ui5-cb-group-item text="C"></ui5-cb-group-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Chile"></ui5-cb-item>
</ui5-combobox>However, I couldn't find a way to figure out, without code injection, how I can generate dynamically grouped items, at least in Vue.
Proposed Solution
Instead of the current way of creating grouped items, I propose the following. Semantically and visually, it is also clear which items are in which groups.
<ui5-combobox placeholder="Grouping of items">
<ui5-cb-group-item text="A">
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>
</ui5-cb-group-item>
<ui5-cb-group-item text="B">
<ui5-cb-item text="Bahrain"></ui5-cb-item>
<ui5-cb-item text="Belgium"></ui5-cb-item>
<ui5-cb-item text="Brazil"></ui5-cb-item>
</ui5-cb-group-item>
<ui5-cb-group-item text="C">
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Chile"></ui5-cb-item>
</ui5-cb-group-item>
</ui5-combobox>In Vue, then I can generate the list dynamically:
<ui5-combobox placeholder="Grouping of items">
<ui5-cb-group-item v-for="(group, index) in groups" :key="group_index" :text="group.name">
<ui5-cb-item v-for="(item, item_index) in group" :key="item_index" :text="item.name"></ui5-cb-item>
</ui5-cb-group-item>
</ui5-combobox>Proposed Alternatives
No response
Organization
No response
Additional Context
No response
Priority
Medium
Privacy Policy
- I’m not disclosing any internal or sensitive information.
Metadata
Metadata
Assignees
Type
Projects
Status