@vaadin/multi-select-combo-box 25.3.0-beta2 → 25.3.0-beta3

package/custom-elements.json

@@ -348,8 +348,12 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
-              "attribute": "item-id-path"
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
+              "attribute": "item-id-path",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
             },
             {
               "kind": "field",
@@ -561,7 +565,11 @@
             {
               "kind": "method",
               "name": "requestContentUpdate",
-              "description": "Requests an update for the content of items.\nWhile performing the update, it invokes the renderer (passed in the `renderer` property) once an item.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested."
+              "description": "Requests an update for the content of items.\nWhile performing the update, it invokes the renderer (passed in the `renderer` property) once an item.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
             },
             {
               "kind": "field",
@@ -900,8 +908,12 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
-              "fieldName": "itemIdPath"
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
+              "fieldName": "itemIdPath",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
             },
             {
               "name": "item-label-path",
@@ -1507,11 +1519,11 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "attribute": "item-id-path",
               "inheritedFrom": {
-                "name": "MultiSelectComboBoxMixin",
-                "module": "src/vaadin-multi-select-combo-box-mixin.js"
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
               }
             },
             {
@@ -1738,8 +1750,8 @@
               "name": "requestContentUpdate",
               "description": "Requests an update for the content of items.\nWhile performing the update, it invokes the renderer (passed in the `renderer` property) once an item.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
               "inheritedFrom": {
-                "name": "MultiSelectComboBoxMixin",
-                "module": "src/vaadin-multi-select-combo-box-mixin.js"
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
               }
             },
             {
@@ -2120,11 +2132,11 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "fieldName": "itemIdPath",
               "inheritedFrom": {
-                "name": "MultiSelectComboBoxMixin",
-                "module": "src/vaadin-multi-select-combo-box-mixin.js"
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
               }
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-beta2",
+  "version": "25.3.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -37,23 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-beta2",
-    "@vaadin/combo-box": "25.3.0-beta2",
-    "@vaadin/component-base": "25.3.0-beta2",
-    "@vaadin/field-base": "25.3.0-beta2",
-    "@vaadin/input-container": "25.3.0-beta2",
-    "@vaadin/item": "25.3.0-beta2",
-    "@vaadin/lit-renderer": "25.3.0-beta2",
-    "@vaadin/overlay": "25.3.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-beta2",
+    "@vaadin/a11y-base": "25.3.0-beta3",
+    "@vaadin/combo-box": "25.3.0-beta3",
+    "@vaadin/component-base": "25.3.0-beta3",
+    "@vaadin/field-base": "25.3.0-beta3",
+    "@vaadin/input-container": "25.3.0-beta3",
+    "@vaadin/item": "25.3.0-beta3",
+    "@vaadin/lit-renderer": "25.3.0-beta3",
+    "@vaadin/overlay": "25.3.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-beta3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-beta2",
-    "@vaadin/chai-plugins": "25.3.0-beta2",
-    "@vaadin/test-runner-commands": "25.3.0-beta2",
+    "@vaadin/aura": "25.3.0-beta3",
+    "@vaadin/chai-plugins": "25.3.0-beta3",
+    "@vaadin/test-runner-commands": "25.3.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-beta3",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d97ccbec217b60c39f3c8b2dd52473c79a48c8c1"
+  "gitHead": "1ea43188e1297f6898cbf9d3610b85a7a2cca6f0"
 }

package/src/vaadin-multi-select-combo-box-mixin.d.ts

@@ -100,12 +100,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   itemClassNameGenerator: (item: TItem) => string;
 
-  /**
-   * Path for the id of the item, used to detect whether the item is selected.
-   * @attr {string} item-id-path
-   */
-  itemIdPath: string;
-
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or
@@ -177,12 +171,4 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    * Clears the selected items.
    */
   clear(): void;
-
-  /**
-   * Requests an update for the content of items.
-   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
 }

package/src/vaadin-multi-select-combo-box-mixin.js

@@ -79,15 +79,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Path for the id of the item, used to detect whether the item is selected.
-         * @attr {string} item-id-path
-         */
-        itemIdPath: {
-          type: String,
-          sync: true,
-        },
-
         /**
          * When true, filter string isn't cleared after selecting an item.
          */
@@ -216,9 +207,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     static get observers() {
       return [
         '_selectedItemsChanged(selectedItems)',
-        '__openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)',
         '__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)',
-        '__updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
         '__updateTopGroup(selectedItemsOnTop, selectedItems, opened)',
       ];
     }
@@ -342,7 +331,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     updated(props) {
       super.updated(props);
 
-      ['loading', 'itemIdPath', 'itemClassNameGenerator', 'renderer'].forEach((prop) => {
+      ['loading', 'itemClassNameGenerator', 'renderer'].forEach((prop) => {
         if (props.has(prop)) {
           this._scroller[prop] = this[prop];
         }
@@ -432,24 +421,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       this.__syncTopGroup();
     }
 
-    /**
-     * Requests an update for the content of items.
-     * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
-     *
-     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-     */
-    requestContentUpdate() {
-      if (!this._scroller) {
-        return;
-      }
-
-      this._scroller.requestContentUpdate();
-
-      this._getItemElements().forEach((item) => {
-        item.requestContentUpdate();
-      });
-    }
-
     /**
      * Override method from `ComboBoxBaseMixin` to implement clearing logic.
      * @protected
@@ -474,41 +445,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateScroller(opened, items, focusedIndex, theme) {
-      if (opened) {
-        this._scroller.style.maxHeight =
-          getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
-      }
-
-      const isClosing = this.hasAttribute('closing');
-
-      this._scroller.setProperties({
-        items: opened || isClosing ? items : [],
-        opened,
-        focusedIndex,
-        theme,
-      });
-    }
-
-    /** @private */
-    __openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
-      // Close the overlay if there are no items to display.
-      // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = opened && (keepOverlayOpened || loading || !!items?.length);
-    }
-
-    /**
-     * @protected
-     */
-    _closeOrCommit() {
-      if (!this.opened) {
-        this._commitValue();
-      } else {
-        this.close();
-      }
-    }
-
     /**
      * @protected
      * @override
@@ -542,7 +478,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         if (
           this._lastFilter &&
           this._lastFilter === this._inputElementValue &&
-          this._findIndex(focusedItem, this.selectedItems, this.itemIdPath) !== -1
+          this._findIndex(focusedItem, this.selectedItems) !== -1
         ) {
           this.__clearInternalValue();
           return;
@@ -705,67 +641,34 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Override combo-box method to group selected
-     * items at the top of the overlay.
+     * Override method from `ComboBoxItemsMixin` to show only selected
+     * items when read-only, and to group selected items at the top
+     * of the overlay when `selectedItemsOnTop` is set.
      *
      * @protected
      * @override
      */
     _setDropdownItems(items) {
+      super._setDropdownItems(this.__generateDropdownItems(items));
+    }
+
+    /** @private */
+    __generateDropdownItems(items) {
       if (this.readonly) {
-        this.__setDropdownItems(this.selectedItems);
-        return;
+        return this.selectedItems;
       }
 
       if (this.filter || !this.selectedItemsOnTop) {
-        this.__setDropdownItems(items);
-        return;
+        return items;
       }
 
       if (items?.length && this._topGroup?.length) {
         // Filter out items included to the top group.
-        const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup, this.itemIdPath) === -1);
-
-        this.__setDropdownItems(this._topGroup.concat(filteredItems));
-        return;
+        const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup) === -1);
+        return this._topGroup.concat(filteredItems);
       }
 
-      this.__setDropdownItems(items);
-    }
-
-    /** @private */
-    __setDropdownItems(newItems) {
-      const oldItems = this._dropdownItems;
-      this._dropdownItems = newItems;
-
-      // Store the currently focused item if any. The focused index preserves
-      // in the case when more filtered items are loading but it is reset
-      // when the user types in a filter query.
-      const focusedItem = oldItems ? oldItems[this._focusedIndex] : null;
-
-      // When both the previously-focused entry and the new entry at the
-      // same index are placeholders (e.g. the Flow connector mid-scroll
-      // re-pushing `__setDropdownItems`), preserve `_focusedIndex` until
-      // a follow-up call lands a real item at that position.
-      if (
-        oldItems &&
-        oldItems[this._focusedIndex] instanceof ComboBoxPlaceholder &&
-        newItems[this._focusedIndex] instanceof ComboBoxPlaceholder
-      ) {
-        return;
-      }
-
-      // Try to first set focus on the item that had been focused before `newItems` were updated
-      // if it is still present in the `newItems` array. Otherwise, set the focused index
-      // depending on the selected item or the filter query.
-      const focusedItemIndex = this.__getItemIndexByValue(newItems, this._getItemValue(focusedItem));
-      if (focusedItemIndex > -1) {
-        this._focusedIndex = focusedItemIndex;
-      } else {
-        // When the user filled in something that is different from the current value = filtering is enabled,
-        // set the focused index to the item that matches the filter query.
-        this._focusedIndex = this.__getItemIndexByFilter(newItems);
-      }
+      return items;
     }
 
     /** @private */
@@ -774,17 +677,8 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /** @private */
-    _findIndex(item, selectedItems, itemIdPath) {
-      if (itemIdPath && item) {
-        for (let index = 0; index < selectedItems.length; index++) {
-          if (selectedItems[index] && selectedItems[index][itemIdPath] === item[itemIdPath]) {
-            return index;
-          }
-        }
-        return -1;
-      }
-
-      return selectedItems.indexOf(item);
+    _findIndex(item, items) {
+      return items.findIndex((other) => this._isSameItem(item, other));
     }
 
     /**
@@ -817,7 +711,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     /** @private */
     __removeItem(item) {
       const itemsCopy = [...this.selectedItems];
-      itemsCopy.splice(itemsCopy.indexOf(item), 1);
+      itemsCopy.splice(this._findIndex(item, itemsCopy), 1);
       this.__updateSelection(itemsCopy);
       const itemLabel = this._getItemLabel(item);
       this.__announceItem(itemLabel, false, itemsCopy.length);
@@ -827,7 +721,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __selectItem(item) {
       const itemsCopy = [...this.selectedItems];
 
-      const index = this._findIndex(item, itemsCopy, this.itemIdPath);
+      const index = this._findIndex(item, itemsCopy);
       const itemLabel = this._getItemLabel(item);
 
       let isSelected = false;
@@ -881,7 +775,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       return (
         this._topGroup &&
         this._topGroup.some((item) => {
-          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems, this.itemIdPath)];
+          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems)];
           return selectedItem && item !== selectedItem;
         })
       );
@@ -1076,19 +970,16 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Override method from `ComboBoxBaseMixin` to deselect
-     * dropdown item by requesting content update on clear.
+     * Override method from `ComboBoxItemsMixin` to stop
+     * propagation of the clear button click event.
      * @param {Event} event
      * @protected
+     * @override
      */
     _onClearButtonClick(event) {
       event.stopPropagation();
 
       super._onClearButtonClick(event);
-
-      if (this.opened) {
-        this.requestContentUpdate();
-      }
     }
 
     /**

package/src/vaadin-multi-select-combo-box-scroller.js

@@ -43,10 +43,12 @@ class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(Lit
   }
 
   /**
+   * Override method from `ComboBoxScrollerMixin` to check
+   * the item against the selected items of the owner.
    * @protected
    * @override
    */
-  _isItemSelected(item, _selectedItem, itemIdPath) {
+  _isItemSelected(item) {
     if (item instanceof ComboBoxPlaceholder) {
       return false;
     }
@@ -55,7 +57,7 @@ class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(Lit
       return false;
     }
 
-    return this.owner._findIndex(item, this.owner.selectedItems, itemIdPath) > -1;
+    return this.owner.selectedItems.some((selectedItem) => this.owner._isSameItem(item, selectedItem));
   }
 
   /**

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-beta2",
+  "version": "25.3.0-beta3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -165,7 +165,7 @@
             },
             {
               "name": "item-id-path",
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "value": {
                 "type": [
                   "string"
@@ -522,7 +522,7 @@
               },
               {
                 "name": "itemIdPath",
-                "description": "Path for the id of the item, used to detect whether the item is selected.",
+                "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
                 "value": {
                   "type": [
                     "string"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-beta2",
+  "version": "25.3.0-beta3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -168,7 +168,7 @@
             },
             {
               "name": ".itemIdPath",
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "value": {
                 "kind": "expression"
               }