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

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>

Author: vaadin-bot

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

@@ -76,6 +76,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         items: {
           type: Array,
           sync: true,
+          observer: '__itemsChanged',
         },
 
         /**
@@ -252,6 +253,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         dataProvider: {
           type: Object,
           sync: true,
+          observer: '__dataProviderChanged',
         },
 
         /**
@@ -451,13 +453,30 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       announce(this.i18n.cleared);
     }
 
+    /** @private */
+    __syncTopGroup() {
+      this._topGroup = this.selectedItemsOnTop ? [...this.selectedItems] : [];
+    }
+
     /**
      * Clears the cached pages and reloads data from data provider when needed.
      */
     clearCache() {
       if (this.$ && this.$.comboBox) {
         this.$.comboBox.clearCache();
       }
+
+      this.__syncTopGroup();
+    }
+
+    /** @private */
+    __itemsChanged() {
+      this.__syncTopGroup();
+    }
+
+    /** @private */
+    __dataProviderChanged() {
+      this.__syncTopGroup();
     }
 
     /**

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

@@ -287,6 +287,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', () => {
@@ -370,6 +392,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', () => {