Hi all,

I have a ComboBox that I populate with a ENUM.values().

In the enum I have a field “category” that will be similar for some items.

In the drop down I want to help the user navigate with a helper text above all major categories and also make a splitters between categories in some way. See the attached screenshot of my idea. I of course don’t want the helper text or the splitter to be selectable.

I could use a itemLabelGenerator and just put “category” - “name” as a renderer of each item, but that would be lots of same categories after each other. I will use the itemLabelGenerator to show the selected item. Also if I use the setRenderer this applies to all items, and that would be kind of similare to itemLabelGenerator for each item. The enum list might grow in the future and I want the code-base to handle this automatically.

Any takes on this would be much appreciated!

There is an old ticket here: Combo Box should also support grouping of elements · Issue #3509 · vaadin/web-components · GitHub
I’m not sure if it’s possible to do this with the combobox. You should probably try the Select component instead.

I’ve had to implement something similar in the past, but perhaps even more complex, with multiple levels of hierarchy.
For our use case, using Select component was sufficient, but there was a preference to have a search as well (as provided by combo box) so I feel your pain.
So like JC said, see if Select fits your use case, it should be doable there.

Maybe you can take advantage of this add on as well: