Weird Toast Behavior. First Instance not rendering Content.

[oliver tejada]

Hi Syncfusion Team,

First I'm using Blazor Server Net 6 and Syncfusion Version 20.3.0.56 (Individually downloaded component from Nuget).

I have this weird TOAST behavior. On first button click the Content has no value. But on the second button click the Content has value but it the is from the previous button click. So every time I click a button the value of the content is from the previous button click event. I tried putting the following:

  await Task.Delay(1000) and this.StateHasChanged()

No effect whatsoever. The bug is still there. My Toast is simple. No customization.

My Code Below:

    public string ToastContent { get; set; } = String.Empty;
    SfToast ToastObj;

My Toast:

    <SfToast ID="toast_default" Title="Status Updated" Content="@ToastContent" @ref="ToastObj" Timeout="500" Width="200">
        <ToastPosition X="Center" Y="Bottom"></ToastPosition>
    </SfToast>

My Methods:

    private async Task UpdateResponding()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("Responding", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "Responding";
            cssStatus = "badge bg-success";


            await Task.Delay(1000);
            this.StateHasChanged();


            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }

 private async Task UpdateNotResponding()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("Not Responding", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "Not Responding";
            cssStatus = "badge bg-danger";


            this.StateHasChanged();
            await Task.Delay(1000);
            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }

private async Task UpdateStandingBy()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("Standing By", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "Standing By";
            cssStatus = "badge bg-info";


            this.StateHasChanged();
            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }


    private async Task UpdateOnScene()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("On Scene", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "On Scene";
            cssStatus = "badge bg-secondary";


            this.StateHasChanged();
            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }

[oliver tejada]

Uploaded a video of the Toast anomaly.

Attachment: ToastVid_ea399af9.7z

[Vinitha Jeyakumar]

Hi Oliver,

We suggest you to call StateHasChanged() and a Delay method after updating the content property like as follows to resolve the reported issue,

Code snippet:

    <SfToast ID="toast_default" Title="Status Updated" Content="@ToastContent" ShowCloseButton="true" @ref="ToastObj" Timeout="500" Width="200">

        <ToastPosition X="Center" Y="Bottom"></ToastPosition>

    </SfToast>

    <div class="col-lg-12 col-sm-12 col-md-12 center">

        <div id="toastBtnDefault" style="margin: auto;text-align: center">

            <button class="e-btn" @onclick="@UpdateResponding">Toast 1</button>

            <button class="e-btn" @onclick="@UpdateNotResponding">Toast 2</button>

            <button class="e-btn" @onclick="@UpdateStandingBy">Toast 3</button>

            <button class="e-btn" @onclick="@UpdateOnScene">Toast 4</button>

            <div>@CurrentStatus</div>

@code {

    public string CurrentStatus {get; set;}

    public string ToastContent { get; set; }

    SfToast ToastObj;

     private async Task UpdateResponding()

    {      

            CurrentStatus = "Responding";        

            ToastContent = CurrentStatus;

            StateHasChanged();

            await Task.Delay(100);

            await this.ToastObj.ShowAsync();

     

    }

    private async Task UpdateNotResponding()

    {

            CurrentStatus = "Not Responding";

            ToastContent = CurrentStatus;

            StateHasChanged();

            await Task.Delay(100);

            await this.ToastObj.ShowAsync();

       

    }

    private async Task UpdateStandingBy()

    {

            CurrentStatus = "Standing By";

            ToastContent = CurrentStatus;

            StateHasChanged();

            await Task.Delay(100);

            await this.ToastObj.ShowAsync();

       

    }

    private async Task UpdateOnScene()

    {

            CurrentStatus = "On Scene";

            ToastContent = CurrentStatus;

            StateHasChanged();

            await Task.Delay(100);

            await this.ToastObj.ShowAsync();

    }

}

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Vinitha

[oliver tejada]

Solution is working. 

Thank you Syncfusion Team. 👍

[Vinitha Jeyakumar]

Hi Oliver,

We are glad to assist you.

Regards,

Vinitha