gatanaso/multiselect-combo-box-flow

Multi-select-combo-box component for Vaadin

multiselect-combo-box-flow's Issues

Combo Box fails to initialize for unclear reasons

I am working on an application that uses Vaadin 14.1.17. When I add a MultiselectComboBox (version 2.3.0) to the main AppLayout, I get the following JavaScript errors and the box fails to render:

TypeError: window.Vaadin.Flow.multiselectComboBoxConnector is undefined

and

TypeError: $0.$connector is undefined

This problem looks a bit like #20, but I suspect the newer Vaadin version to contribute in some way. I also found a workaround by overriding the MultiselectComboBox to use @NpmPackage(value = "multiselect-combo-box", version = "2.3.0") instead of the currently used version 2.2.0. This works despite Maven issuing the following warning:

[INFO] --- vaadin-maven-plugin:14.1.17:build-frontend (default) @ project ---
[INFO] Scanning classes to find frontend configurations and dependencies...
[WARNING] Multiple npm versions for multiselect-combo-box found:  [2.2.0, 2.3.0]. First version found '2.2.0' will be considered.

Could there be incompatibilities between JavaScript files?

Issue when used MultiselectComboBox within the Grid.

grid.getColumnByKey("middleName").setEditorComponent(middleName);

Where middleName is a MultiselectComboBox object.

The problems is, when the cell is clicked in the grid, unable see the drop down list, same thing works perfectly when I add to a Vertical/Horizontal Layout.

Vaadin 14.4.1 running in compatability mode

I have followed the online instructions and attempted to get a simple version of this multiselect combo box working, however it doesn't appear in my page. I see the multiselect-combo-box component in the page, but there is no combo rendered. We are running in compatibility mode and so I'm wondering if that might be the issue? We are also using the com.devsoap.vaadin-flow gradle plugin.

Multiselect is not displayed on IE11

Hi Goran,
thank you very much for your help.

Multiselect is not displayed on Internet Explorer 11.
Multiselect version 1.0.0
Vaadin version 13.0.8

Simple project with a button, a combobox and a multiselect.

MainView.java

@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends Div {
    public MainView() {
        Button button = new Button("Click me",
                event -> Notification.show("Clicked!"));
        
        //multiselect 
        List<String> multiselectItems = Arrays.asList(new String[] {"Orange", "Blue", "Yellow", "Red", "Green" });
        MultiselectComboBox<String> multiselect = new MultiselectComboBox<>();
        multiselect.setItems(multiselectItems);
        
        // combobox
        List<String> comboboxItems = Arrays.asList(new String[] {"An item", "Two", "Three", "Four", "Five" });
        ComboBox<String> combobox = new ComboBox<>();
        combobox.setItems(comboboxItems);
        combobox.setWidth("100%");
        
    	VerticalLayout verticalLayout = new VerticalLayout();
    	verticalLayout.setWidth("100%");
    	verticalLayout.add(multiselect, combobox, button);
    	add(verticalLayout);
    }
}

======================================================================

pom.xml

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.cona.test</groupId>
    <artifactId>multisproj</artifactId>
    <name>multisproj</name>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <failOnMissingWebXml>false</failOnMissingWebXml>

        <vaadin.version>13.0.8</vaadin.version>

        <drivers.downloader.phase>pre-integration-test</drivers.downloader.phase>
    </properties>

    <repositories>
        <!-- Maven central - reduces first-time build time -->
        <repository>
            <id>central</id>
            <url>https://repo1.maven.org/maven2/</url>
            <snapshots><enabled>false</enabled></snapshots>
        </repository>

        <!-- Repository used by many Vaadin add-ons -->
        <repository>
             <id>Vaadin Directory</id>
             <url>http://maven.vaadin.com/vaadin-addons</url>
        </repository>
        <!-- Repository needed for prerelease versions of Vaadin -->
        <repository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases</url>
        </repository>
    </repositories>

    <pluginRepositories>
        <!-- Maven central - reduces first-time build time -->
        <pluginRepository>
            <id>central</id>
            <url>https://repo1.maven.org/maven2/</url>
            <snapshots><enabled>false</enabled></snapshots>
        </pluginRepository>
        <!-- Repository needed for prerelease versions of Vaadin -->
        <pluginRepository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases</url>
            <snapshots><enabled>false</enabled></snapshots>
        </pluginRepository>
    </pluginRepositories>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <type>pom</type>
                <scope>import</scope>
                <version>${vaadin.version}</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-core</artifactId>
        </dependency>

        <!-- Added to provide logging output as Flow uses -->
        <!-- the unbound SLF4J no-operation (NOP) logger implementation -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-testbench</artifactId>
            <scope>test</scope>
        </dependency>
        
        <dependency>
            <groupId>org.vaadin.gatanaso</groupId>
            <artifactId>multiselect-combo-box-flow</artifactId>
            <version>1.0.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- Jetty plugin for easy testing without a server -->
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.15.v20190215</version>
                <configuration>
                    <scanIntervalSeconds>1</scanIntervalSeconds>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <!-- Production mode can be activated with either property or profile -->
            <id>production-mode</id>
            <activation>
                <property>
                    <name>vaadin.productionMode</name>
                </property>
            </activation>
            <properties>
                <vaadin.productionMode>true</vaadin.productionMode>
            </properties>

            <dependencies>
                <dependency>
                    <groupId>com.vaadin</groupId>
                    <artifactId>flow-server-production-mode</artifactId>
                </dependency>
            </dependencies>

            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>copy-production-files</goal>
                                    <goal>package-for-production</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>

        <profile>
            <id>integration-tests</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.eclipse.jetty</groupId>
                        <artifactId>jetty-maven-plugin</artifactId>
                        <version>9.4.15.v20190215</version>
                        <executions>
                            <execution>
                                <id>start-jetty</id>
                                <phase>pre-integration-test</phase>
                                <goals>
                                    <goal>deploy-war</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>stop-jetty</id>
                                <phase>post-integration-test</phase>
                                <goals>
                                    <goal>stop</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <!-- Runs the integration tests (*IT) after the server is started -->
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-failsafe-plugin</artifactId>
                        <version>2.20</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>integration-test</goal>
                                    <goal>verify</goal>
                                </goals>
                            </execution>
                        </executions>
                        <configuration>
                            <trimStackTrace>false</trimStackTrace>
                            <enableAssertions>true</enableAssertions>
                            <systemPropertyVariables>
                                <!-- Pass location of downloaded webdrivers to the tests -->
                                <webdriver.chrome.driver>${webdriver.chrome.driver}</webdriver.chrome.driver>
                            </systemPropertyVariables>
                        </configuration>
                    </plugin>

                    <plugin>
                        <groupId>com.lazerycode.selenium</groupId>
                        <artifactId>driver-binary-downloader-maven-plugin</artifactId>
                        <version>1.0.17</version>
                        <configuration>
                            <onlyGetDriversForHostOperatingSystem>true
                            </onlyGetDriversForHostOperatingSystem>
                            <rootStandaloneServerDirectory>
                                ${project.basedir}/drivers/driver
                            </rootStandaloneServerDirectory>
                            <downloadedZipFileDirectory>
                                ${project.basedir}/drivers/driver_zips
                            </downloadedZipFileDirectory>
                            <customRepositoryMap>
                                ${project.basedir}/drivers.xml
                            </customRepositoryMap>
                        </configuration>
                        <executions>
                            <execution>
                                <!-- use phase "none" to skip download step -->
                                <phase>${drivers.downloader.phase}</phase>
                                <goals>
                                    <goal>selenium</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
</project>

• I made a production build from Eclipse (mvn 'clean package -Dvaadin.productionMode')
  The output is shown below.

[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building multisproj 1.0-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ multisproj ---
[INFO] Deleting C:\Sviluppo\ProgettiJava\Matteo\multisproj\target
[INFO] 
[INFO] --- vaadin-maven-plugin:13.0.8:copy-production-files (default) @ multisproj ---
[INFO] Copying web application files to 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\frontend'
[INFO] 
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ multisproj ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Sviluppo\ProgettiJava\Matteo\multisproj\src\main\resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ multisproj ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 1 source file to C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\classes
[INFO] 
[INFO] --- vaadin-maven-plugin:13.0.8:package-for-production (default) @ multisproj ---
[WARNING] The translated URL 'frontend://bower_components/vaadin-upload/theme/lumo/vaadin-upload-file.html' has no corresponding file on the filesystem, the file is addressed by path='C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\frontend\bower_components\vaadin-upload\theme\lumo\vaadin-upload-file.html'
[INFO] Installing node version v8.11.1
[INFO] Downloading https://nodejs.org/dist/v8.11.1/win-x64/node.exe to C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\cache\node-v8.11.1-win-x64.exe
[INFO] No proxies configured
[INFO] No proxy was configured, downloading directly
[INFO] Copying node binary from C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\cache\node-v8.11.1-win-x64.exe to C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\node\node.exe
[INFO] Installed node locally.
[INFO] Installing Yarn version v1.6.0
[INFO] Downloading https://github.com/yarnpkg/yarn/releases/download/v1.6.0/yarn-v1.6.0.tar.gz to C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\cache\yarn-v1.6.0.tar.gz
[INFO] No proxies configured
[INFO] No proxy was configured, downloading directly
giu 12, 2019 10:45:33 PM org.apache.http.client.protocol.ResponseProcessCookies processCookies
AVVERTENZA: Invalid cookie header: "Set-Cookie: has_recent_activity=1; path=/; expires=Wed, 12 Jun 2019 21:45:34 -0000". Invalid 'expires' attribute: Wed, 12 Jun 2019 21:45:34 -0000
giu 12, 2019 10:45:33 PM org.apache.http.client.protocol.ResponseProcessCookies processCookies
AVVERTENZA: Invalid cookie header: "Set-Cookie: logged_in=no; domain=.github.com; path=/; expires=Sun, 12 Jun 2039 20:45:34 -0000; secure; HttpOnly". Invalid 'expires' attribute: Sun, 12 Jun 2039 20:45:34 -0000
[INFO] Unpacking C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\cache\yarn-v1.6.0.tar.gz into C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\node\yarn
[INFO] Installed Yarn locally.
[INFO] Installing required frontend tools to 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target'
[INFO] Running 'yarn install' in C:\Sviluppo\ProgettiJava\Matteo\multisproj\target
[INFO] yarn install v1.6.0
[INFO] [1/4] Resolving packages...
[INFO] [2/4] Fetching packages...
[INFO] [3/4] Linking dependencies...
[ERROR] warning "polymer-build > [email protected]" has incorrect peer dependency "polymer-analyzer@^3.0.0-pre.17 || ^3.0.0".
[INFO] [4/4] Building fresh packages...
[INFO] Done in 21.85s.
[INFO] Processing frontend files from 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\frontend'
[INFO] Running 'gulp build_es6' in C:\Sviluppo\ProgettiJava\Matteo\multisproj\target
[INFO] [22:46:04] Using gulpfile C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\gulpfile.js
[ERROR] (node:15556) Warning: N-API is an experimental feature and could change at any time.
[INFO] [22:46:04] Starting 'build_es6'...
[INFO] Deleting C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es6 directory...
[INFO] [22:46:04] Finished 'build_es6' after 6.44 ms
[INFO] Starting to process frontend files.
[INFO] Will minify frontend files.
[INFO] Will bundle frontend files.
[INFO] Will hash bundle file names.
[INFO] Will copy files to target directory 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es6'.
[INFO] Starting operations stated above, this might take a while.
[INFO] Writing bundle manifest to 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es6\vaadin-flow-bundle-manifest.json'
[INFO] Build for directory C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es6 complete!
[INFO] Running 'gulp build_es5' in C:\Sviluppo\ProgettiJava\Matteo\multisproj\target
[INFO] [22:46:28] Using gulpfile C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\gulpfile.js
[ERROR] (node:9868) Warning: N-API is an experimental feature and could change at any time.
[INFO] [22:46:28] Starting 'build_es5'...
[INFO] Starting ES5 transpilation.
[INFO] Deleting C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es5 directory...
[INFO] ES5 transpilation completed.
[INFO] [22:46:28] Finished 'build_es5' after 7.13 ms
[INFO] Starting to process frontend files.
[INFO] Will transpile frontend files.
[INFO] Will minify frontend files.
[INFO] Will bundle frontend files.
[INFO] Will hash bundle file names.
[INFO] Will copy files to target directory 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es5'.
[INFO] Starting operations stated above, this might take a while.
[INFO] Writing bundle manifest to 'C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es5\vaadin-flow-bundle-manifest.json'
[INFO] Build for directory C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT\frontend-es5 complete!
[INFO] 
[INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ multisproj ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Sviluppo\ProgettiJava\Matteo\multisproj\src\test\resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.1:testCompile (default-testCompile) @ multisproj ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 2 source files to C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\test-classes
[WARNING] error reading C:\Users\matteo.cona\.m2\repository\org\apache\httpcomponents\httpcore\4.4.6\httpcore-4.4.6.jar; invalid END header (bad central directory offset)
[WARNING] error reading C:\Users\matteo.cona\.m2\repository\org\apache\httpcomponents\httpcore\4.4.6\httpcore-4.4.6.jar; invalid END header (bad central directory offset)
[INFO] 
[INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ multisproj ---
[INFO] Surefire report directory: C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\surefire-reports

-------------------------------------------------------
 T E S T S
-------------------------------------------------------

Results :

Tests run: 0, Failures: 0, Errors: 0, Skipped: 0

[INFO] 
[INFO] --- maven-war-plugin:2.2:war (default-war) @ multisproj ---
[INFO] Packaging webapp
[INFO] Assembling webapp [multisproj] in [C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT]
[INFO] Processing war project
[INFO] Copying webapp resources [C:\Sviluppo\ProgettiJava\Matteo\multisproj\src\main\webapp]
[INFO] Webapp assembled in [734 msecs]
[INFO] Building war: C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT.war
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 02:06 min
[INFO] Finished at: 2019-06-12T22:47:16+02:00
[INFO] Final Memory: 38M/474M
[INFO] ------------------------------------------------------------------------

• I copied the war from target directory (C:\Sviluppo\ProgettiJava\Matteo\multisproj\target\multisproj-1.0-SNAPSHOT.war), renamed into 'multisproj.war', copied into 'webapps' directory on Tomcat (version 8.0.48), then started Tomcat by 'startup.bat'.

Result:
Button and combobox are shown correctly in Firefox, Chrome, Opera, Edge and also in Internet Explorer 11.
Multiselect is not shown on Internet Explorer 11.

Hope it helps.
Thank you very much indeed.

Feature to disable a subset of the items

Is there a plan to introduce a feature to enable/disable a subset of the items in the list? Disabled items should not be selectable and if we disable an already selected item, we shouldn't be able to remove it too.

On item click listener.

Hi. Is it possible to implement on item click listener when in read or editable mode. It would be nice to show user some additional item info on click.

Items are not displayed as selected

I have a form where I incorporated this component and did the binding without any problem.

binder.forField(teamsComboBox).bind(Organization::getTeams, Organization::setTeams);

It works perfect. Save and display values correctly. But if I set the selected values programmatically. These are not shown as selected. The same thing happens that in this bug: Items are not shown as selected if set programmatically.

This allows you to select again the items that have already been loaded as values.

Vaadin version: 14.1.21
Multiselect-combo-box-flow version: 2.4.0
Java version: 11
Tested on: Google Chrome 80 and Firefox 74

New Features: Hide/Disable Input field + Improve Compact Mode

Hey Goran,

AWESOME Component: Simple and clear.

Still a couple of questions/requests:

• is it possible to hide the input field (=no more user search with the keyboard)? to disable it?
• an "enhanced" compact mode would be great: showing only the first selected item, then the count of selected items (see the "Kategorie" component in https://www.galaxus.ch/de/search?q=processor )

Again, great work!
Best Regards,
Fred

Uncaught TypeError: Cannot read property 'comboBox' of undefined

Hi Goran,

Very good add-on, congrats!
But there is a problem when you want to use it a an editor component in a grid.

Uncaught TypeError: Cannot read property 'comboBox' of undefined
    at eval (eval at <anonymous> (multiselectComboBoxConnector.js?ec3f:7), <anonymous>:1:23)
    at eval (multiselectComboBoxConnector.js?ec3f:34)

Here is the sample code to generate the issue:

public class MainView extends VerticalLayout {

	public MainView() {
		GridPro<Person> grid = new GridPro<>();

		MultiselectComboBox<String> roleSelector = new MultiselectComboBox<>();
		roleSelector.setItems("User", "Admin");

		grid.addEditColumn(Person::getName).text((p, val) -> p.setName(val)).setHeader("Name");
		grid.addEditColumn(p -> getRoles(p.getRoles()))
				.custom(roleSelector, (p, vals) -> p.setRoles(new ArrayList<>(vals))).setHeader("Roles");

		grid.setItems(new Person(), new Person(), new Person());
		add(grid);
	}

	private String getRoles(List<String> roles) {
		if (roles == null || roles.isEmpty()) {
			return "-";
		} else {
			return roles.stream().collect(Collectors.joining(", "));
		}
	}
}

Person object looks like this:

public class Person {
	private String name;
	private List<String> roles;

	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public List<String> getRoles() {
		return roles;
	}
	public void setRoles(List<String> roles) {
		this.roles = roles;
	}
}

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-combo-box-item" has already been used with this registry

I am using Vaadin 14. I tested this add on by adding the dependencies in pom.xml. Then I only added following lines of code in my project:

        MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();
        multiselectComboBox.setLabel("Select items");
        multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4"); 

After the addition of above code, the UI stopped rendering. I am getting following errors on the browser console:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-combo-box-item" has already been used with this registry
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-item.js?babel-target=es6:180:16)
    at Module.../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-item.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:1276:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-dropdown-wrapper.js?babel-target=es6:4:83)
    at Module.../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-dropdown-wrapper.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:1252:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js?babel-target=es6:8:95)
    at Module.../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:1288:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js?babel-target=es6:4:88)

New feature : close combox items list by clicking on dropdown button

Is is possible to add a feature to close comboxlist items list overlay by clicking back on dropdown button (same button to open selection list), in addition of clicking anywhere else outside the selection list?

Minor cosmetic issue

Note that the second and subsequent items are aligned ón the left border, iso with a bit of space in between, as with the first item.

Thanks for a nice component...!

Item disappears clicking outside the combobox field

Hi Goran.
Thank you very much for this job! I appreciate it. I just experimented a little bug and I would be very glad if you could investigate it.

As the title suggests, you can investigate this bug as follows:

• Just open your demo page (https://multiselect-combo-box-flow.herokuapp.com/)
• Click on "Choose"
• Click "Item 1"
• Click once again "Choose"
• Click on the white area on the page

The item as you see disappear. Now if you do following:

• Click on "Choose"
• Click on the white area on the page

The item appears again :-)

Some info:
Browser: Google Chrome
Library version: 2.2.1.rc1

Item labels not genarated

Steps do reproduce:

1. Create component with ItemLabelGenerator
2. Set enabled to false
3. Trigger somewhere in code to make component enabled and set elements
4. Try to pick elements on the UI

Result: Elements are loaded without generated labels and cannot be selected

Running on Vaadin16

I recently upgraded to vaadin16. A page with a multiselect-combobox shows the following message in the top right corner:

Component does not work together with vaadin-combo-box-flow

Issue:
When using multiselect-combo-box-flow in a project with vaadin-combo-box-flow apparently there is a problem whilst building the frontend with webpack. The Build is successful, but results in most of the used webcomponents throwing Errors.
For example:

• undefined connectors for various components (context menu, select, grid, ...)
• unsupported operation in vaadin-combo-box-item.js:178

Expected:
No errors and working components when using vaadin-core components with multiselect-combo-box-flow

Sidenote:
This might be a vaadin-flow issue, but since i'm not sure about that it is posted here.

Vaadin 15 compatibility

It seems the component is currently not compatible with Vaadin 15.

Client side console error: webpack-internal:///../target/flow-frontend/FlowClient.js:205 'frontend://multiselectComboBoxConnector.js' could not be loaded.

Beside the legacy code can be dropped from multiselectComboBoxConnector.js. With V15 Bower mode isn't supported anymore.

Does someone know a simple workaround for version 2.4.0 without copying and modifiying the dependecy source to the project and modifying it?

Missing check icon by using PopUp Window

Hello Goran!

I am using your great component version 2.0.0.rc2 with vaadin 14. I works perfectly in view extending Vertical Layout in my project.

But using it in a Popup-Dialog the check symbol in the dropdown for selected items is missing. (see attachment) A normal ComboBox shows the check symbol in the dropdown for selected items.

Here the code:

public class ConditionDialog extends Dialog {

@Autowired
public ConditionDialog(...) {

ComboBox comboBox = new ComboBox<>("Browsers");
comboBox.setItems("Google Chrome", "Mozilla Firefox", "Opera",
"Apple Safari", "Microsoft Edge");

				   addSimpleStringDemo();
add(comboBox);
open();

}

private void addSimpleStringDemo() {
MultiselectComboBox multiselectComboBox = new MultiselectComboBox();
multiselectComboBox.setLabel("Multiselect combo box with string items");
multiselectComboBox.setPlaceholder("Add");
multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4");
multiselectComboBox.addSelectionListener(event -> Notification.show(event.toString()));

Button getValueBtn = new Button("Get value");
  getValueBtn.addClickListener(event -> multiselectComboBoxValueChangeHandler(multiselectComboBox));


final FormLayout content = new FormLayout();
content.add(multiselectComboBox);

VerticalLayout layout = new VerticalLayout();
layout.add(content);

add(layout);

}

private void multiselectComboBoxValueChangeHandler(MultiselectComboBox multiselectComboBox) {
Set selectedItems = multiselectComboBox.getValue();
String value = selectedItems.stream().collect(Collectors.joining(", "));
Notification.show("Items value: " + value);
}
}

Something by using your component in a pop-up dialog will cause this error. Do you have any idea ?

Thank you very much, André

Feature request: Order of items should (also) be based on Comparable

Similar to this item, not not entirely, so it seems.

I would appreciate if the Set items that are added via setItems(..) are not only sortable by alphabet, as by setOrdered(true), but also by following / implementation of the Comparable interface. I've set a custom rank for my items in this way (and hoped this would already work).

Much appreciated. 🙏🏻

Multiselect with binder and converter

I found another annoying bug. It happens in combination with binder and converter. When filtering and selecting values with enter key I get null values on beans which has been previously selected.
It's annoying bug, because I thing filtering is crucial for such a component.

To reproduce:

• git clone [email protected]:uros.kristan/multi-select-field-test.git
• git checkout binder-problem

Run project and then:

• filter values 888 , 99, 999, ...
• click on save and you'll see some null values in written bean

BR, Uroš

Vaadin 14 - npm support

Adding the component to a Vaadin 14 project, with the "new" npm packaging, the component is not displayed, only an empty tag is created:

Can't convert enumtype to Set<>

I have an Enum Class name PlayerRole and when I binding this multiselectcombobox with a grid it shows "Bad return type in method reference cannot convert playerRole to set<>"

My code is:

binder.forField(playerRoleComboBox)
.asRequired()
.bind(Player::getPlayerRole,Player::setPlayerRole);

How can i bind this. Thanks in advance.

Javascript Uncaught TypeError: Cannot read property 'comboBox' of undefined at Object.initLazy (multiselectComboBoxConnector.js?ec3f:33)

Hi Goran.
Again thanks for great addon.

I find out that on page refresh I get some strange javascript errors.

8634D9D71A7734952088B7D2A08EB3DE.cache.js:980 Exception is thrown during JavaScript execution. Stacktrace will be dumped separately. tt @ client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:980 client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:195 (TypeError) : $0.$connector.confirm is not a function KB @ client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:195 client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:54 Uncaught TypeError: Cannot read property 'comboBox' of undefined at Object.initLazy (multiselectComboBoxConnector.js?ec3f:33) at HTMLElement.eval (eval at tt (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:980), <anonymous>:3:70) at Object.eval (eval at tt (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:980), <anonymous>:3:87) at tt (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:980) at st (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:937) at qt (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:562) at Yq (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:479) at ur.vr [as W] (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:988) at oA (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:870) at zv (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:981) at hx.ix [as J] (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:988) at Function.Dl (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:988) at d (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:638) at Set.forEach (<anonymous>) at gl (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:754) at HTMLElement.s.ready (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:988) at HTMLElement._enableProperties (properties-changed.js?2b39:333) at HTMLElement.connectedCallback (properties-mixin.js?2f2d:214) at HTMLElement.connectedCallback (element-mixin.js?301f:619) at xv (client-8634D9D71A7734952088B7D2A08EB3DE.cache.js:944)

The component won't open in a Vaadin Dialog

Original post: #46 comment.

I could not achieve to display the multiselect like it did before a vaadin upgrade. It worked in the past and since I updated and switched to Material theme I had no luck with it.

I was using the version 14.1.25 and now the version 14.4.0. I tried the "intermediate" version 14.3.7 but the issue looked like the same.

I think I'm in the same situation as #46.

This a sample of my code:

MultiselectComboBox<XX> multiselectComboBox = new MultiselectComboBox<>("", XX.values());
multiselectComboBox.setValue(XX.Y);

Dialog dialog = new Dialog();
dialog.add(multiselectComboBox);

// Prepare the button that displays the multi statuses filter.
Button button = new Button(new Icon(VaadinIcon.FILTER), event -> {
    dialog.open();
});

When I click on the button, I have the (TypeError) : $0.$connector is undefined error and (TypeError) : window.Vaadin.Flow.multiselectComboBoxConnector is undefined.

I'm using Maven:

<dependency>
	<groupId>org.vaadin.gatanaso</groupId>
	<artifactId>multiselect-combo-box-flow</artifactId>
	<version>2.4.2</version>
</dependency>

I tried to use a wrapper element as suggested (div) but it didn't work for me.

For now I switched to the latest Vaadin component MultiSelectListBox<>, introduced in 14.1, because I couldn't wait more for a fix. But your component is still more user-friendly than the Vaadin one.

By the way, thank you very much for this component, it did save a lot of time :).

Trying to use multiselect-combo-box with spring-boot vaadin integration

Hi,

I'm new to both spring-boot and vaadin and have been following the guide of spring-boot showing how to use vaadin.

I wanted to use the multiselect-combobox and followed this tutorial.

However, when I start my application nothing is shown and if I inspect the source code, I can see an empty tag.

Here is the content of my pom.xml.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>test</groupId>
    <artifactId>mytest</artifactId>
    <version>0.1.0</version>
    <packaging>war</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- JPA Data (We are going to use Repositories, Entities, Hibernate, etc...) -->

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <!-- Use MySQL Connector-J -->

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <type>jar</type>
        </dependency>

        <dependency>
            <groupId>com.vladmihalcea</groupId>
            <artifactId>hibernate-types-52</artifactId>
            <version>2.6.1</version>
        </dependency>

        <dependency>
            <groupId>org.vaadin.gatanaso</groupId>
            <artifactId>multiselect-combo-box-flow</artifactId>
            <version>2.0.0.rc2</version>
        </dependency>

<!--        <dependency>
            <groupId>org.webjars.bowergithub.vaadin</groupId>
            <artifactId>vaadin-combo-box</artifactId>
            <version>4.2.7</version>
        </dependency>-->
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>10.0.13</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <properties>
        <java.version>11</java.version>
    </properties>

    <repositories>
        <repository>
            <id>vaadin-addons</id>
            <url>http://maven.vaadin.com/vaadin-addons</url>
        </repository>
    </repositories>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <!--  Maven compiler plugin -->
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.0</version>
                <configuration>
                    <release>${java.version}</release>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

Am I doing something wrong?

Thanks!

Vaadin 14 production mode: Failed to find the following imports

To demonstrate the issue, I created a plain Vaadin starter and added multiselect-combo-box-flow 2.1.0 as a dependency. The MainView's only component is the MultiselectComboBox.
Normal building works without problems. But when I try to build it in production mode, I get the following errors:

Failed to find the following imports in the node_modules tree:
- multiselect-combo-box/src/multiselect-combo-box.js

ERROR in ../target/frontend/generated-flow-imports.js?babel-target=es5
Module not found: Error: Can't resolve 'multiselect-combo-box/src/multiselect-combo-box.js?babel-target=es5' in '/plain-starter/target/frontend'
 @ ../target/frontend/generated-flow-imports.js?babel-target=es5 10:0-60

ERROR in ../target/frontend/generated-flow-imports.js?babel-target=es6
Module not found: Error: Can't resolve 'multiselect-combo-box/src/multiselect-combo-box.js?babel-target=es6' in '/plain-starter/target/frontend'
 @ ../target/frontend/generated-flow-imports.js?babel-target=es6 10:0-60

Weird error after upgrade

When i upgrade from version 2.0.0.rc3 to any higher (till 2.2.0) i get the following errors

TypeError: e.$ is undefined
TypeError: $0.$connector.updateSize is not a function
TypeError: $0.$connector.set is not a function
TypeError: $0.$connector.confirm is not a function

Remove banner.txt

I added multiselect-combo-box-flow to the (Maven) dependencies of a Spring Boot project and noticed that the application suddenly showed the MultiselectComboBox banner. I did not yet define any banner and it was no problem to replace it with an own banner, since those are loaded with higher priority. However, I would suggest to remove the banner.txt since such a behaviour is not what I would expect of a library-type dependency.

Order selected items

As an enhancement, I think it should be very nice to have the capability to move the items once they are selected. Think about it for example as an ordered list (1st, 2nd, 3rd, ...)

Allow setting of custom ItemFilter<T>

Using the vaadin standard combobox it is possible to pass in an ItemFilter<T> if setting the DataProvider by using

public void setDataProvider(ComboBox.ItemFilter<T> itemFilter, ListDataProvider<T> listDataProvider)

(see API Documentation).

It would be very useful to have this method also provided for the multiselect combobox.

getValue() returns list with null value after filtering

Steps to reproduce:

• create MultiSelectComboBox and a Button to invoke getValue()
• add more items than pageSize (server-side filtering is used)
• select an item ("item 0")
• type some text (e.g. "155), so that items got filtered until one item is shown ("item 155")
• select that item
• now two items are selected in MultiSelectComboBox ("item 0" and "item 155")
• push the button

getValue() now returns a list like [null, "item 155"]

My investigation:
The for-loop in MultiSelectComboBox.presentationToModel() calls for each item in the combo-box set.add(multiselectComboBox.getKeyMapper().get(key));. The keyMapper does not know something about the first selected item, because the filtering cleared all keys and created new ones.

Workaround
call setPageSize() to a number higher than items are in the MultiSelectComboBox. I guess client side filtering does not clear the keyMapper cache.

I hope you can follow my description.

New feature: I18N compliant compact mode

Hello!

First of all, thank you for your plugin!

I open this issue to ask you a new feature: be able to translate the text in the compact mode.
Right now, this possibility doesn't exist, in compact mode, the text is always "x values".

Thank you! :-)

Sort selectedItems

Hi,
I use your component as selector of Days of week. In selection dialog it's ok - values are sorted as on input. When I select item these values are not correctly sorted. Guess it's because of Set (not sorted). I am attaching an image where incorrect sorting is visible. setOrdered(BOOLEAN) doesn't take any effect.

I am using version for Vaadin 14 - 2.5.0

Enum is created from English values (MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY) and caption generator is used for translations

Value of the field is lost when filtering

When i use a ConfigurableFilterDataProvider and setFilter then the value of the field is lost.

Issue using MultiselectComboBox within Dialog.

Hi Goran,
how are you? :)

Your multiselect is amazing and works pretty well :)
I have found the following issue:
items are not displayed if the multiselect is placed into a dialog.

I attach a simple test app and two screenshots.
The test app compare the behavior of the combo box and the multiselect combo box (both into dialogs).

Let me know if you need something more.
Thank you in advance :)
Matteo

test-multisel-dialog.zip

Add addCustomValueSetListener functionality for Multiselect combo box

Another feature for Multiselect combo would be addCustomValueSetListener as seen at ordinary combobox.

Dropdown not showing after changing visibility

I try to show a multiselect after clicking a button by changing its visibility.

multiselect.setVisible(false);
button.addClickListener(event -> multiselect.setVisible(true));

This causes the dropdown list with all items to not show up after clicking the button / writing in the textfield.

Adding a multiselect to a layout/div and changing visibility on the layout works fine.

Suffix Component Feature

Thank you for creating this awesome component. Is there any chance to add a custom component at the end of the multiselect component similar to Vaadins built in setSuffixComponent()?

Thank you

Taking more vertical space in "read-only" mode

I noticed that when used in a FormLayout, the vertical height is more than normal when the component is in "read-only" mode. Normal height is resumed when in "edit" mode. (Tried version 3.0.0.rc1 and earlier versions)

A MultiselectComboBox in a Dialog unexpectedly closes it on mobile devices

I recently encountered a strange problem when using a MultiselectComboBox in a Dialog on mobile devices (only!). I am not sure whether this is a Dialog issue or a MultiselectComboBox issue (or a combination), but I did not find a Vaadin Standard Component that shows the same behavior. I attached an example that illustrates the problem:
multiselect-combo-box-dialog-issue.zip

When the dialog is open, the behavior is as follows:

• Variant 1
  1. Clicking on the combobox opens the drop-down menu.
  2. Clicking outside the combobox, but not outside the dialog closes the drop-down menu, but not the dialog.
• Variant 2
  1. Clicking on the combobox opens the drop-down menu.
  2. Clicking outside the dialog while the drop-down menu is open closes the dialog.
• Variant 3
  1. Clicking on the combobox opens the drop-down menu.
  2. Selecting an item shows that it was selected.
  3. Clicking outside the combobox closes the entire dialog, regardless of whether the click was outside or inside the dialog.

In the last case I would expect the dialog to close only if the click was outside of it. Note that the problem only occurs on mobile devices, but can be reproduced by using your favorite browsers mobile device simulation. If viewed by a desktop computer normally, variant 3 behaves the same as variant 1 and 2, i.e. selecting an item does not make a difference. I assume that there is come kind of problem with the handling of touch events that causes this.

I produced this issue with Vaadin 14.2.3 and MultiselectComboBox 2.5.0.

Overriding theme for sub elements

We have certain global theme changes for input fields that are causing the multi-select component to have rendering issues. I am able to affect styling up to a point, but am not able to remove the border on the input-field I indicate in this screencast https://prnt.sc/v5dgzo

My understanding, after discussing with Vaadin folks, is that I would need to use theme propogation (as discussed here https://vaadin.com/docs/v14/themes/styling-components.html#sub-components) to target nested components. Does the multi-select-combo-flow component support this? I'm not sure that it does, given that it doesn't implement HasTheme? Do you have recommendations for me on this?

One option is for us to revert our component to vaadin defaults, so that the multi-select component fits in, but I'm not sure if that will be an option for us, given other complementary styling changes that have occurred. I suppose another option might be to make the input style changes applicable with a theme (so that some of the effects of our styling changes are isolated). But that still leaves us with the multi-select needing certain styles in subcomponents - in order to blend in - that might not be possible (like making the background color of the input white, for example).

Any suggestions are appreciated. Thanks!

And some off topic questions:

1. Is there a way to control the order of the selected items (note order might not be lexical)?
2. Can you control the backspace behavior for deletion? It seems a little too easy to delete items with backspace.
3. Can the required indicator be customized? We use the asterisk before the label where your component has a dot after.
4. When multiple values are selected in the component, and the values wrap, eventually the dropdown will cover the "Choose" box, until it is dismissed. Seems like you'd want the combo to shift to always be at the bottom. Or maybe have an option where the Combo is always at the beginning?
5. Seems that in compact mode you lose the ability to type (and filter) in the component. Is there a way around this? Wondering what the reason is for taking away this capability in compact mode.

DOMException with Vaadin 17.0.0

The multiselect-combo-box works great with Vaadin 16.0.0.3. After updating to Vaadin 17.0.0 the following exception is thrown:

vaadin-item.js?0d7d:89 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-item" has already been used with this registry at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js:96:16) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1136:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js:3:77) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1160:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js:5:103) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1280:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js:3:90) eval @ vaadin-item.js?0d7d:89 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1136 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-item.js?badb:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1160 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-combo-box-item-styles.js?6dca:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1280 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-combo-box-light.js?f32d:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1292 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ multiselect-combo-box.js?5bee:1 ../node_modules/.pnpm/registry.npmjs.org/multiselect-combo-box/2.4.2/node_modules/multiselect-combo-box/theme/lumo/multiselect-combo-box.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:8178 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ multiselect-combo-box.js?6375:1 ../node_modules/.pnpm/registry.npmjs.org/multiselect-combo-box/2.4.2/node_modules/multiselect-combo-box/multiselect-combo-box.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:8094 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ dashboard-view.ts:14 ./views/dashboard/dashboard-view.ts @ vaadin-bundle-038fd2c1653433b061c1.cache.js:18321 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ index.ts?5b66:1 ./index.ts @ vaadin-bundle-038fd2c1653433b061c1.cache.js:18129 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 (anonymous) @ vaadin-bundle-038fd2c1653433b061c1.cache.js:199 (anonymous) @ vaadin-bundle-038fd2c1653433b061c1.cache.js:202

Read-only mode has visual problems

In read-only mode multiselect combobox appears squeezed if it's empty. If it's not empty, it's not as same as the original combobox; there is no down-arrow, a little bit shorter and the text is a little bit lighter. You can find the screenshots in the attachment. (First component is the original combobox, the second one is multiselect...)

Join character when in readonly mode

Hi Goran.

Is it possible to change colon (,) sign to semi-colon(;) when in readonly mode?

Support Async Loading of Items

I am using setDataProvider().

but in my AbstractBackEndDataProvider, sizeInBackEnd() is never called, and so all items are loaded from the backend instead of "as needed" as defined in the javadoc

Exception when I update Vaadin to 14.3.0.alpha1

If I tried to vaadin 14.3.0.alpha1, I've got an error.
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-combo-box-item" has already been used with this registry
at eval (webpack-internal:///../node_modules/multiselect-combo-box/node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-item.js:189:16)

I think it's because of this error (You can see here a ticket vaadin/flow#8475):
2020-06-05 15:53:46.023 INFO 94148 --- [ main] dev-webpack : Running webpack to compile frontend resources. This may take a moment, please stand by...
2020-06-05 15:53:49.740 ERROR 94148 --- [ webpack] dev-webpack : ERROR in @vaadin/vaadin-combo-box
2020-06-05 15:53:49.797 ERROR 94148 --- [ webpack] dev-webpack : Multiple versions of @vaadin/vaadin-combo-box found:
2020-06-05 15:53:49.797 ERROR 94148 --- [ webpack] dev-webpack : 5.1.1 ../multiselect-combo-box//@vaadin/vaadin-combo-box from ../multiselect-combo-box//@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js
2020-06-05 15:53:49.798 ERROR 94148 --- [ webpack] dev-webpack : 5.2.0-alpha1 ...~/@vaadin/vaadin-combo-box from /Users/jean-...@vaadin/vaadin-combo-box/src/vaadin-combo-box.js

So perhaps there is a error with a frontend dependency, if I can find a solution I will post it here :).

Steps to reproduce:
Run a project in version 14.3.0.alpha1 with a combobox and a multicombobox

Feature: add setRenderer functionality like ComboBox and Select

I would love to be able to define a ComponentRenderer (or any other Renderer) so I can show more than just a String as item label.
This will make the usage of MultiselectComboBox more similar to the actual ComboBox, as I always use a Renderer for those. Being able to only show a String feels like a step backwards.

Filtered items: You can choose only one item and then filter disappears.

When you filter items in Combobox by writing some text in there you can choose only one filtered item, and then the combo is refreshed and a filter is removed.

Steps to reproduce:

1. In Multiselect Combobox type text which filters the items.
2. Select one of the items.
3. Expanded & Filtered Combobox will be refreshed.
4. You have to type the filter again to select an additional item.

Expected result:
The filter remains and you can perform multiple choices until you click outside of the Multiselect Combobox

DOMException with Vaadin 17.0.0

The multiselect-combo-box works great with Typescript client view in Vaadin 16.0.3. After updating to Vaadin 17.0.0 the following exception is thrown:
vaadin-item.js?0d7d:89 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-item" has already been used with this registry at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js:96:16) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1136:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js:3:77) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1160:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js:5:103) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1280:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js:3:90) eval @ vaadin-item.js?0d7d:89 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1136 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-item.js?badb:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1160 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-combo-box-item-styles.js?6dca:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1280 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-combo-box-light.js?f32d:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1292 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ multiselect-combo-box.js?5bee:1 ../node_modules/.pnpm/registry.npmjs.org/multiselect-combo-box/2.4.2/node_modules/multiselect-combo-box/theme/lumo/multiselect-combo-box.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:8178 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ multiselect-combo-box.js?6375:1 ../node_modules/.pnpm/registry.npmjs.org/multiselect-combo-box/2.4.2/node_modules/multiselect-combo-box/multiselect-combo-box.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:8094 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ dashboard-view.ts:14 ./views/dashboard/dashboard-view.ts @ vaadin-bundle-038fd2c1653433b061c1.cache.js:18321 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ index.ts?5b66:1 ./index.ts @ vaadin-bundle-038fd2c1653433b061c1.cache.js:18129 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 (anonymous) @ vaadin-bundle-038fd2c1653433b061c1.cache.js:199 (anonymous) @ vaadin-bundle-038fd2c1653433b061c1.cache.js:202

Component doesn't align correctly in layout with baseline-alignment

In a HorizontalLayout with Alignment.BASELINE (or in a flexbox with align-items: baseline), the MultiSelectComboBox is not rendered vertically in line with other Vaadin components like textfield and combobox.

To reproduce:

        HorizontalLayout test = new HorizontalLayout();
        test.setAlignItems(FlexComponent.Alignment.BASELINE);
        MultiselectComboBox<String> mscb = new MultiselectComboBox<>();
        mscb.setLabel("Foo");
        test.add(mscb, new TextField("Bar"), new ComboBox<>("Baz"));

Baseline alignment is sometimes required instead of the default normal (i.e. stretch) alignment of HoriztonalLayout, to prevent taller elements from forcing all others to stretch, while top or bottom alignment would interfere with consistent alignment of field labels etc.

In vaadin-text-field et.al., correct baseline alignment is achieved using a ::before element on the shadow root. This is missing in MultiSelectComboBox. However, adding the pseudo element is probably not sufficient since due to the root being a flex column. Presumably, the label and field need to be wrapped into a wrapper div similar to the one in vaadin-text-field.