Unplanned
Last Updated: 06 Jun 2024 08:28 by ADMIN
Alex
Created on: 07 Feb 2024 09:44
Category: Editor
Type: Bug Report
2
Editor Value doesn't display when set in OnAfterRenderAsync after JSInterop call

The Editor is not showing its Value in the following scenario:

  • Using JSInterop in OnAfterRenderAsync
  • Setting the Editor Value in OnAfterRenderAsync and after the JSInterop call
  • Blazor Server app (seems to work in WebAssembly)

Possible workarounds are:

  • Set the Editor Value and call StateHasChanged() before using JSInterop in OnAfterRenderAsync, or
  • Add some small delay (for example, await Task.Delay(100); ) before using JSInterop.
4 comments
ADMIN
Dimo
Posted on: 06 Jun 2024 08:28

Hello Alexey,

I made some additional experiments and it looks like you can also use a Task.Delay between the JSInterop call and setting the Editor Value: You may need the change the delay if the internet speed is slow.

@inject IJSRuntime js

<p><strong style="color:red">Copy and test this in a Blazor Server app.</strong></p>

<TelerikEditor @bind-Value="@PageContentBody" />

<script suppress-error="BL9992">function test() {
        return "success";
    }</script>

@code {
    string PageContentBody { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Workaround 1: reorder the code
            //PageContentBody = "<p><strong><span style='color:green;'>Initial Editor value</span></strong></p>";
            //StateHasChanged();

            // Workaround 2: add a delay here
            //await Task.Delay(100);

            var testString = await js.InvokeAsync<string>("test");

            // Workaround 3: add a delay here
            await Task.Delay(100);

            PageContentBody = "<p><strong><span style='color:green;'>Initial Editor value</span></strong></p>";
            StateHasChanged();
        }
    }
}

 

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Alexey
Posted on: 03 Jun 2024 10:16
Fix issue with using timeout for refresh and calling "StateHasChanged" after change @bind-Value from code  could not bring permanent fix on PROD because we have different user activity (server loading/ speed of the internet)
ADMIN
Nadezhda Tacheva
Posted on: 28 May 2024 10:19

Hi Alexey,

These are indeed the available workarounds for the time being:

  • Calling StateHasChange after the Value change in the OnAfterRenderAsync but before using JSInterop;
  • Add some delay (or Timer as per your current configuration) - also before using JSInterop;

You may track the fix by subscribing for the item - this way you will get timely status updates.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Alexey
Posted on: 23 May 2024 20:35
I have the similar Issue when try to update Value of the Blazor TelerikEditor.
And call StateHasChange immediately after change Value cannot resolve issue.
In my case I use update in Timer. It fix problem but it is argue solution.

Could someone to help how to fix issue with render Value in TelerikEditor?