Toast Component showing on all browser tabs

[Phill Barnes]

Hi 

My project is currently using .net 7.0 and setup for Blazor Server

Disclaimer, this is my first ever Blazor project and its all quite new to me, so this could easily be my lack of understanding.

I've added a toast component as per the instructions here: https://blazor.syncfusion.com/documentation/toast/config#show-or-hide-toast-using-service so I can re-use this by injecting it into any component, however I am experiencing an issue where whilst the toast component works, there are a few glitches.

1. If I have 2 tabs open on the same site (I apprecate this is supposed to be a SPA, however my users want to be able to move tabs around different screens so there might be multiple tabs open for the application).  This, I thought should create a new circuit for each page.   
   
   The issue is the toast service appears on all tabs when a toast is created, every active tab for the site shows the same Toast.  So if they have 2 tabs with job details open, If i raise the toast on 1, it also appears on the other tab.   I thought because it was scoped to Singleton, it might be due to that so I've changed to Transient  and Scoped hoping it would create a new instance as required when injected. 
   
   How can i prevent this?
2. Similar to this single instance, whenever I raise a new toast, it replaces the previous toasts with the new value.  It appears I can only ever have a single toast?  Evn if multiple toasts are raised on the same page, they always show the same value?

Any help as to why this happens is appreciated, I've not changed anything and simply followed the instructions provided by your documentation?

Thanks

[Vinitha Jeyakumar]

Hi Phill,

We have tried to replicate the reported issue at our end. but we didn't face any issues as you reported. we have also prepared a sample for your reference. please check the sample attached below ,

Can you please provide us with the issue replicating entire code snippet or issue replicating runnable sample to validate further on our end.

Regards,

Vinitha

Attachment: ToastService_(2)_f18deb.zip

[Phill Barnes]

Hi, thank you for the attachment, howeer I can confirm that the attached isn't working as I thought it would.

I made a slight modification to the code you gave me to help make the issue clear

I've updated line 15 in Index.razor file to now read

    Content = $"Toast content {DateTime.Now}", // Dynamic Content

This now puts the date and time in the toast, if you press this button repeatedly, you will see it does not stack the messages with the date/time but replaces the content in ALL visible toasts to the same date/time.

So when I have my app perhaps raise 2 toasts depending on an action, it will replace the first with the new content and leave them both on screen?

Thanks

Phill

[Vinitha Jeyakumar]

Hi Phill,

When you dynamically update the content of the Toast control, it will show the toast on the screen with the updated content, and this is the intended behavior of the Toast control. 

Can you please let us know your exact requirement and use case scenario to assist you further?

Regards,

Vinitha

[Jonah Largen]

The reason the toast is being shown everywhere is because the documentation falsely initialized the toast service as a singleton instead of scoped. You want it to be scoped because each HTTP request (basically each web page for a single user) has it's own notification service.

The sample provided by Vinitha did actually solve this issue without explaining it.

For those still curious about this issue, I created by own support ticket following up about multi toasts: 183972

[Kokila Poovendran]

Hi Jonah Largen,

We apologize for any inconvenience you've experienced due to the incorrect initialization of the toast service as a singleton in our documentation. Thank you for bringing this to our attention. We take your feedback seriously and are committed to rectifying this issue.

We want to assure you that we are actively working on correcting the documentation to accurately reflect the correct approach, and the updated version will be included in one of our upcoming releases. We truly appreciate your patience and understanding as we address this matter.

Regards,

Kokila Poovendran.