diff --git a/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts b/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts index fcb293a99..bf9689b8d 100644 --- a/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts +++ b/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts @@ -292,7 +292,7 @@ describe('va-accordion', () => { Some content `); - + const button = await page.find('va-accordion >>> button'); expect(button.innerText).toEqual('collapse-all -'); @@ -305,7 +305,7 @@ describe('va-accordion', () => { Some content Some content `); - + const button = await page.find('va-accordion >>> button'); expect(button.innerText).toEqual('collapse-all -'); diff --git a/packages/web-components/src/components/va-accordion/va-accordion.tsx b/packages/web-components/src/components/va-accordion/va-accordion.tsx index fa4093f51..2a16494e6 100644 --- a/packages/web-components/src/components/va-accordion/va-accordion.tsx +++ b/packages/web-components/src/components/va-accordion/va-accordion.tsx @@ -138,19 +138,25 @@ export class VaAccordion { this.accordionsOpened(); } + /** + * Handles the accordion open state + * @param method "some" or "every"; array methods to check if all or some of the accordion items are open + */ private accordionsOpened(method='every') { // Track user clicks on va-accordion-item within an array to compare if all values are true or false - let accordionItems = []; - getSlottedNodes(this.el, 'va-accordion-item').forEach(item => { - accordionItems.push((item as Element).getAttribute('open')); - }); - const allOpen = currentValue => currentValue === 'true'; - const allClosed = currentValue => currentValue === 'false'; + const accordionItems = [...this.el.children] + .filter((el) => el.tagName.toLowerCase() === 'va-accordion-item') + .map((el) => el.open); + + const allOpen = currentValue => currentValue === true; + const allClosed = currentValue => currentValue === false; + if (accordionItems[method](allOpen)) { - this.expanded = true; + return this.expanded = true; } + if (accordionItems[method](allClosed)) { - this.expanded = false; + return this.expanded = false; } } @@ -184,7 +190,7 @@ export class VaAccordion { } // if one or more accordion-items are open on load, then we should put component in state to "Collapse all" - componentDidLoad() { + componentWillLoad() { this.accordionsOpened('some'); } @@ -198,7 +204,7 @@ export class VaAccordion { const accordionItemIDs = [...this.el.children] .filter((el) => el.tagName.toLowerCase() === 'va-accordion-item') .map((el) => el.id); - + return (
this.accordionContainer = accordionContainer}>