Combo Box should also support grouping of elements

[timbo86]

Describe your motivation

Our UX has defined a grouped combo box, which should basically look like the grouped list box including separators (so this should also be possible for the select). As we not only run our components in java but also in vue.js, we would need a front end solution for this.

We tried already our best to implement such a functionality, but failed with not beeing able to access all properties and classes of combo box in java (for example DataGenerator or KeyMapper).

Describe the solution you'd like

It should look like this and the groups and separators should by stylable via themable parts:

The interaction with the groups should be disabled, so that we can't select those by mouse or keyboard.

Describe alternatives you've considered

• We tried to pass additional data of an item from java to js. But this failed as we did not have access to the DataGenerator.
• Also we were not able to deactivate interaction with groups completely

Additional context

We talked about this with @rolfsmeds and @YuriyVaadin and they thought this might be possible for v23

[vaadin-bot]

Thanks for using Vaadin! We appreciate your help and we’ll take care of this as soon as possible.

[rolfsmeds]

Having mulled this over, I'm a bit skeptical of the value this would provide, for a number of reasons:

1. The UX value of grouped items in long lists of items that require lazy loading and/or filtering is somewhat questionable.
2. If the items are sufficiently few for grouping to be meaningful, you probably don't need lazy-loading/filtering, and can use vaadin-select instead, where groups are doable with the existing API.
3. This would add significant complexity to an already complex component with a high maintenance load.

But I'm certainly open to further discussion about it.

[eberleant]

Regarding points 1 and 2, I think this could still be a useful feature once the items have been filtered. If each group has 100 items, but after filtering, each group only has a few items, the groups could be just as visually helpful as they would be in a Select.

Another possible use-case would be if there are lots of items in the ComboBox (therefore filtering is required) but you want to display a list of a few commonly-selected items at the top, separated from the rest of the less common items.

[TatuLund]

One alternative would be to use TreeComboBox

https://vaadin.com/directory/component/treecombobox

This is a ComboBox like component built using TreeDataProvider and using Tree in the drop down to organize items hierarchically.

[anezthes]

FWIW, several clients have requested support for <optgroup>. It would be terrific if we could add this support in either Select or ComboBox.