0

I have a conditionally rendered SLDS toast as follows :

 <template if:true={documentsMissing}>
        <div class="demo-only" style="height:4rem">
            <div class="slds-notify_container slds-is-relative">
                <div class="slds-notify slds-notify_toast slds-theme_error" role="status">
                    <span class="slds-assistive-text">error</span>
                    <span
                        class="slds-icon_container slds-icon-utility-error slds-m-right_small slds-no-flex slds-align-top"
                        title="Description of icon when needed">
                        <svg class="slds-icon slds-icon_small" aria-hidden="true">
                            <use xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#error">
                            </use>
                        </svg>
                    </span>
                    <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small ">{errorMessage}</h2>
                    </div>
                    <div class="slds-notify__close">
                        <button class="slds-button slds-button_icon slds-button_icon-inverse" title="Close"
                            onclick={closepopup}>
                            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                                <use
                                    xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#close">
                                </use>
                            </svg>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

This LWC is rendered inside a VF.

In the controller -

@track documentsMissing = false
closepopup(event) {
        console.log('Button Code changed')
        this.missingDocuments = false
        this.documents = false
        console.log('Missing document' + this.missingDocuments)
        console.log('Missign documents' +this.documents)
}

When run, the toast doesn't hide despite the closepopup function setting missingDocuments = false. In the console, I can see 'Missing Documentfalse' getting logged. Strangely, this works in the playground. But on my app page, it doesn't.

  • The problem may be elsewhere, then. This looks perfectly fine. P.S. track is no longer necessary for your use case (though this wouldn't stop it from working). – sfdcfox May 22 at 4:39
  • I am unable to understand where it may be failing. If I initialize the documentsMissing = true. the toast stays on the screen when the component loads. Even if I don't touch anything else in the component elsewhere and try to close the popup, it doesn't close while the console shows the expected values. I have two wire methods, none of which make any changes to the variable involved with the toast. – N_H1922 May 22 at 4:47
  • 2
    You don't have the if:true set on the root element, do you? That's not allowed, and it shouldn't have uploaded. Do you see any errors on the developer console (F12)? – sfdcfox May 22 at 4:56
  • I posted only the template with which I was facing the issue. This is nested inside root template. No error messages in the dev console either. Currently I am adding 'slds-hide' to the class list as a workaround to this problem. – N_H1922 May 22 at 5:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.