Search code examples
javacomboboxvaadinvaadin7

Vaadin combobox separator

I'm currently developing a Vaadin app, and I've arrived to the need of a ComboBox with some separators between items. I've been looking arround and it seems currently there is no way to achieve this.

Being more specific:

  • What do I mean with separator? A separator is an item in the ComboBox that, presumably, cannot be selected. The caption of this item should be customizable, to achieve something like this effect: Section 1 Thing 1, Thing 2 Section 2 Thing 3, Thing 4
  • Must it be bold? Nope, it's just an example. I could use something like "-- Section 1 --", there is no problem there.
  • As the main idea is using a ComboBox, any answer should provide at least the same functionalities as it. ie: filtering, adding elements...

What I've tried so far:
I overwrote setInternalValue method of the ComboBox, to not be able to select a separator like this:

public class ComboBoxWithSeparators() {
    @Override
    protected void setInternalValue(Object newValue) {
        Object oldValue = super.getValue();
        if(isSeparator)
            super.setInternalValue(oldValue);
        else
            super.setInternalValue(newValue);
    }
}

This kinda works, but when you select a separator, it is shown by a fraction of a second in the selected box, then is overriden by the old element.
So, my actual question is: Is there a way to not enable selecting an item within the ComboBox?

Related: Add an item in ComboBox and disable it with JS

Solution

  • Currently there is no way to obtain such thing as a ComboBox with separators in Vaadin, but there are some workarounds that can be used instead of that:

    Vaadin Menu bar
    This component supports separators, categories and enabling/disabling items. The con is that it doesn't allow filtering like ComboBox, but you can add shortcuts for usual selections.

    • Anidated ComboBox:
      Anidated <code>ComboBox</code>
      This way you can filter by types or/and item, but you can't see every item you have, as they are filtered by categories/types. Of course, you can add a category that includes all elements to bypass this limitation.

    • ComboBox with no-selectable items:
      This workaround acts like an usual ComboBox, but you are overriding #setInternalValue to make certain elements unselectable like:

      public class ComboBoxWithSeparators() {
    @Override
    protected void setInternalValue(Object newValue) {
        Object oldValue = super.getValue();
        if(isSeparator(newValue))
            super.setInternalValue(oldValue);
        else
            super.setInternalValue(newValue);
    }
}

    The problem here is that you can actually select separators, but the #setInternalValue override will restore the old element. This may cause odd behaviour.

    • @AndréSchild nativeSelectExt7:
      This option provides the same functionality as ComboBox with no-selectable items but is better as it highlights disabled items, and fully disallows selecting one of them. NativeSelectExt7