multiselect-combo-box
A multiselect combo box web component compatible with the Vaadin Web Components
<multiselect-combo-box>
A multiselect combo box web component compatible with the Vaadin Web Components
Demo ↗ | Material Theme Demo ↗
Getting started
Install the multiselect-combo-box
:
npm install multiselect-combo-box --save
Once installed, import in your applicaiton:
import 'multiselect-combo-box/multiselect-combo-box.js';
Add to your page:
<multiselect-combo-box label="Select items"></multiselect-combo-box>
For more usage examples, see the demo.
Project setup
- Fork the
multiselect-combo-box
repository and clone it locally. - Make sure you have npm (packaged with Node.js) installed locally.
- To install the element's dependencies, in the
multiselect-combo-box
directory, run:npm install
Running the project locally
To perform linting, run the tests and automatically open the demo page, run:
npm run start
Branch information
master
the latest version of themultiselect-combo-box
polymer-2
the Polymer 2.x version of themultiselect-combo-box
which is not maintained anymore.
Java API
The Vaadin Flow Java compatible version of this component is available on the Vaadin Directory and GitHub.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @open-wc/dedupe-mixin#^1.3.0
- @polymer/polymer#^3.0.0
- @vaadin/combo-box#^22.0.0
- @vaadin/component-base#^22.0.0
- @vaadin/field-base#^22.0.0
- @vaadin/input-container#^22.0.0
- @vaadin/polymer-legacy-adapter#^22.0.2
- @vaadin/vaadin-lumo-styles#^22.0.0
- @vaadin/vaadin-material-styles#^22.0.0
- @vaadin/vaadin-themable-mixin#^22.0.0
- Released
- 2022-02-10
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 3.0+
- Polymer 2.0+ in 1.1.0
- Browser
- Browser Independent
multiselect-combo-box - Vaadin Add-on Directory
A multiselect combo box web component compatible with the Vaadin Web ComponentsOnline Demo
GitHub Homepage
View on NPM
Issue tracker
License
multiselect-combo-box version 1.0.1
This release introduces various updates that enable the `multiselect-combo-box` web component to work in IE 11
multiselect-combo-box version 2.0.3
This release introduces the modifications required by the [Java wrapper](https://github.com/gatanaso/multiselect-combo-box-flow) to support lazy loading of items.
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-combo-box#^5.0.5
* @vaadin/vaadin-text-field#^2.4.8
* @vaadin/vaadin-themable-mixin#^1.4.4
* @vaadin/vaadin-control-state-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-material-styles#^1.2.3
multiselect-combo-box version 2.1.0
To better align with the new defaults for the vaadin components, the `clear-button-visible` attribute is now also available to the `multiselect-combo-box`. With this update the component no longer displays the clear icon by default, but instead it needs to be specified explicitly. This change breaks the default behavior in favor of aligning better with the current default behavior of the `vaadin-text-field` and the `vaadin-combo-box` components.
⚠️ Breaking Change: The clear button is now hidden by default. To make it visible, set the `clear-button-visible` attribute or use the `clearButtonVisible` property.
ℹ️ Note: if the value of the `multiselect-combo-box` is empty, the clear button is always hidden.
multiselect-combo-box version 1.1.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* vaadin-combo-box#vaadin/vaadin-combo-box#^4.2.7
* vaadin-text-field#vaadin/vaadin-text-field#^2.3.4
* vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.4.4
* vaadin-control-state-mixin#vaadin/vaadin-control-state-mixin#^2.1.3
* vaadin-lumo-styles#vaadin/vaadin-lumo-styles#^1.4.1
* vaadin-material-styles#vaadin/vaadin-material-styles#^1.2.2
multiselect-combo-box version 2.2.0
This release introduces a much needed feature of the `multiselect-combo-box` and that is to keep the overlay open when selecting items (this was not previously achievable due to limitations in the underlying `vaadin-combo-box`).
![keep-overlay-open](https://user-images.githubusercontent.com/15094658/69007157-c53fb680-0942-11ea-8793-6c6168c47534.gif)
Furthermore, with this release the component no longer has a default full width, but instead, it takes the amount of space it needs. This change breaks previous behavior in favor of better aligning with the core set of vaadin components.
Also, a new property `readonlyValueSeparator` was introduced, which enables customizing the value separator that is used for constructing the display value when the component is in `readonly` mode.
The default value of this separator is `, `.
⚠️ Breaking change: the `multiselect-combo-box` no longer has a default full width.
multiselect-combo-box version 2.3.0
This release comes with an awesome new feature, and that is the possibility to use item templates and custom renderers ([#43](https://github.com/gatanaso/multiselect-combo-box/issues/43))
![custom-renderer](https://user-images.githubusercontent.com/15094658/75589571-c9bc5500-5a83-11ea-8f76-56c522c50564.gif)
Additionally it fixes an issue with the ordering of `non-string` items [#55](https://github.com/gatanaso/multiselect-combo-box/issues/55).
multiselect-combo-box version 2.3.1
This is a bugfix release and no changes have been introduced in the functionality of this component. The modifications are done to enable fixing issues in the java wrapper of this component.
multiselect-combo-box version 2.4.0
This release introduces the possibility to add custom values to the `multiselect-combo-box`!
![custom-values](https://user-images.githubusercontent.com/15094658/77352000-2e976200-6d47-11ea-8684-f01cd557e858.gif)
To enable custom values, set the `allow-custom-values` property of the component. When enabled, inputting a value and pressing enter fires a `custom-values-set` event. The new value is not automatically added to the existing values or items, instead it is up to the user to handle this event and decide how to process the value.
For examples of how this works, check out the demos: [lumo theme demo](https://multiselect-combo-box.web.app/demo/) and [material theme demo](https://multiselect-combo-box-material.web.app/demo/material/).
multiselect-combo-box version 2.4.1
This is a bugfix release and no changes have been introduced in the functionality of this component.
The modifications are done to enable fixing issues in the java wrapper of this component (https://github.com/gatanaso/multiselect-combo-box-flow).
multiselect-combo-box version 2.4.2
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-combo-box#^5.0.9
* @vaadin/vaadin-text-field#^2.4.8
* @vaadin/vaadin-themable-mixin#^1.4.4
* @vaadin/vaadin-control-state-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-material-styles#^1.2.3
multiselect-combo-box version 2.5.0-beta.3
### Dependencies
* @polymer/iron-resizable-behavior#^3.0.1
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-combo-box#^5.0.9
* @vaadin/vaadin-control-state-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-material-styles#^1.2.3
* @vaadin/vaadin-text-field#^2.4.8
* @vaadin/vaadin-themable-mixin#^1.4.4
multiselect-combo-box version 2.5.0
### Dependencies
* @polymer/iron-resizable-behavior#^3.0.1
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-combo-box#^5.0.9
* @vaadin/vaadin-control-state-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-material-styles#^1.2.3
* @vaadin/vaadin-text-field#^2.4.8
* @vaadin/vaadin-themable-mixin#^1.4.4
multiselect-combo-box version 3.0.0-alpha.2
### Dependencies
* @open-wc/dedupe-mixin#^1.3.0
* @polymer/polymer#^3.0.0
* @vaadin/combo-box#^22.0.0
* @vaadin/component-base#^22.0.0
* @vaadin/field-base#^22.0.0
* @vaadin/input-container#^22.0.0
* @vaadin/polymer-legacy-adapter#^22.0.2
* @vaadin/vaadin-lumo-styles#^22.0.0
* @vaadin/vaadin-material-styles#^22.0.0
* @vaadin/vaadin-themable-mixin#^22.0.0