Aspnetcore: Blazor: contenteditable and onblur throws InvalidOperationException

[TobiasKoller]

I want to use a editable div in Blazor to mix plain text and some html-elements like .
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 When I put the content of the

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:

```

@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 can't even get onblur to fire or the handler to be entered atm myself...

<td @ondblclick=(...) @onblur=(...)> fires the ondblclick event and handles it fine, but the handler for the onblur never even gets entered... May or may not be related...

Using the stable version of .NET Core 3.1 btw.

[captainsafia]

@TobiasKoller I created a repro using the code samples that you provided above. I was not able to reproduce the InvalidOperationException and the handler is executed correctly.

• Are you seeing that the callback is not entered but no exception arises?
• Can you share a GitHub repo with the code that triggers the exception?

I can't even get onblur to fire or the handler to be entered atm myself...

Can you open another issue for this with a repro project? Thanks!

[anthcool]

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

[captainsafia]

I'll go ahead and close this for now. It looks like onblur events on contenteditable divs are generally working from a quick app I spun up.

If you are able to provide a full app as a repro, please reopen the issue. Thanks!

[TobiasKoller]

BlazorOnBlurIssue.zip

Please reopen this bugreport.

Here is a very simple working example of this issue:

1. Unzip the project
2. Build the project
3. Run the project in debug mode
4. Delete all the text inside the editable div
5. you will get an exception when you leave the editable div.

```
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 'Swbo9SZWGvWPlPskMIny6in-bSXy_1d1IWmLChbf9KY'.

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 0x14d30 has exited with code 0 (0x0).
The thread 0x19a08 has exited with code 0 (0x0).
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 'QG3dCgY6YbpBtMOfMZD-RFf8NkIGGr5rU_LW0_mWXRw'.

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 0x13158 has exited with code 0 (0x0).
The thread 0x148b0 has exited with code 0 (0x0).
The thread 0x19f50 has exited with code 0 (0x0).
The program '[104844] iisexpress.exe' has exited with code -1 (0xffffffff).`

[captainsafia]

1. Delete all the text inside the editable div
2. you will get an exception when you leave the editable div.

As it turns out, "Delete all the text inside the editable div" is the important distinction here. The issue does not happen when you trigger an onblur on an content-editable div with content in it.

When the content is cleared from the div, there are no DOM elements and the updateComponent method throws when applying the latest updates. I think it is sensible to add some better error-handling against null values in that function.

[mkArtakMSFT]

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