@vaadin/multi-select-combo-box 24.7.6 → 24.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.7.6",
+  "version": "24.7.7",
   "publishConfig": {
     "access": "public"
   },
@@ -39,22 +39,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.7.6",
-    "@vaadin/combo-box": "~24.7.6",
-    "@vaadin/component-base": "~24.7.6",
-    "@vaadin/field-base": "~24.7.6",
-    "@vaadin/input-container": "~24.7.6",
-    "@vaadin/item": "~24.7.6",
-    "@vaadin/lit-renderer": "~24.7.6",
-    "@vaadin/overlay": "~24.7.6",
-    "@vaadin/vaadin-lumo-styles": "~24.7.6",
-    "@vaadin/vaadin-material-styles": "~24.7.6",
-    "@vaadin/vaadin-themable-mixin": "~24.7.6",
+    "@vaadin/a11y-base": "~24.7.7",
+    "@vaadin/combo-box": "~24.7.7",
+    "@vaadin/component-base": "~24.7.7",
+    "@vaadin/field-base": "~24.7.7",
+    "@vaadin/input-container": "~24.7.7",
+    "@vaadin/item": "~24.7.7",
+    "@vaadin/lit-renderer": "~24.7.7",
+    "@vaadin/overlay": "~24.7.7",
+    "@vaadin/vaadin-lumo-styles": "~24.7.7",
+    "@vaadin/vaadin-material-styles": "~24.7.7",
+    "@vaadin/vaadin-themable-mixin": "~24.7.7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.7.6",
-    "@vaadin/test-runner-commands": "~24.7.6",
+    "@vaadin/chai-plugins": "~24.7.7",
+    "@vaadin/test-runner-commands": "~24.7.7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -62,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8f068b8203af4f336fee5220ae15a94090079d43"
+  "gitHead": "e047a26c58d3014c01e5ea803a23f12cac747efc"
 }

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

@@ -758,11 +758,26 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __updateTopGroup(selectedItemsOnTop, selectedItems, opened) {
       if (!selectedItemsOnTop) {
         this._topGroup = [];
-      } else if (!opened) {
+      } else if (!opened || this.__needToSyncTopGroup()) {
         this._topGroup = [...selectedItems];
       }
     }
 
+    /** @private */
+    __needToSyncTopGroup() {
+      // Only sync for object items
+      if (!this.itemIdPath) {
+        return false;
+      }
+      return (
+        this._topGroup &&
+        this._topGroup.some((item) => {
+          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems, this.itemIdPath)];
+          return selectedItem && item !== selectedItem;
+        })
+      );
+    }
+
     /** @private */
     __createChip(item) {
       const chip = document.createElement('vaadin-multi-select-combo-box-chip');
@@ -877,14 +892,17 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         this.insertBefore(chip, refNode);
 
         // When auto expanding vertically, no need to measure remaining width
-        if (!this.autoExpandVertically && this.$.chips.clientWidth > remainingWidth) {
-          // Always show at least last selected item as a chip
-          if (refNode === null) {
-            chip.style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;
-          } else {
-            chip.remove();
-            break;
+        if (!this.autoExpandVertically) {
+          if (this.$.chips.clientWidth > remainingWidth) {
+            // If there is no more space for chips, or if there is at least one
+            // chip already shown, collapse all remaining chips to the overflow
+            if (remainingWidth < chipMinWidth || refNode !== null) {
+              chip.remove();
+              break;
+            }
           }
+
+          chip.style.maxWidth = `${remainingWidth}px`;
         }
 
         items.pop();

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.7.6",
+  "version": "24.7.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.7.6",
+  "version": "24.7.7",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {