fix: fire single event when changing accordion opened index (#9124)

Author: sissbruecker

packages/accordion/src/vaadin-accordion-mixin.js

@@ -114,10 +114,12 @@ export const AccordionMixin = (superClass) =>
     /** @private */
     _updateItems(items, opened) {
       if (items) {
+        this.__itemsSync = true;
         const itemToOpen = items[opened];
         items.forEach((item) => {
           item.opened = item === itemToOpen;
         });
+        this.__itemsSync = false;
       }
     }
 
@@ -140,6 +142,11 @@ export const AccordionMixin = (superClass) =>
 
     /** @private */
     _updateOpened(e) {
+      // Item sync applies the current opened index to each item, in which
+      // case we don't need to update the opened index again.
+      if (this.__itemsSync) {
+        return;
+      }
       const target = this._filterItems(e.composedPath())[0];
       const idx = this.items.indexOf(target);
       if (e.detail.value) {

packages/accordion/test/accordion.test.js

@@ -139,14 +139,22 @@ describe('vaadin-accordion', () => {
       expect(accordion.opened).to.equal(0);
     });
 
-    it('should dispatch opened-changed event when opened changes', async () => {
+    it('should dispatch single opened-changed event when opened changes', async () => {
       const spy = sinon.spy();
       accordion.addEventListener('opened-changed', spy);
       getHeading(1).click();
       await nextUpdate(accordion);
       expect(spy.calledOnce).to.be.true;
     });
 
+    it('should dispatch single opened-changed event when changing opened index property', async () => {
+      const spy = sinon.spy();
+      accordion.addEventListener('opened-changed', spy);
+      accordion.opened = 1;
+      await nextUpdate(accordion);
+      expect(spy).to.be.calledOnce;
+    });
+
     it('should open panel when component in summary is clicked', async () => {
       getHeading(2).firstChild.click();
       await nextUpdate(accordion);