gatanaso / multiselect-combo-box Goto Github PK

Hi and thanks for this really usefull component.

Problem: Could not use MultiSelectComboBox in Vaadin 22.0.5 flow application.

Vaadin version: 22.0.5
MultiSelectComboBox version: 4.0.0.rc2

Example of usage:

MultiselectComboBox<Entity> entityMultiSelect = new MultiselectComboBox<>("My MultiSelect");
entityMultiSelect.setItemLabelGenerator(Entity::getLabel);
entityMultiSelect.setWidthFull();
entityMultiSelect.setItems(new Entity("Foo"), new Entity("Bar")); //Also try with List
this.add(permissionComboBox);   //This is a VerticalLayout

Result:
MultiSelectComboBox is not display in the client browser.

Vaadin tell this while I try to navigaue to the page where the MultiSelect is present:

Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.

The error has occurred in the JS code: '$0, return (function() { window.Vaadin.Flow.multiselectComboBoxConnector.initLazy(this)}).apply($0)'

Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.

The error has occurred in the JS code: '$0, $1, return $0.$connector.updateSize($1)'

Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.

The error has occurred in the JS code: '$0, $1, $2, $3, return $0.$connector.set($1,$2,$3)'

Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.

The error has occurred in the JS code: '$0, $1, $2, return $0.$connector.confirm($1,$2)'

TypeError: window.Vaadin.Flow.multiselectComboBoxConnector is undefined (http://localhost:8080/VAADIN/build/vaadin-3-dcbf5090efb06a1106c4.cache.js line 11 > eval line 998 > Function:3:22)

TypeError: $0.$connector is undefined (http://localhost:8080/VAADIN/build/vaadin-3-dcbf5090efb06a1106c4.cache.js line 11 > eval line 998 > Function:3:1)

TypeError: $0.$connector is undefined (http://localhost:8080/VAADIN/build/vaadin-3-dcbf5090efb06a1106c4.cache.js line 11 > eval line 998 > Function:3:1)

TypeError: $0.$connector is undefined (http://localhost:8080/VAADIN/build/vaadin-3-dcbf5090efb06a1106c4.cache.js line 11 > eval line 998 > Function:3:1)

Further information:
I've try all vaadin version from 22.0.0 up to 22.0.5 but none work with the 4.0.0-rc2 MultiSelect. I now the version is not stable since it's an Release Candidate.

Thanks in advance for your help

Sorry if my issue is not correctly formatted, It's my first issue on GitHub 🙂

Steps to reproduce:

• Go to the live demo
• Click into the Combobox
• Type in "helium"
• select the "Helium" item -> it is added to the selection. the typed in filter "helium" is appended next to the selection, Thats ok
• click outside the Combobox to close the popup
• Nothing is selected --> Not ok

Hello,

Great work !
I have to use such a component both with Chrome and IE.
When I play with demo, I See that it does'nt work on it !
Is there any turn arround ?

Thanks.

Dominique

Hi Goran

I've struggled to get the multiselect-combo-box to work. I've attempted to debug and have noticed that the _comboBoxValueChanged never gets fired so wondered if there was a dependency / version issue with vaadin-combo-box-light?

I have created and empty project and added the multiselect-combo-box, which demonstrates the issue: https://github.com/kedigby/multiselect-combo-box-demo

Hi!

v3.0.0-alpha.1 is currently dependent on vaadin@22. If we change the dependent versions to the range from 22 to 23, it would work fine with also vaadin@23beta. At least it works fine in my use case. How about considering to specify the versions in range?

Thanks.

tokens in the second, third row asf lack padding or margin to the left which the first row has

If a combo box is in an opened state (i.e. a dropdown is opened) clicking on a toggle button should turn the combo box back to a closed stated (i.e. close the dropdown).

The original Vaadin combo box behaves like that so I think the multiselect combo box should follow this behavior.

Great component.
It would be very useful to allow users to input custom values, as made possible by vaadin-combo-box.

Running 4.0.0-rc2 and Vaadin 23.1.6 there is a JS error in browser console.

Uncaught TypeError: this.$.comboBox.$.dropdown._setOverlayWidth is not a function at eval (multiselect-combo-box.js?48c8:481)

Thing the same problem occurs with Vaadin 23.1.3 and maybe more versions aswell.

This should allow for custom filters as described here: https://cdn.vaadin.com/vaadin-combo-box/5.1.0/demo/#combo-box-filtering-demos. Currently that listener doesn't fire if placed on the main element.

Currently, I'm having to do something along the lines of:

multiselectElement.$.comboBox.addEventListener('filter-changed', (e) => {
      multiselectElement.$.comboBox.filteredItems = multiselectElement.items.filter(
          (item) => {
            const nameWithId = item['name'] + ' ' + item['id'];
            return nameWithId.toString().toLowerCase().indexOf(e.detail.value.toLowerCase()) > -1;
          });
    });

It works, but relies on going deep into the element, like it used to be with the renderer until you added that (works great BTW). Would be great to have that at the top level.

@gatanaso Just a heads up, Vaadin is in the process of updating lots of their components to the next point-release (mainly RTL styles I think). This includes vaadin-combo-box to 5.1.0 (alpha for a few weeks), which conflicts with your ^5.0.9 in package.json. You may want to see if ^5.0 is sufficient as that will allow anything below a hypothetical version 6. This is an issue with web components in that I could be using your component on the same page as a newer version of vaadin/vaadin-text-field. The page will try to load both versions and fail of course.

FYI, here are the latest (includes alpha) versions. I just use @vaadin/vaadin-core in my projects, but that might be overkill for you.

Latest:

"@vaadin/vaadin-combo-box": "^5.1.0-alpha1",
"@vaadin/vaadin-control-state-mixin": "^2.1.3",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-text-field": "^2.6.0-alpha4",
"@vaadin/vaadin-themable-mixin": "^1.5.2",

Apart from that the demos don't work because somehow they violate the EU regulations and therefore I get sent to a stop-page from the EU ... :-(

I have a little problem running this element with other vaadin elements on the same page:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-material-styles" has already been used with this registry
    at Module../node_modules/multiselect-combo-

This might be something really simple so can you direct me to what I can do about it?

I noticed that the compact mode layout is not consistent with the standard layout and would therefore suggest the following CSS changes (which I also used in my project):

[part="compact-mode-label"] {
	margin: var(--lumo-space-xs);
	color: var(--lumo-body-text-color);
	font-weight: 500;
	padding: 0 calc(0.375em + var(--lumo-border-radius)/4 - 1px);
}

The color and font-weight above are the same as the ones used in non-compact mode. The margin will prevent the combo box from being larger in compact mode compared to non-compact mode (as it currently is, see below). The padding makes no difference in my example, but I took it from the Textfield definition and think it is more flexible.

See the changes below compared to other fields (layouted by Chromium). Note that I am still using the Vaadin standard layouts.

Before:

After:

Our application must be multilingual. But we cannot translate the title of the token-remove-button.

<div part="token-remove-button" title="remove" role="button" on-click="_removeToken"></div>

Either remove the hard coded title or make it configurable.

Hi,

I'm working with Vaadin 14 with compatibility mode on, and I've the problem that without errors in console, the component doesn't appear in the UI.

Can you suggest me any workaround?

Thanks

We found a little bug: in the readOnly mode with empty value, the height is smaller (see picture).
Expected is the height like in normal mode or readOnly with values.

Thanks for great library!
We can close the combobox by clicking the outside of the combbox. In addition to this, I'd like to close it by clicking the toggle button when the combobox is opened.

Now in the compact mode only possible to display 0-n values(that's plugged into the library). It would be nice to add the function of type Integer -> String, which will render this text.

Excuse me, but I didn't find a better place for my question.
The mutliselect-combo-box-flox v14 latest commit uses multiselect-combo-box version 2.5.0.
npmjs.org has this version but I don't find this version on Github.
I like to bugfix # 104 and # 105 multiselect-combo-box-flow issues, but the flow version v14 branch already uses 2.5.0 not the 2.4.2. Thanks in advance for your help!

Implement disabled state for the multiselect-combo-box.

Hi,

I found a clear button is now bigger in the latest demo than it was in v2.4.2.

It seems that --lumo-icons-cross is not applied to the clear button for some reason.

Thanks.

Current

Adding [ordered] to an element with objects for items throws on localeCompare being not a function.

Expected

If the items are objects, the item-label-path should be used to sort them.

Hello and thanks for the great component. I'm having an issue when using this alongside the latest Vaadin components.

version.js:7 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-lumo-styles" has already been used with this registry
    at https://api.local.endpointhealth.dev:2081/__wds-outside-root__/1/node_modules/multiselect-combo-box/node_modules/@vaadin/vaadin-lumo-styles/version.js:7:16

If I set selected items (selectedItems) programmatically, it will be correctly displayed in the text-field area but in the pull-down selection list area, those selected items are not shown as selected. Because of this, I am able to select the items that are already selected!

Are there plans to migrate to latest versions of vaadin (and use lit)?

Hi, I'm working with rails and webpack 3.12.0 and have a problem with the following error

Uncaught TypeError: Class constructor  cannot be invoked without 'new'
    at HTMLElement.VaadinThemePropertyMixin (vaadin-theme-property-mixin.js:4)
    at HTMLElement.VaadinThemableMixin (vaadin-themable-mixin.js:8)
    at HTMLElement.VaadinThemePropertyMixin (vaadin-theme-property-mixin.js:4)
    at HTMLElement.VaadinTabIndexMixin (vaadin-control-state-mixin.js:11)
    at new VaadinControlStateMixin (vaadin-control-state-mixin.js:42)
    at new MultiselectComboBox (multiselect-combo-box.js:129)
    at HTMLElement._stampTemplate (template-stamp.js:451)
    at HTMLElement._stampTemplate (property-effects.js:2495)
    at HTMLElement.ready (element-mixin.js:647)
    at HTMLElement.ready (topic-form.js:227)

install via yarn (1.19.1)

--

I've try with webcompents latest (which is 2.4.0) and it's work well (pure html).

I have no idea why it's broken with rails & webpack.

I made the following observation:

If you compile your application in production mode, then the styles provided in multiselect-combo-box-styles.html, <dom-module id="lumo-combo-box-item-theme" theme-for="vaadin-combo-box-item"> get applied for all comboboxes (also the default vaadin boxes).

Somehow they are part of the #shadow style afterwards.

The result is as follows:

As you can see the ::before element for the checkmark is missing and the padding looks horrible now.

Steps to reproduce:

1. Create a new Vaadin 13.0.0 Project
2. Create a view:

@Route
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
public class MainView extends VerticalLayout {

  public MainView() {
    ComboBox<String> comboBox = new ComboBox<>("Items", "Item 1", "Item 2", "Item 3");
    add(comboBox);
  }
}

3. Add the dependency in the pom.xml:

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

4. Compile using the production-mode maven profile
5. Start the application providing the VM option -Dvaadin.productionMode=true

I am just not sure if thi is a problem of the vaadin production mode compilation process or if the addon is missing something in the implementation?

If you start typing in an item the selection will be reduced. This is good. But the selected values do not match the typed in letters.

With respect to:
https://github.com/gatanaso/multiselect-combo-box/blob/2afa8d93b89d289b3045c5b7f99a257aa844068e/src/multiselect-combo-box.html

Hi,
Is there a quick/automated way that I could use to transpile multiselect-combo-box.html to legacy syntax? e.g. https://polymer-library.polymer-project.org/3.0/docs/devguide/legacy-elements

Extended context:
I am planning to use polymer2 version of multiselect-combo-box from java, not vaadin.
I am using a forked version of vaadin's gwt-api-generator tool to generate the wrappers given the above wc, but it only handles legacy element syntax, thus my question.

Thank you.

The gatanaso/multiselect-combo-box-flow # 104 bug gatanaso/multiselect-combo-box-flow#104 origins from this JS component.

First off, I love the component. It fills a real need in my app. The only additional thing I wish it did was to easily allow me to set the renderer on the `vaadin-combo-box-light element. My dropdown items have a couple of object properties concatenated.

The component should probably not set itself to be 100% by default.

Hey guys!

I am currently using the multiselect-combo-box and when tabbing into the component the label will be selected with the first tab and another tab is needed to tab into the input field itself.
Is there a possibility to skip tabbing to the label?

Thanks!

Hello, what dependencies to you need exactly to get this working on an otherwise empty html page? Or maybe I messed up the imports somehow. Appreciate any pointers because this combo box is really well done.

I've attempted here https://codepen.io/0skar/pen/dyNQzKW?editors=1010.

Hi, I don't know if it's possible right now to allow the user to reorder items manually using some hook. If this is possible, it would be nice to have it documented (btw, I'm pretty interested to know). Otherwise, it would be nice to have a flag to enable reordering using drag-and-drop between the items.

Thank you!

The gatanaso/multiselect-combo-box-flow # 105 bug gatanaso/multiselect-combo-box-flow#105 origins from this JS component.

I wanted to show up tooltip on mouse hover over. To do it I have written code given below:

MultiselectComboBox<Reference> combo = new MultiselectComboBox<>(null, Collections.emptyList());
combo.getElement().setProperty("title", "title");

But as a result, I cannot see my tooltip

When running bower install --save gatanaso/multiselect-combo-box, it will install as a result the ES6/polymer 3 based scripts. They do not contain html files and therefore cannot be used as stated in the readme.

Simplest solution is to download the polymer 2 branch and use the files locally (but not sure, how far they are still maintained or uptodate regarding issues).

I have got a multiselect with fixed width.

The item text is very long, bigger than the multi (please look at the attachment).

Long text should wrap inside multiselect too.

Currently there is a check inside _handleItemRemoved if the component is valid or not. If it is case 1, then a change event is fired; if case 2, then not - in both cases the selectedItems property is changed on client side. This leads to the problem, that server and client side state are not synchrone anymore, when my server side relies on the change event.

I would expect the component to send the change event in every case, since the data has changed. Validation should happen of course, too, to update the visual state, but it should happen parallel to the event firing, so that the empty data is recognizable by listeners (in my case the server side).

(Found the issue in the Polymer 2 variant, but code constellation is the same in master).

A workaround could be listening to the event selected-items-changed, that is fired due to the notifiy: true setting, but then additional handling is needed, since that event is also fired initially.

The current implementation does not match the styling of the rest of the lumo components.
If using it in a form this is clearly a visual break.

It would be nice to have a theme that matches lumo (at least it should have the same style as the default combo box).

One example can be found here:
https://github.com/vaadin/vaadin-combo-box/issues/88#issuecomment-384958301

Attaching a validator to the binder associated to the multiselect, when validation fail, the input element doesn't become coloured of red:

If MultiSelectComboBox is used in the header row of an Grid there are refresh problems, if there is an resize of the MultiselectComboBox.
Solution: As far as I understand, MultiselectComboBox should dispatch an "icon-resize" event whenever its height changes.
See https://vaadin.com/forum/thread/18251264/grid-header-row-overlaps-first-data-row

Improve the styling based on the provided feedback: #6 (comment)

In my project I needed the possibility to select all entries of the combo box and wrote a wrapper for it. However, I think this would be a good improvement for the box itself. In my case the last entry in the combo box had the label "select all" and did the following:

• if not all items are selected, pressing it selects all items
• if all items are selected, pressing it deselects all items
• if any item is selected by pressing it and this causes all items to be selected, "select all" is selected as well
• if any item is deselected by pressing it, "select all" is deselected as well

Although this is a possible way, I think one could achieve a better result by adding a button similar to the existing clear indicator. Maybe this can be extended functionally and visually to do the task as well?

See the following Console Error:

vaadin-text-field.js:148 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-text-field" has already been used with this registry
    at http://neo.ds.dtveng.net:8003/node_modules/@vaadin/vaadin-grid/node_modules/@vaadin/vaadin-text-field/src/vaadin-text-field.js:148:16

When importing multiselect-combo-box. v2.4.2

It was suggested from other devs to try contacting you about updating the component with the latest vaadin components in the package.json

Note: I already tried removing the @vaadin/vaadin-test-field from nodules_modules and removing the package-lock.json and reinstall using npm install.
I also tried running npm deduse no luck on either.
Oh ya, and last thing is I must use the regular versions, not the alphas or betas, but regardless, those latest 2.5.0-* gave me the same error.

I have installed this via npm and notice that it adds a node_modules folder inside the multiselect-combo-box folder with both @vaadin and lit-element modules.

When I attempt to run my application now I get a couple of error similar to:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-lumo-styles" has already been used with this registry
    at Object.parcelRequire.../../../../node_modules/multiselect-combo-box/node_modules/@vaadin/vaadin-text-field/node_modules/@vaadin/vaadin-lumo-styles/version.js

Any ideas?