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('', () => { ).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);