[Feature Request]: Make group-item in combo box a container

[yetian]

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.

[yanaminkova]

Hello @SAP/ui5-webcomponents-topic-rl,

Could you please have a look and consider this feature request regarding grouping of items in ui5-combobox?

Thanks and Kind regards,
Yana

[niyap]

Hello @SAP/ui5-webcomponents-topic-rl,

We have to analyse and discuss with designer, whether it is feasible to implement this approach?

Kind Regards,
Niya

[yetian]

Thanks @niyap for the comment.

I would recommend this way since it is much clearer semantically and I think it is also how grouping is implemented in general. I found some examples in Vue and Angular:

• element-ui (Vue): https://element-plus.org/en-US/component/select.html#grouping
• vuesax (Vue): https://vuesax.com/docs/components/Select.html#group
• Material (Angular): https://vuesax.com/docs/components/Select.html#group
• Hope UI (Svelte, discontinued): https://hope-ui.com/docs/data-entry/select#option-group
• Ant Design (React) and Fluent UI (React, from Microsoft) interpret and translate directly from a JSON object

Except for the modern frameworks, this is how a browser supports: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup?retiredLocale=de

Best regards
Ye

[yetian]

Hi @niyap ,

In addition to the coding part, I also noticed that at least in the documentation, the grouping feature is only available for Combo Box, but not for Select. Could you also ask the designers/developers if it makes sense to have the grouping feature for Select as well?

Thanks and cheers
Ye

[hristop]

Hi @yetian ,

After discussion with or architects we have decided that this is good candidate for v2.0 of the web-components (4460) as it is incompatible with the current implementation.

So for now we will have to reject it, but we will surely have this in mind when we plan the changes in 2.0.

Best Regards,
Hristo

[yetian]

Thanks @hristop! Look forward to v2.0.