Blazor: contenteditable and onblur throws InvalidOperationException

I want to use a editable div in Blazor to mix plain text and some html-elements like <button>. I know that value-binding is not supported right now for editable divs so I want to use the onblur-event to read and parse the text.

But when I change the content and leave the div I get an InvalidOperationException.

This only occurs when I use a custom Tag like <Test MyParam… When I put the content of the <Test-Tag directly inside the div there is no error.

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: TypeError: Cannot read property ‘ownerDocument’ of null System.InvalidOperationException: TypeError: Cannot read property ‘ownerDocument’ of null at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents) Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit ‘NnPSnUvIn1Wh1tNJYULIQVe_UmVkJcyxD7Aj5x80qV8’. System.AggregateException: One or more errors occurred. (TypeError: Cannot read property ‘ownerDocument’ of null) —> System.InvalidOperationException: TypeError: Cannot read property ‘ownerDocument’ of null at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents) — End of inner exception stack trace — The thread 0x14ff8 has exited with code 0 (0x0).

Here is a simple example to reproduce this issue:

<div contenteditable="true" style="border: 1px solid gray;" spellcheck="false" @onblur="OnBlur">
    <Test MyParam="@_part"></Test>
</div>

@code {

    private MyClass _part;

    protected override async Task OnInitializedAsync()
    {
        _part = new MyClass();
    }

    private async void OnBlur(FocusEventArgs args)
    {
    }

    public class MyClass
    {
        public string Id { get; set; }
    }
}





//this is the content of the Test.razor. the x is a sample content
x

@code {

    [Parameter]
    public Index.MyClass MyParam { get; set; }
}

[anthcool]

I have since resolved my issue with this. It was me, not the framework. My bad. Thanks though!

[mkArtakMSFT]

Potentially relevant: https://github.com/dotnet/aspnetcore/issues/21241