Directory

← Back

multiselect-combo-box

A multiselect combo box web component compatible with the Vaadin Web Components

Author

Rating

Popularity

<100

Published on Vaadin  Directory Stars on vaadin.com/directory Tests

<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

  1. Fork the multiselect-combo-box repository and clone it locally.
  2. Make sure you have npm (packaged with Node.js) installed locally.
  3. 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 the multiselect-combo-box
  • polymer-2 the Polymer 2.x version of the multiselect-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.

Compatibility

(Loading compatibility data...)

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 Components multiselect-combo-box - Vaadin Add-on Directory
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/gatanasomultiselect-combo-box) [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/gatanasomultiselect-combo-box.svg)](https://vaadin.com/directory/component/gatanasomultiselect-combo-box) [![Tests](https://github.com/gatanaso/multiselect-combo-box/actions/workflows/tests.yml/badge.svg)](https://github.com/gatanaso/multiselect-combo-box/actions/workflows/tests.yml) # \ A multiselect combo box web component compatible with the [Vaadin Web Components](https://github.com/vaadin/web-components) #### [Demo ↗](https://multiselect-combo-box.web.app) | [Material Theme Demo ↗](https://multiselect-combo-box-material.web.app) ## 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: ``` ``` > For more usage examples, see the [demo](https://multiselect-combo-box.firebaseapp.com). ## Project setup 1. Fork the `multiselect-combo-box` repository and clone it locally. 1. Make sure you have npm (packaged with [Node.js](https://nodejs.org)) installed locally. 1. 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 the `multiselect-combo-box` - `polymer-2` the Polymer 2.x version of the `multiselect-combo-box` which is not maintained anymore. ## Java API The Vaadin Flow Java compatible version of this component is available on the [Vaadin Directory](https://vaadin.com/directory/component/multiselect-combo-box) and [GitHub](https://github.com/gatanaso/multiselect-combo-box-flow).
View on GitHub
Online 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

Online