Multicombobox Component - Vaadin Add-on Directory
Multi ComboBox for Vaadin Flow
## Description
The Multicombobox component provides support to select multiple items for a dropdown.
It's optimized to be used with a keyboard:
* Filtering selects the first non-selected item
* Enter toggles the selection
* Arrow up/down to navigate to the next/previous item.
"Select All" selects all the items.
"Cancel" closes and resets the selection (replace the current value with the value when the user opened the combobox)
It's recommended to use the page size to activate the filtering on client side.
## Usage
Create a new component MultiComboBox and use it like a ComboBox. The API is quite similar.
The value returned is a Set of beans.
## Limitations
* Custom value does not work, you can't add value that are not in the list.
* This add-on implements HasHelper, so it requires Vaadin 14.4+.
## Examples
### Basic example
```
public SimpleView() {
MultiComboBox
combobox = new MultiComboBox<>();
combobox.setLabel("Persons");
List personList = getItems();
combobox.setItems(personList);
add(combobox);
}
private List getItems() {
PersonService personService = new PersonService();
return personService.fetchAll();
}
```
### Item label Generator
```
public LabelGeneratorView() {
List personList = getItems();
MultiComboBox combobox = new MultiComboBox<>();
combobox.setLabel("Persons Phone");
combobox.setItemLabelGenerator(person -> {
if (person.getEmail() != null) {
return person.getPhoneNumber();
} else {
return "No phone for " + person.getId();
}
});
combobox.setItems(personList);
add(combobox);
}
private List getItems() {
PersonService personService = new PersonService();
return personService.fetchAll();
}
```
### Client side filtering
You can set a page size > your list size to enable the filtering on the client side.
```
private Span itemsSelected = new Span();
public InMemoryView() {
MultiComboBox combobox = new MultiComboBox<>(1000);
combobox.setLabel("Persons");
List personList = getItems();
combobox.setItems(personList);
add(combobox);
HashSet value = new HashSet<>();
value.add(personList.get(0));
value.add(personList.get(5));
combobox.setValue(value);
combobox.addValueChangeListener(e -> {
if (e.getValue() != null) {
itemsSelected.setText("Items selected:" + e.getValue().toString());
} else {
itemsSelected.setText("No item selected");
}
});
}
private List getItems() {
PersonService personService = new PersonService();
return personService.fetchAll();
}
```
### Binding and validation
```
private BackendBean backendBean = new BackendBean();
private Binder binder = new Binder<>();
public BindingView() {
MultiComboBox combobox = new MultiComboBox<>();
combobox.setLabel("Persons");
List personList = getItems();
combobox.setItems(personList);
HashSet value = new HashSet<>();
value.add(personList.get(0));
value.add(personList.get(5));
backendBean.setPersons(value);
add(combobox);
binder.setBean(backendBean);
binder.forField(combobox).asRequired().withValidator(val -> {
return (val != null) && (val.size() == 2);
}, "You have to select exactly 2 persons")
.bind(BackendBean::getPersons,BackendBean::setPersons);
}
private List getItems() {
PersonService personService = new PersonService();
return personService.fetchAll();
}
public static class BackendBean {
private Set persons;
public Set getPersons() {
return persons;
}
public void setPersons(Set persons) {
this.persons = persons;
}
}
```
## Demo
You can check the demo here: https://incubator.app.fi/multi-combo-box-flow-demo/
## Missing features or bugs
You can report any issue or missing feature on github: https://github.com/vaadin-component-factory/multiselect-combo-box
### Sponsored development
Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Issue tracker
View on GitHub
Multicombobox Component version 0.1.0
First version of the component
Multicombobox Component version 0.2.0
Fixes:
* [2 scrollbars when the combobox has not enough space](https://github.com/vaadin-component-factory/multi-combo-box-flow/issues/6)
* [Cancel button should be removed and replaced by Clear](https://github.com/vaadin-component-factory/multi-combo-box-flow/issues/5)
* [ValueChangeListener is "eager"](https://github.com/vaadin-component-factory/multi-combo-box-flow/issues/4)
* [Renderer does not work](https://github.com/vaadin-component-factory/multi-combo-box-flow/issues/1)
Multicombobox Component version 0.3.0
* [Change license to Apache 2.0](https://github.com/vaadin-component-factory/multi-combo-box-flow/issues/12)
* [Add i18n for select all and clear buttons](https://github.com/vaadin-component-factory/multi-combo-box-flow/issues/11)
Multicombobox Component version 0.4.0
* Avoid an infinite loop when more than 500 items are selected
* Fix the style of the Select all / Clear buttons
Multicombobox Component version 2.0.0
Make the component compatible with Vaadin 23
Multicombobox Component version 23.1.2
Version compatible to Vaadin 23.1.2.
This version is not compatible with 23.1.1 or less.
Multicombobox Component version 0.4.1
#### Bug fixes:
* Add call to refresh value on attach
Multicombobox Component version 0.4.2
Update web component version to 0.5.1. Fix focus on filtering.