Add HasSuffix to Combobox<T>

[mrgreywater]

Describe your motivation

Currently the Combobox only has a Prefix component, where the underlying Textfield actually has the capability for a suffix. Manually adding the Suffix is possible but cumbersome. It would be nice if the Combobox had that functionality built in.

Describe the solution you'd like

Implement HasSuffix for the Combobox (e.g. for additional buttons). In my usecase I'm using a "edit" button as suffix component.

Describe alternatives you've considered

package xxx.components.fields;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.shared.HasSuffix;

import java.util.Collection;

public class ComboBoxWithPrefixAndSuffix<T> extends ComboBox<T> implements HasSuffix {
    Component prefix;
    Component suffix;

    public ComboBoxWithPrefixAndSuffix(int pageSize) {
        super(pageSize);
        initialize();
    }

    public ComboBoxWithPrefixAndSuffix() {
        super();
        initialize();
    }

    private void initialize() {
        addAttachListener(event -> {
            if (prefix != null) {
                setPrefixSuffixCommonComponentProperties(prefix);
            }
            if (suffix != null) {
                this.getElement().executeJs("this.$.toggleButton.parentElement.insertBefore($0, this.$.toggleButton)", suffix);
                setPrefixSuffixCommonComponentProperties(suffix);
            }
        });
    }

    public ComboBoxWithPrefixAndSuffix(String label) {
        super(label);
        initialize();
    }

    public ComboBoxWithPrefixAndSuffix(String label, Collection<T> items) {
        super(label, items);
        initialize();
    }

    @SafeVarargs
    public ComboBoxWithPrefixAndSuffix(String label, T... items) {
        super(label, items);
        initialize();
    }

    @Override
    public void setPrefixComponent(Component component) {
        super.setPrefixComponent(component);
        setPrefixSuffixCommonComponentProperties(component);
    }

    @Override
    public void setSuffixComponent(Component component) {
        suffix = component;
        this.getElement().appendVirtualChild(component.getElement());
        this.getElement().executeJs("this.$.toggleButton.parentElement.insertBefore($0, this.$.toggleButton)", component);
        component.getElement().setAttribute("slot", "suffix");
        setPrefixSuffixCommonComponentProperties(component);
    }

    private void setPrefixSuffixCommonComponentProperties(Component component) {
        prefix = component;
        component.getElement().getStyle().set("cursor", "default");
        component.getElement().executeJs("this.addEventListener('click',function(e){e.stopPropagation();})");
    }
}

Additional context

No response

[mperktold]

Similarly, MultiSelectComboBox has neither prefix nor suffix. I suggest that both classes implement HasPrefixAndSuffix.

[web-padawan]

We don't support prefix in MultiSelectComboBox because the corresponding slot is used internally.

Similarly, setting the suffix would make the proper appearance problematic on narrow screens.

[juuso-vaadin]

Ideally all input fields would have a way to add elements to prefix/suffix slots regardless if the component uses those internally or not. ComboBox can already show clear and dropdown icons at the same time so swapping clear to some other icon wouldn't be too odd.

Edge cases like setting huge elements in the prefix/suffix slots can break the component, but I don't see it as a blocker. Same issues already exist on TextField for example.

[knoobie]

Even tho it's not officially supported it should probably be possible.. kinda sad that not all "common" input interfaces are available to align all fields.

Use Case: Highlight all fields that are changed by a different user with a icon in front of them -> prefix slot is ruled out now :x