You need to sign in to do that
Don't have an account?
Dan 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?
Is this possible? If so, how is it done?
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.
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.
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.
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.
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.
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.
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.
Feel free to post your solution and mark it as the best solution so that it can help others as well.
Thanks,
Ashish Singh.