Is there a way to allow user to select multiple options in a combo box in flow?
Unfortunately not yet. There’s an issue for adding that feature, which includes some prototypes you can possibly try out: https://github.com/vaadin/vaadin-combo-box/issues/88
It is really bad that such a common use case is not supported. Hoping it will be available soon.
I’ve heard rumors that there is a possibility that it would be coming in Vaadin 11. It’s one of the high priority feature additions, so I hopeful that we will have it by the end of the year 
I am trying to build a web component using paper-dropdown-multi, but it is not easy. The good news is that the webjar is already in maven central. The bad news is that building a Java API is not straight forward.
Update:
So, I gave up on the paper-dropdown-menu-multi as it seems awkward and not so elegant. I am now going to work on integrating this one which seems a lot nicer.
https://www.webcomponents.org/element/pushkar8723/paper-dropdown/demo/demo/index.html
However, this is not available in Maven Central and is in (deprecated) bower and not in github and I cannot build a webjar from this. But this is based on paper-dropdown-menu which is not too shabby. If you do end up using this, you will need to import at least one dependency below to make any kind of paper dropdown work. See below.
org.webjars.bowergithub.web-animations web-animations-js 2.3.1Final Update:
So, didn’t quite get to integrating paper-dropdown, so went with a slightly unconventional approach.
Used the Iron Dropdown Wrapper from the directory (https://vaadin.com/directory/component/iron-dropdown-wrapper/0.5.2). Used a (small tertiary) button along with a multi select single column grid and it looks alright. You have to track the grid selections and add listeners etc. and add some styling (margins mostly) to make it look half decent. Chrome developer tools is your friend to do some iterative styling.
Hope this helps.
Guru Murthy:
Final Update:So, didn’t quite get to integrating paper-dropdown, so went with a slightly unconventional approach.
Used the Iron Dropdown Wrapper from the directory (https://vaadin.com/directory/component/iron-dropdown-wrapper/0.5.2). Used a (small tertiary) button along with a multi select single column grid and it looks alright. You have to track the grid selections and add listeners etc. and add some styling (margins mostly) to make it look half decent. Chrome developer tools is your friend to do some iterative styling.
Hope this helps.
kiran surapaneni:
It is really bad that such a common use case is not supported. Hoping it will be available soon.
I have adapted @tomivirkki answer from issue https://github.com/vaadin/vaadin-combo-box/issues/88 and created multi-select-combo-box based on vaadin-combo-box. You can check it here: https://github.com/selvinfehric/multi-select-combo-box
It is adapted for Polymer2. It can be themed if you include material or lumo theme for vaadin-combo-box and vaadin-textfield. And you can pass it a list of primitives or objects and use display-field property to handle what is shown in the list. Those are changes to @tomivirkki’s sample.
It is published to webcomponents.org and you can see a demo here:
https://www.webcomponents.org/element/selvinfehric/multi-select-combo-box
Please report any issues and feel free to contribute!
Selvin Fehric:
Guru Murthy:
Final Update:So, didn’t quite get to integrating paper-dropdown, so went with a slightly unconventional approach.
Used the Iron Dropdown Wrapper from the directory (https://vaadin.com/directory/component/iron-dropdown-wrapper/0.5.2). Used a (small tertiary) button along with a multi select single column grid and it looks alright. You have to track the grid selections and add listeners etc. and add some styling (margins mostly) to make it look half decent. Chrome developer tools is your friend to do some iterative styling.
Hope this helps.
kiran surapaneni:
It is really bad that such a common use case is not supported. Hoping it will be available soon.I have adapted @tomivirkki answer from issue https://github.com/vaadin/vaadin-combo-box/issues/88 and created multi-select-combo-box based on vaadin-combo-box. You can check it here: https://github.com/selvinfehric/multi-select-combo-box
It is adapted for Polymer2. It can be themed if you include material or lumo theme for vaadin-combo-box and vaadin-textfield. And you can pass it a list of primitives or objects and use display-field property to handle what is shown in the list. Those are changes to @tomivirkki’s sample.
It is published to webcomponents.org and you can see a demo here:
https://www.webcomponents.org/element/selvinfehric/multi-select-combo-boxPlease report any issues and feel free to contribute!
Hello and well done for this component. I am using Vaadin 11 and i am trying to add it to my view but i get this error:
Class 'mypackage.MyView' has field 'multiSelectComboBox' whose type 'com.vaadin.flow.component.combobox.ComboBox' is annotated with tag 'vaadin-combo-box' but the element defined in the HTML template with id 'multipleItems' has tag name 'multi-select-combo-box'
the .html view file:
<link rel="import" href="../../../../../../../../bower_components/multi-select-combo-box/multi-select-combo-box.html">
.
.
<dom-module>
<template>
.
.
<multi-select-combo-box id="multipleItems" label="DEPARTMENTS"></multi-select-combo-box>
</template>
<script>
.
.
</script>
</dom-module>
Is there a way to have it in Java controller and manipulate it?
It’s due to your attribute “multiSelectComboBox” in your class “MyView” which is of type “ComboBox”. It needs to be of type MultiSelectComboBox (or anything else). You have to create your own Java API for this WebComponent.
That’s where I’m stuck too…
It seems that flow can’t handle array property from Polymer TemplateModel (https://github.com/vaadin/flow/issues/3435).
Anyone can give us a simple example?
Sorry guys, I created this component only for Polymer, not sure how do you create Java API for web component.
Shocking to me that things like Time Picker and ComboBox lazy-loading have been given higher priority than this.
Awesome job on this, Selvin.
For everyone trying to integrate this on the Java side, do the following:
Maven import:
<dependency>
<groupId>org.webjars.bowergithub.selvinfehric</groupId>
<artifactId>multi-select-combo-box</artifactId>
<version>1.0.2</version>
</dependency>
Then add a custom class. This one should get you started:
package com.components;
import java.util.Iterator;
import java.util.List;
import com.vaadin.flow.component.AbstractSinglePropertyField;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.HtmlImport;
import elemental.json.Json;
import elemental.json.JsonArray;
@Tag("multi-select-combo-box")
@HtmlImport("bower_components/multi-select-combo-box/multi-select-combo-box.html")
public class MultiselectComboBox extends AbstractSinglePropertyField<MultiselectComboBox, String> {
public MultiselectComboBox(String label) {
super("value", "", true);
setLabel(label);
}
public void setLabel(String label) {
getElement().setProperty("label", label);
}
public String getLabel() {
return getElement().getProperty("label");
}
public void setItems(List<String> values) {
Iterator<String> it = values.iterator();
JsonArray items = Json.createArray();
int n = 0;
while (it.hasNext()) {
items.set(n, it.next());
n++;
}
getElement().setPropertyJson("items", items);
}
}
Then just call new MultiselectComboBox("Title"); wherever you need it.
Add in whatever additional methods you need to MultiselectComboBox class.
How can i use for it for enum classes?
Hello everybody,
i have just published my first add-on. It is a simple java-wrapper around the [multiselect-combo-box by Goran Atanasovski]
(https://vaadin.com/directory/component/gatanasomultiselect-combo-box/).
Give it a try, i’m open for feedback.
https://vaadin.com/directory/component/multiselectcombobox
Greetings
WaTho
Kamrul Hasan:
How can i use for it for enum classes?
With my addon:
final MultiselectComboBox<Color> box =
new MultiselectComboBox<Color>();
box.setLabel("ColorTest");
box.setItems(Color.values());
}
enum Color {
RED, BLUE, GREEN;
}
Thomas Wagner:
Give it a try, i’m open for feedback.
It’s already great job, but are you planning to complete all the missing methods and listeners?
Yes, i need especially the listeners for valueChanged-Event or selectedItemChanged-Event and some way to programmatically set the selection. These will be the next steps.
For now i have created an online demo at https://multiselect-combo-box.herokuapp.com/
Thanks @Thomas. It’s Working
Just released version 0.0.3 with working event listeners and select/deselect-api. Demo is updated too.
This might be my last release cause yesterday the author of the original web component released an java-api too and he probably knows better what to do there.