From cecf5ed573a2ddff94a3cd734a724ea37556d9e5 Mon Sep 17 00:00:00 2001
From: Sciurus7 <92735860+Sciurus7@users.noreply.github.com>
Date: Mon, 11 Sep 2023 14:55:30 +0200
Subject: [PATCH] fix(lion-accordion): make a copy when changing expanded
 (#2047)

---
 .changeset/sixty-cycles-dance.md                          | 5 +++++
 packages/ui/components/accordion/src/LionAccordion.js     | 2 +-
 .../ui/components/accordion/test/lion-accordion.test.js   | 8 ++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sixty-cycles-dance.md

diff --git a/.changeset/sixty-cycles-dance.md b/.changeset/sixty-cycles-dance.md
new file mode 100644
index 000000000..9c618f5fb
--- /dev/null
+++ b/.changeset/sixty-cycles-dance.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+lion-accordion now replaces expanded with a copy when it changes on click of an invoker button.
diff --git a/packages/ui/components/accordion/src/LionAccordion.js b/packages/ui/components/accordion/src/LionAccordion.js
index b3fa4a6dd..abec481f5 100644
--- a/packages/ui/components/accordion/src/LionAccordion.js
+++ b/packages/ui/components/accordion/src/LionAccordion.js
@@ -441,7 +441,7 @@ export class LionAccordion extends LitElement {
    * @private
    */
   __toggleExpanded(value) {
-    const { expanded } = this;
+    const expanded = [...this.expanded];
     const index = expanded.indexOf(value);
 
     if (index === -1) {
diff --git a/packages/ui/components/accordion/test/lion-accordion.test.js b/packages/ui/components/accordion/test/lion-accordion.test.js
index a5f27743c..ce785ca72 100644
--- a/packages/ui/components/accordion/test/lion-accordion.test.js
+++ b/packages/ui/components/accordion/test/lion-accordion.test.js
@@ -80,6 +80,14 @@ describe('<lion-accordion>', () => {
       ).to.equal('invoker 1');
     });
 
+    it('updates expanded with a new array when an invoker is clicked', async () => {
+      const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
+      const invokers = getInvokers(el);
+      const oldExpanded = el.expanded;
+      invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
+      expect(el.expanded).to.not.equal(oldExpanded);
+    });
+
     it('has [expanded] on current expanded invoker which serves as styling hook', async () => {
       const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
       const invokers = getInvokers(el);