Update to latest vaadin

[tpluscode]

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

[naoak]

I confirmed that this component was completely working with @vaadin/vaadin-*^21.0.3 two weeks ago. @gatanaso I'd be happy if you could take a look in your spare time.

[mrgreywater]

As of yet it seems to be incompatible with Vaadin 22.0.0 (released on 01.01.2021)

2021-12-02 14:23:53.891  INFO 2608 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : ERROR in ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/src/multiselect-combo-box.js
2021-12-02 14:23:53.891  INFO 2608 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Module not found: Error: Can't resolve '@vaadin/vaadin-combo-box/src/vaadin-combo-box-placeholder.js' in '..\node_modules\.pnpm\multiselect-combo-box@2.4.2\node_modules\multiselect-combo-box\src'

vaadin-combo-box-placeholder.js doesn't seem to exist anymore: https://github.com/vaadin/web-components/tree/master/packages/vaadin-combo-box/src

it exists however in https://github.com/vaadin/web-components/tree/master/packages/combo-box/src/

[xeals]

Aside from the recreated @vaadin/vaadin-combo-box package no longer having the required -placeholder.js file mentioned above, there's a runtime error later on:

Uncaught TypeError: this.$.comboBox.$.overlay is undefined
    _selectedItemsObserver multiselect-combo-box.js:315
    runMethodEffect property-effects.js:819
    ... etc.

Error comes from the internal overlay ID being renamed in vaadin/web-components#2467.

--- src/multiselect-combo-box.js
+++ src/multiselect-combo-box.js
@@ -138,11 +138,11 @@
       super.ready();

       // replace listener to modify default behavior
-      this.$.comboBox.$.overlay.removeEventListener('selection-changed', this.$.comboBox._boundOverlaySelectedItemChanged);
-      this.$.comboBox.$.overlay.addEventListener('selection-changed', this._boundCustomOverlaySelectedItemChanged);
+      this.$.comboBox.$.dropdown.removeEventListener('selection-changed', this.$.comboBox._boundOverlaySelectedItemChanged);
+      this.$.comboBox.$.dropdown.addEventListener('selection-changed', this._boundCustomOverlaySelectedItemChanged);

       // modify check to allow custom renderers
-      this.$.comboBox.$.overlay._isItemSelected = this._customIsSelected.bind(this);
+      this.$.comboBox.$.dropdown._isItemSelected = this._customIsSelected.bind(this);

       this._observer = new FlattenedNodesObserver(this, (info) => {
         this._setTemplateFromNodes(info.addedNodes);
@@ -312,7 +312,7 @@
       this._setTitle(this._getDisplayValue(selectedItems, this.itemLabelPath, ', '));

       // manually force a render
-      this.$.comboBox.$.overlay._selectedItem = {};
+      this.$.comboBox.$.dropdown._selectedItem = {};
     }

     _templateOrRendererChanged(template, renderer) {

[gatanaso]

Hi, with the merge of https://github.com/gatanaso/multiselect-combo-box/pull/106 and , the web component should now be compatible with the latest version of Vaadin (pending the update of the Flow counter part).