diff --git a/change/@microsoft-fast-foundation-c8e72081-257f-474b-803b-0ae63fc25a83.json b/change/@microsoft-fast-foundation-c8e72081-257f-474b-803b-0ae63fc25a83.json new file mode 100644 index 00000000000..21124762cf3 --- /dev/null +++ b/change/@microsoft-fast-foundation-c8e72081-257f-474b-803b-0ae63fc25a83.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "accordion verifies change events", + "packageName": "@microsoft/fast-foundation", + "email": "stephcomeau@msn.com", + "dependentChangeType": "patch" +} 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 8b493f51a14..454a4dd4a3b 100644 --- a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts @@ -2,6 +2,7 @@ import { expect } from "chai"; import { FASTAccordion, accordionTemplate, AccordionExpandMode } from "./index.js"; import { FASTAccordionItem, accordionItemTemplate } from "../accordion-item/index.js"; import { fixture, uniqueElementName } from "../testing/fixture.js"; +import { FASTCheckbox, checkboxTemplate } from "../checkbox/index.js"; import { Updates } from "@microsoft/fast-element"; const Accordion = FASTAccordion.define({ @@ -14,6 +15,11 @@ const AccordionItem = FASTAccordionItem.define({ template: accordionItemTemplate() }); +const Checkbox = FASTCheckbox.define({ + name: uniqueElementName("checkbox"), + template: checkboxTemplate() +}); + async function setup() { const { element, connect, disconnect } = await fixture(Accordion); @@ -66,4 +72,93 @@ describe("Accordion", () => { await disconnect(); }); + + it("should expand/collapse items when clicked in multi mode", async () => { + const { element, connect, disconnect, item1, item2, item3 } = await setup(); + + element.expandmode = AccordionExpandMode.multi; + + await connect(); + await Updates.next(); + + expect(item1.expanded).to.equal(false); + expect(item2.expanded).to.equal(false); + expect(item3.expanded).to.equal(false); + + item1.expandbutton.click(); + item2.expandbutton.click(); + item3.expandbutton.click(); + + await Updates.next(); + + expect(item1.expanded).to.equal(true); + expect(item2.expanded).to.equal(true); + expect(item3.expanded).to.equal(true); + + item1.expandbutton.click(); + item2.expandbutton.click(); + item3.expandbutton.click(); + + await Updates.next(); + + expect(item1.expanded).to.equal(false); + expect(item2.expanded).to.equal(false); + expect(item3.expanded).to.equal(false); + + await disconnect(); + }); + + it("should always be one item expanded in single mode", async () => { + const { element, connect, disconnect, item1, item2, item3 } = await setup(); + + element.expandmode = AccordionExpandMode.single; + + await connect(); + await Updates.next(); + + expect(item1.expanded).to.equal(true); + expect(item2.expanded).to.equal(false); + expect(item3.expanded).to.equal(false); + + item2.expandbutton.click(); + + await Updates.next(); + + expect(item1.expanded).to.equal(false); + expect(item2.expanded).to.equal(true); + expect(item3.expanded).to.equal(false); + + item2.expandbutton.click(); + + await Updates.next(); + + expect(item1.expanded).to.equal(false); + expect(item2.expanded).to.equal(true); + expect(item3.expanded).to.equal(false); + + await disconnect(); + }); + + it("should ignore 'change' events from components other than accordion items", async () => { + const { element, connect, disconnect, item1, item2, item3 } = await setup(); + + element.expandmode = AccordionExpandMode.multi; + const checkbox = new Checkbox(); + item1.appendChild(checkbox); + + await connect(); + await Updates.next(); + expect(item1.expanded).to.equal(false); + + item1.expandbutton.click(); + await Updates.next(); + expect(item1.expanded).to.equal(true); + + checkbox.click(); + await Updates.next(); + expect(item1.expanded).to.equal(true); + + 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 9f0a33eba19..bdf7aea98e8 100644 --- a/packages/web-components/fast-foundation/src/accordion/accordion.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts @@ -131,6 +131,11 @@ export class FASTAccordion extends FASTElement { }; private activeItemChange = (event: Event): void => { + if (event.defaultPrevented || event.target !== event.currentTarget) { + return; + } + + event.preventDefault(); const selectedItem = event.target as FASTAccordionItem; this.activeid = selectedItem.getAttribute("id"); if (this.isSingleExpandMode()) { diff --git a/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts b/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts index 15e66518a96..f89243dea60 100644 --- a/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts +++ b/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts @@ -22,7 +22,7 @@ export default { </fast-accordion-item> <fast-accordion-item> <div slot="heading">Accordion Item 2 Heading</div> - Accordion Item 2 Content + <fast-checkbox>A checkbox as content</fast-checkbox </fast-accordion-item> `, },