function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Dan LordDan Lord 

How can one close/dismiss a toastevent in LWC from Javascript?

I would like to be able to close a toast event (shown using ShowToastEvent in LWC Javascript) from the Javascript - if the user hasn't closed it yet and the 3 seconds timer hasn't elapsed - and a called Apex method has returned.

Is this possible? If so, how is it done?
Ashish Singh SFDCAshish Singh SFDC

Hi Dan,

There are is mode attribue in Toast Event = LWC Toast (https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation).

Determines how persistent the toast is. Valid values are: dismissible (default), remains visible until you click the close button or 3 seconds has elapsed, whichever comes first; pester, remains visible for 3 seconds and disappears automatically. No close button is provided; sticky remains visible until you click the close button.

You can make its value dynamic as based on your logic.

Thanks,

Ashish Singh.

Dan LordDan Lord
Thank you for your response, Ashish.

I know about the mode attribute, but in some cases I'd like to close the window even before the click or 3 seconds happens.

 
Ashish Singh SFDCAshish Singh SFDC
Hi Dan,

Yes, it's atleast possible in AURA. If you know how to inspect element using browser console, then you can simply copy the class which is responsible to display toast. You can then grab it in JS using document Selector Query and simply do DOM manipulation. 
 
var docs = document.getElementsByClassName("toastContainer slds-notify_container slds-is-relative");
docs[0].style = "display:none";

I'm wondering same can also be achieved in LWC if you know to grab the class using Query Selector and perform DOM manupulation.

Thanks,
Ashish Singh.​​​​​​​
Dan LordDan Lord
Thanks again, Ashish.

I've now tried this:
        this.template
          .querySelectorAll(
            ".slds-theme--info.slds-notify--toast.slds-notify.slds-notify--toast.forceToastMessage"
          )[0]
          .remove(
            ".slds-theme--info.slds-notify--toast.slds-notify.slds-notify--toast.forceToastMessage"
          );
and several variations on that - such as replacing the '.' with ' '

But, the query selector is not finding the node.
 
Ashish Singh SFDCAshish Singh SFDC
Hi Dan,

Yes, you're correct. Shadow DOM will not allow it.

The only solution I can think as of now is the Lighting Design System (https://www.lightningdesignsystem.com/components/toast/). 

Thanks,
Ashish Singh.
Ashish Singh SFDCAshish Singh SFDC
Or If you want to go beyond that, you can also use CSS frameworks like Tailwind or Bootstrap. This approach is not recommended but atleast for Toast Message it wont be any issue.
Dan LordDan Lord
Thanks, yet again, Ashish for your responses.

This isn't an urgent thing. I can let the user just wait 3 seconds for the notification to disappear.

I am currently implementing this has a headless (quick) action, so I don't really have any html to work with.
Ashish Singh SFDCAshish Singh SFDC
Hi Dan,

Feel free to post your solution and mark it as the best solution so that it can help others as well.

Thanks,
Ashish Singh.
Dan LordDan Lord
I don't have a solution yet - other than, just to forget about it.