From 13f166b9c6aba7afc39a5c7cf97db2d91ea6f964 Mon Sep 17 00:00:00 2001 From: Yonatan Kra Date: Fri, 27 Jan 2023 09:23:31 +0200 Subject: [PATCH 1/2] fix(accordion): correctly sets the expanded item in single mode Fixes #6618 --- .../src/accordion/accordion.spec.ts | 74 +++++++++++++++++++ .../src/accordion/accordion.ts | 6 +- 2 files changed, 79 insertions(+), 1 deletion(-) diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts index 83d18c63cd1..f2ff5e597b2 100644 --- a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts @@ -67,4 +67,78 @@ describe("Accordion", () => { await disconnect(); }); + + it("should keep expanded item after focus on a different item in single mode", async () => { + const { element, connect, disconnect } = await setup(); + + element.setAttribute("expand-mode", "single"); + + await connect(); + await DOM.nextUpdate(); + + const [accordionItem1, accordionItem2] = element.accordionItems; + accordionItem2.shadowRoot?.querySelector("button")?.click(); + + await DOM.nextUpdate(); + const accordionItem1ExpandedAfterItem2Click = accordionItem1.hasAttribute("expanded"); + const accordionItem2ExpandedAfterItem2Click = accordionItem2.hasAttribute("expanded"); + + accordionItem1.dispatchEvent(new FocusEvent('focus')); + + const newItem = document.createElement("fast-accordion-item"); + element.appendChild(newItem); + await DOM.nextUpdate(); + + expect(accordionItem1ExpandedAfterItem2Click).to.equal(false); + expect(accordionItem2ExpandedAfterItem2Click).to.equal(true); + expect(accordionItem1.hasAttribute("expanded"), 'item 1 is expanded').to.equal(false); + expect(accordionItem2.hasAttribute("expanded"), 'item 2 is closed').to.equal(true); + await disconnect(); + }); + + it("should respect starting expanded state of added items in single mode", async () => { + const { element, connect, disconnect } = await setup(); + + element.setAttribute("expand-mode", "single"); + + await connect(); + await DOM.nextUpdate(); + + element.innerHTML = ` + Item 1 + Item 2 + Item 3 + `; + + const [accordionItem1, accordionItem2] = element.accordionItems; + + await DOM.nextUpdate(); + + expect(accordionItem1.hasAttribute("expanded"), 'item 1 is expanded').to.equal(false); + expect(accordionItem2.hasAttribute("expanded"), 'item 2 is closed').to.equal(true); + await disconnect(); + }); + + it("should respect the first expanded item when items change in single mode", async () => { + const { element, connect, disconnect } = await setup(); + + element.setAttribute("expand-mode", "single"); + + await connect(); + await DOM.nextUpdate(); + + element.innerHTML = ` + Item 1 + Item 2 + Item 3 + `; + await DOM.nextUpdate(); + + const [accordionItem1, accordionItem2, accordionItem3] = element.accordionItems; + + expect(accordionItem1.hasAttribute("expanded"), 'item 1 is expanded').to.equal(false); + expect(accordionItem2.hasAttribute("expanded"), 'item 2 is closed').to.equal(true); + expect(accordionItem3.hasAttribute("expanded"), 'item 3 is expanded').to.equal(false); + await disconnect(); + }); }); diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts index 3400ccbda46..562c4f4168c 100644 --- a/packages/web-components/fast-foundation/src/accordion/accordion.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts @@ -65,6 +65,10 @@ export class Accordion extends FoundationElement { */ public accordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void { if (this.$fastController.isConnected) { + if (this.isSingleExpandMode()) { + const expandedItem = this.findExpandedItem(); + this.activeItemIndex = expandedItem ? this.accordionItems.findIndex(x => x === expandedItem) : 0; + } this.removeItemListeners(oldValue); this.setItems(); } @@ -80,7 +84,7 @@ export class Accordion extends FoundationElement { private findExpandedItem(): AccordionItem | null { for (let item: number = 0; item < this.accordionItems.length; item++) { - if (this.accordionItems[item].getAttribute("expanded") === "true") { + if (this.accordionItems[item].hasAttribute("expanded") === true) { return this.accordionItems[item] as AccordionItem; } } From 214652b4c20914787a16484a55613f735c38df59 Mon Sep 17 00:00:00 2001 From: Yonatan Kra Date: Wed, 11 Sep 2024 21:20:58 +0300 Subject: [PATCH 2/2] Change files --- ...st-foundation-35ce77aa-d47a-4d90-bc7c-cb541881d066.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@microsoft-fast-foundation-35ce77aa-d47a-4d90-bc7c-cb541881d066.json diff --git a/change/@microsoft-fast-foundation-35ce77aa-d47a-4d90-bc7c-cb541881d066.json b/change/@microsoft-fast-foundation-35ce77aa-d47a-4d90-bc7c-cb541881d066.json new file mode 100644 index 00000000000..02f7f605117 --- /dev/null +++ b/change/@microsoft-fast-foundation-35ce77aa-d47a-4d90-bc7c-cb541881d066.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix accordion to correctly set the expanded item in single mode", + "packageName": "@microsoft/fast-web-utilities", + "email": "me@yonatankra.com", + "dependentChangeType": "none" +}