Error updating value from code on Blazor Client (wasm) version 18.3.0.42

[M.]

Related to Blazor WebAssembly (so client side, not server side), latest version of Syncfusion (18.3.0.42)

Following the instruction on this page

     https://blazor.syncfusion.com/documentation/rich-text-editor/data-binding/

i created the following code:

<table style="width: 100%; border: none;">
    <tr>
        <td style="width: 50%; padding: 5px;">
            <SfRichTextEditor ShowCharCount="true" MaxLength="2000" UndoRedoSteps="50" UndoRedoTimer="400"
                              Placeholder="Type a message..."
                              Width="100%" Height="400px" EditorMode="EditorMode.Markdown"
                              @bind-Value="@Value"
                              EnableHtmlSanitizer="true" EnableResize="false" EnablePersistence="true">
                <ChildContent>
                    <RichTextEditorPasteCleanupSettings PlainText="true" Prompt="false" />
                    <RichTextEditorToolbarSettings Items="@RichTextTools">
                        <RichTextEditorCustomToolbarItems>
                            <RichTextEditorCustomToolbarItem Name="Clean">
                                <Template>
                                    <SfButton Content="Ω" CssClass="e-control e-btn e-lib e-tbar-btn e-icon-btn"
                                              OnClick="@OnClick" />
                                </Template>
                            </RichTextEditorCustomToolbarItem>
                        </RichTextEditorCustomToolbarItems>
                    </RichTextEditorToolbarSettings>
                </ChildContent>
            </SfRichTextEditor>
        </td>
        <td style="width: 50%; padding: 5px;">
            @Value
        </td>
    </tr>
</table>

@code
{
    private string Value { get; set; } = "";

    private List<ToolbarItemModel> RichTextTools = new List<ToolbarItemModel>
        {
            new ToolbarItemModel() { Name = "Clean" },
            new ToolbarItemModel() { Command = ToolbarCommand.Undo },
            new ToolbarItemModel() { Command = ToolbarCommand.Redo },
            new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
            new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
        };

    public void OnClick()
    {
        this.Value = "";
    }
}

Once executed (as blazor CLIENT, not server) i perform the following actions:

- type some text on the editor

- click with the mouse outside the editor to update the value displayed on the second td of the table

- press the omega button

After that, the text is correctly blanked in the editor and in the text visualization, but i also get the following error on the browser:

blazor.webassembly.js:1 Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '16'.
Parameter name: eventHandlerId
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync (:44399/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo fieldInfo, System.EventArgs eventArgs) <0x4f07260 + 0x00054> in <filename unknown>:0
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.DispatchEventAsync (:44399/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo eventFieldInfo, System.EventArgs eventArgs) <0x4f06e98 + 0x00078> in <filename unknown>:0
  at :44399/Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.ProcessNextDeferredEventAsync () <0x551b490 + 0x000a6> in <filename unknown>:0
    at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1)
    at Object.invokeJSFromDotNet (blazor.webassembly.js:1)
    at _mono_wasm_invoke_js_marshalled (dotnet.3.2.0.js:1)
    at do_icall (:44399/<anonymous>:wasm-function[6049]:0x10f8b1)
    at do_icall_wrapper (:44399/<anonymous>:wasm-function[1896]:0x50b6a)
    at interp_exec_method (:44399/<anonymous>:wasm-function[1120]:0x2588e)
    at interp_runtime_invoke (:44399/<anonymous>:wasm-function[5655]:0xf7391)
    at mono_jit_runtime_invoke (:44399/<anonymous>:wasm-function[5109]:0xddb3d)
    at do_runtime_invoke (:44399/<anonymous>:wasm-function[1410]:0x3ba85)
    at mono_runtime_try_invoke (:44399/<anonymous>:wasm-function[418]:0xcfdb)

In a different scenario, the same configuration of the rich text editor give another error:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.UpdateRetainedChildComponent (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldComponentIndex, System.Int32 newComponentIndex) <0x4780c40 + 0x000de> in <filename unknown>:0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x47807c0 + 0x0033a> in <filename unknown>:0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x4291dd8 + 0x00428> in <filename unknown>:0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x47807c0 + 0x002a2> in <filename unknown>:0

[Indrajith Srinivasan]

Hi M, 

 

Greetings from Syncfusion support, 

 

We have validated your reported queries, 

 

Query 1: “After that, the text is correctly blanked in the editor and in the text visualization, but i also get the following error on the browser:” 

 

The reported script issue is logged as bug by Blazor team in the WebAsssembly applications, for the focusable elements in the page. Check the below link for reference. 

 

Reference Link: https://github.com/dotnet/aspnetcore/issues/26838  

 

Query 2: “In a different scenario, the same configuration of the rich text editor give another error:” 

 

Can you please share us the scenario in which your are facing the reported issue or Rich Text Editor rendered razor page in your application, to reproduce the reported issue from our end. So that we can validate and provide an solution, in resolving the reported issue. 

 

Regards, 

Indrajith 

[M.]

Hi M, 

 

Greetings from Syncfusion support, 

 

We have validated your reported queries, 

 

Query 1: “After that, the text is correctly blanked in the editor and in the text visualization, but i also get the following error on the browser:” 

 

The reported script issue is logged as bug by Blazor team in the WebAsssembly applications, for the focusable elements in the page. Check the below link for reference. 

 

Reference Link: https://github.com/dotnet/aspnetcore/issues/26838  

 

Query 2: “In a different scenario, the same configuration of the rich text editor give another error:” 

 

Can you please share us the scenario in which your are facing the reported issue or Rich Text Editor rendered razor page in your application, to reproduce the reported issue from our end. So that we can validate and provide an solution, in resolving the reported issue. 

 

Regards, 

Indrajith 

The code that produce the second error is the following:

            <SfRichTextEditor ShowCharCount="true" MaxLength="2000" UndoRedoSteps="50" UndoRedoTimer="400"
                                Placeholder="@V["Type a message..."]" Width="100%" EditorMode="EditorMode.Markdown"
                                SaveInterval="200"
                                @bind-Value="@TextMessage"
                                EnableHtmlSanitizer="true" EnableResize="false" EnablePersistence="true">
                <ChildContent>
                    <RichTextEditorPasteCleanupSettings PlainText="true" Prompt="false"/>
                    <RichTextEditorToolbarSettings Items="@RichTextTools">
                        <RichTextEditorCustomToolbarItems>

                            <RichTextEditorCustomToolbarItem Name="Emoticons">
                                <Template>
                                    <SfButton Content="Ω" CssClass="e-control e-btn e-lib e-tbar-btn e-icon-btn"
                                                OnClick="@OnEmoticons" />
                                </Template>
                            </RichTextEditorCustomToolbarItem>
                            <RichTextEditorCustomToolbarItem Name="Attachment">
                                <Template>
                                    <SfButton IconCss="fa fa-paperclip" CssClass="e-control e-btn e-lib e-tbar-btn e-icon-btn"
                                                OnClick="@OnAttachment" />
                                </Template>
                            </RichTextEditorCustomToolbarItem>
                            <RichTextEditorCustomToolbarItem Name="Send">
                                <Template>
                                    <SfButton IconCss="fa fa-paper-plane" CssClass="e-control e-btn e-lib e-tbar-btn e-icon-btn"
                                                OnClick="@OnSendMessage" Disabled="@(!CanSendMessage)" />
                                </Template>
                            </RichTextEditorCustomToolbarItem>
                        </RichTextEditorCustomToolbarItems>
                    </RichTextEditorToolbarSettings>
                </ChildContent>
            </SfRichTextEditor>

@V is an IStringLocalizer to i18n the text, for the other references:

     String TextMessage { get; set; } = "";

        private List<ToolbarItemModel> RichTextTools = new List<ToolbarItemModel>
        {
            new ToolbarItemModel() { Name = "Emoticons" },
            //new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
            //new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
            new ToolbarItemModel() { Command = ToolbarCommand.Undo },
            new ToolbarItemModel() { Command = ToolbarCommand.Redo },
            new ToolbarItemModel() { Command = ToolbarCommand.Separator },
            new ToolbarItemModel() { Name = "Attachment" },
            new ToolbarItemModel() { Name = "Send" },
        };

        Task OnEmoticons()
        {
            EmoticonsConfirmDialog = true;
            return Task.CompletedTask;
        }

        Task OnAttachment()
        {
            AttachmentConfirmDialog = true;
            return Task.CompletedTask;
        }

        bool CanSendMessage => (CurrentChat != null && !string.IsNullOrWhiteSpace(TextMessage));

        async Task OnSendMessage()
        {
            if (CanSendMessage)
            {
                // Send
                await Status.SendMessageToChat(CurrentChat.ID, TextMessage);

                // Empty text
                TextMessage = "";
            }
        }

SendMessageToChat is a method that update a list of messages (it does not involve the SfRichTextEditor anymore).

Hope it can help and thanks for the feedback.

[M.]

in the meanwhile that the blazor team is fixing this issue, is there anything we can do to overcome this issue? any workaround?

[Indrajith Srinivasan]

Hi M, 

 

Query 1: “SendMessageToChat is a method that update a list of messages (it does not involve the SfRichTextEditor anymore).” 

 

Based on the shared code blocks, the reported script issue is not due to the Rich Text Editor. The suspect of the issue is due to accessing the object instances of an empty object from application end.  

 

Query 2: “in the meanwhile that the blazor team is fixing this issue, is there anything we can do to overcome this issue? any workaround?” 

 

Since the exception arises from the Blazor source for the focusable elements in the page, currently there is no workaround for resolving this script issue. Have also requested in the feedback links to blazor team, for the workaround. 

 

Regards, 

Indrajith

[M.]

Thanks for your assistance, have a nice day.

[Indrajith Srinivasan]

Hi M,

Welcome, Please get back to us if you need any further assistance, 

 

Regards, 

Indrajith