Rich Text Editor Async load doesn't always work

[Joshua Lapinski]

When loading rich text editor content within "OnInitializedAsync", the text in the editor is not always loaded. I tried using the .RefreshUI() method to resolve this, but that didn't seem to work.

This test was performed in chrome Version 84.0.4147.135 (Official Build) (64-bit) on a windows machine (Windows 10 Pro, version 1909, OS build 18363.959) while debugging from Visual Studio.

This appears to be a similar issue to the grid async loading issue documented here: https://www.syncfusion.com/forums/156982/blazor-grid-using-async-doesnt-always-display-data.

Please see below GIF for demo of the issue. Please see attached zip for the code used.

Attachment: SyncfusionRTEBug_8fb9854e.zip

[Suwathi Dhakshanamoorthy]

Hi Joshua, 

 

 

Greetings from Syncfusion support. 

 

 

Thanks for sharing sample to validate the reported issue quickly. We are able to reproduce the reported issue “The text in the editor is not always loaded”. The method `await Task.Delay(delay)` method prevents initialization of the value to the Editor. So, we suggest that if you call the delay method after the `rteText` initialization, the text in the Editor will be loaded every time without any issue. 

Find the modified code snippet of the `OnInitializedAsync` method.  

 

rteText = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ."; //your Text

var rnd = new Random(); 

var delay = rnd.Next(5, 200); 

await Task.Delay(delay); 

 

 

Could you please check and confirm whether you face the issue still? 

 

Regards, 

suwathi 

[Joshua Lapinski]

One thing I forgot to mention, this issue is happening in the latest version, 18.2.0.55. I also noticed this issue with 18.2.0.54 and 18.2.0.48 as well, but I didn't test any other previous minor versions.

The `await Task.Delay(delay)`  was put in as a placeholder for this demo. In a more realistic application, a service call to load the data would be awaited instead. We have some apps that load data like this and this issue is occurring.

Why would an awaited call within an async function cause this issue? I've seen other places in your documentation where you show awaiting calls within OnInitializedAsync, like here: https://blazor.syncfusion.com/documentation/common/state-persistance/

protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        Orders = Enumerable.Range(1, 25).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

If for some reason async calls cannot be used within "OnInitializedAsync" with Syncfusion Blazor, how would you recommend loading data for the rich text editor asynchronously?

[Suwathi Dhakshanamoorthy]

Hi Joshua, 

 

 

Please find  

Query 1: “Why would an awaited call within an async function cause this issue?” 

The method `await Task.Delay(delay)` method prevents initialization of the value to the Editor. So, the reported issue occurs. 

 

Query2: “How would you recommend loading data for the rich text editor asynchronously?” 

 The method `await Task.Delay(delay)` is not needed which causes an issue. We suggest that you could use `await base.OnInitializedAsync` method in `OnInitializedAsync` method. 

If you want to update a value dynamically, You could use the `StateHasChanged` method in OnInitializedAsync`. 

 

Code Snippet: 

protected override async Task OnInitializedAsync() 

    { 

        await base.OnInitializedAsync(); 

 

        rteText = @"Lorem ipsum dolor sit amet,”; //your text 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/157361/ze/SyncfusionRTEBug-759524474 

 

Reference Link: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1#component-initialization-methods 

Please refer to the above code snippet and reference link and confirm whether it meets your requirements. 

 

Regards, 

Suwathi