fix: sync top group if necessary even when dropdown is opened (#9095) (#9255)

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>

Author: vaadin-bot

packages/multi-select-combo-box/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');

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

@@ -301,13 +301,22 @@ describe('selecting items', () => {
       beforeEach(() => {
         comboBox.itemIdPath = 'id';
         comboBox.items = items;
-        comboBox.selectedItems = items.slice(1, 3);
       });
 
       it('should show selected items at the top of the overlay', () => {
+        comboBox.selectedItems = items.slice(1, 3);
         comboBox.opened = true;
         expectItems(['banana', 'lemon', 'apple', 'orange', 'pear']);
       });
+
+      it('should synchronize selected item state when overlay is opened', async () => {
+        comboBox.selectedItems = [{ id: '1', label: 'banana' }];
+        comboBox.opened = true;
+        const itemReference = getFirstItem(comboBox).item;
+        comboBox.selectedItems = [{ id: '1', label: 'banana' }];
+        await nextRender();
+        expect(getFirstItem(comboBox).item).to.not.equal(itemReference);
+      });
     });
 
     describe('dataProvider', () => {