fix: sync multi-select-combo-box top group on data change (#10445)

Author: tomivirkki

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

@@ -392,6 +392,11 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       announce(this.__effectiveI18n.cleared);
     }
 
+    /** @private */
+    __syncTopGroup() {
+      this._topGroup = this.selectedItemsOnTop ? [...this.selectedItems] : [];
+    }
+
     /**
      * Clears the cached pages and reloads data from data provider when needed.
      * @override
@@ -403,6 +408,18 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       }
 
       super.clearCache();
+
+      this.__syncTopGroup();
+    }
+
+    /**
+     * @private
+     * @override
+     */
+    _itemsChanged(items, oldItems) {
+      super._itemsChanged(items, oldItems);
+
+      this.__syncTopGroup();
     }
 
     /**

packages/multi-select-combo-box/test/selecting-items.test.js

@@ -305,6 +305,28 @@ describe('selecting items', () => {
         comboBox.opened = true;
         expectItems(['apple', 'banana', 'lemon', 'orange']);
       });
+
+      it('should not include ghost items in the dropdown after items change', async () => {
+        comboBox.opened = true;
+        await nextRender();
+
+        comboBox.selectedItems = ['lemon'];
+        comboBox.items = ['apple', 'banana', 'lemon'];
+        await nextRender();
+
+        expectItems(['lemon', 'apple', 'banana']);
+      });
+
+      it('should not update topgroup when deselecting while dropdown is opened', async () => {
+        comboBox.opened = true;
+        await nextRender();
+
+        // Clear selection
+        comboBox.selectedItems = [];
+        await nextRender();
+
+        expectItems(['lemon', 'orange', 'apple', 'banana']);
+      });
     });
 
     describe('object items', () => {
@@ -388,6 +410,36 @@ describe('selecting items', () => {
         comboBox.opened = true;
         expectItems(['apple', 'banana', 'lemon', 'orange']);
       });
+
+      it('should not include ghost items in the dropdown after clearing data provider cache', async () => {
+        const allItems = ['apple', 'banana', 'lemon', 'orange'];
+        comboBox.dataProvider = (_params, callback) => {
+          callback(allItems, allItems.length);
+        };
+
+        comboBox.opened = true;
+        await nextRender();
+
+        allItems.pop(); // remove 'orange'
+        comboBox.selectedItems = ['lemon'];
+        expectItems(['lemon', 'orange', 'apple', 'banana']);
+
+        comboBox.clearCache();
+        await nextRender();
+
+        expectItems(['lemon', 'apple', 'banana']);
+      });
+
+      it('should not include ghost items in the dropdown after data provider change', async () => {
+        comboBox.opened = true;
+        await nextRender();
+
+        comboBox.selectedItems = ['lemon'];
+        comboBox.dataProvider = getDataProvider(['apple', 'banana', 'lemon']);
+        await nextRender();
+
+        expectItems(['lemon', 'apple', 'banana']);
+      });
     });
 
     describe('lazy loading', () => {