ComboBox add sufix button

Flow
1

Hello,

Is there any chance to add sufix to ComboBox? For example sign ‘+’, with some dialog when clicked?

2

Is there any chance to add sufix to ComboBox? For example sign ‘+’, with some dialog when clicked?

This is currently not possible in the component itself, but if your idea is to allow adding values to ComboBox by user, there is mechanism for that, you need to set first combobox.setAllowCustomValue(true) and then use [addCustomValueSetListener(…)]
(https://vaadin.com/api/platform/13.0.9/com/vaadin/flow/component/combobox/ComboBox.html#addCustomValueSetListener-com.vaadin.flow.component.ComponentEventListener-)

Alternatively you can ofcourse create regular button with “+” icon and wrap both ComboBox and the Button together in Div or other suitable layout.

3

Thx will try it, but suffix components would be great if they were implemented.

4

addCustomValueSetListener(…) always start with each value change. I were thinking that it will only start when i will add new value. Is there easy way to check if item already exist if not to do something …

5

Although ComboBox doesn’t have API for adding suffix elements, TextField does, and there’s a <vaadin-text-field> element inside every <vaadin-combo-box>. So we can create a workaround for this missing feature by adding the element into the TextField’s suffix with JavaScript:

ComboBox<String> comboBox = new ComboBox<>();
comboBox.setItems("foo", "bar");
add(comboBox);

Dialog dialog = new Dialog(new Paragraph("Hurray!"));

Icon icon = new Icon(VaadinIcon.PLUS);
icon.addClickListener(e -> dialog.open());

// Needed to create the client-side element without adding the component
// to UI with Java APIs:
comboBox.getElement().appendVirtualChild(icon.getElement());

// Add the icon inside text field before the arrow-down icon:
comboBox.getElement().executeJs(
        "this.$.input.insertBefore($0, this.$.toggleButton)", icon);

// Place the icon in the suffix:
icon.getElement().setAttribute("slot", "suffix");

// Show default cursor instead of caret on hover:
icon.getElement().getStyle().set("cursor", "default");

// Prevent from opening the combo box when clicking the icon:
icon.getElement().executeJs(
        "this.addEventListener('click',function(e){e.stopPropagation();})");
6

About the addCustomValueSetListener: This feature has many problems up to Vaadin version 13. It should work a lot better in Vaadin 14, which should be released soon (latest pre-release at the moment is 14.0.0.rc2).

7

Thx its working.

Add

icon.getStyle().set("padding-bottom", "0.35em");

and its perfect

8

For the reference, to add the element after the arrow-down icon, use appendChild instead of insertBefore:

comboBox.getElement().executeJs("this.$.input.appendChild($0)", icon);

I just personally preferred to have it before the arrow.

9

In vaadin 14 after reopening window using spring component suffix disapear…

10

Rafal Kozyra:
In vaadin 14 after reopening window using spring component suffix disapear…

If the component is detached and re-attached to the UI (for example by re-opening a dialog that contains the component), this can happen because we are using JavaScript to insert the child element. If we’d use the Java APIs for adding a child to parent, the framework would take care of keeping the component tree in sync after re-attach.

Running both of the executeJs lines on attach (comboBox.addAttachListener()) should fix the issue.