1

I am opening/closing Lightning-accordion-section based on a picklist field and using the active-section-name as in this link: https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/documentation and it all works as expected.

The expected behaviour is when I choose option A in the picklist the Lightning-accordion-section labeled A is only displayed and it is expanded. If I pick option B then the Lightning-accordion-section labeled A disappears and I'm left with an expanded section labeled B.

However when I try to hide a particular section based of the picklist, if:true, if:false, the Lightning-accordion-section does not expand automatically. Its closed by default even though I specify the open section. Without the if:true, if:false, it works as expected and either section A or B are expanded while the other is not.

 /*. HTML */

<template if:true={showBrandSection}>
    <lightning-accordion class="accordian" allow-multiple-sections-open
        active-section-name={activeSections} onsectiontoggle={handleSectionToggle}>

        <lightning-accordion-section name="A" label="A" if:true={displayBrand}>
        </lightning-accordion-section>

        <lightning-accordion-section name="B" label="B" if:false={displayBrand}>
        </lightning-accordion-section>

    </lightning-accordion>
</template>

/*. JS */

displayBrand;
brandUndefined;
activeSections = ['A', 'B'];

renderedCallback() {
    if (this.displayBrand === undefined) {
        this.showBrandSection = false;
    }
}

displaySection() {
    this.showBrandSection = true;
    if (this.opportunity.Brand__c === 'A') {
        this.displayBrand = true;
        this.activeSections = ['A'];
    }
    else if (this.opportunity.Brand__c === 'B') {
        this.displayBrand = false;
        this.activeSections = ['B'];
    }
}

handleSectionToggle(event) {
    window.console.log('openSections: ', event.detail.openSections);
}

handleBrandChange(event) {
    this.opportunity.Brand__c = event.detail.value;
    this.displaySection();
}

1 Answer 1

1

Because the component doesn't exist in the DOM until after the next render cycle, you need to wait for a brief second. This allows the component to be rendered before attempting to set the activeSections property.

this.displayBrand = true;
Promise.resolve().then(() => 
  this.activeSections = ['A'];
);

Or:

this.displayBrand = true;
setTimeout(() => this.activeSessions = ['A']);

Note that the latter will produce an eslint warning/error, but will work just fine.

1
  • Worked perfectly. Thank you!
    – some guy
    Mar 2, 2022 at 16:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .