Blazor client side NavigateTo causes exception when component has @onBlur event hadler

[partyelite]

Describe the bug

When navigating from a page an exception occures if a component has @onBlur event. This happens only in Chrome. Other browsers work. This is what I get in console

Unhandled exception rendering component: Microsoft.JSInterop.JSException: Unknown edit type: 0 Error: Unknown edit type: 0 at e.applyEdits (http://localhost:64747/_framework/blazor.webassembly.js:1:14804) at e.updateComponent (http://localhost:64747/_framework/blazor.webassembly.js:1:12676) at Object.t.renderBatch (http://localhost:64747/_framework/blazor.webassembly.js:1:1704) at Object.window.Blazor._internal.renderBatch (http://localhost:64747/_framework/blazor.webassembly.js:1:33055) at _mono_wasm_invoke_js_unmarshalled (http://localhost:64747/_framework/wasm/mono.js:1:166416) at wasm-function[3105]:0x9a173 at wasm-function[3138]:0x9b84d at wasm-function[3139]:0x9bedd at wasm-function[3140]:0x9bfc6 at wasm-function[636]:0x149a5 at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TRes] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3252e30 + 0x00046> in :0 at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TRes] (System.String identifier, T0 arg0, T1 arg1) <0x3252d58 + 0x00014> in :0 at Microsoft.AspNetCore.Blazor.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3252c68 + 0x0001e> in <02062f8b8dc04354a1a18488dffb79d7>:0 at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2ffe6b0 + 0x000e8> in :0

To Reproduce

Let's say we have an MyInput component.

<input type="text" value="@Value" @onchange="UpdateValue" @onblur="OnBlur"></input>

@code {

    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    public void OnBlur()
    {
        Console.WriteLine("OnBlur");
    }

    public void UpdateValue(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
         _ = ValueChanged.InvokeAsync(Value);
    }
}

and a page

 <MyInput @bind-Value="MyStringValue"></MyInput >
 <button @onclick="@NavigateAsync" >Navigate</button>

@code {
    public string MyStringValue{ get; set; }

    public async Task NavigateAsync()
    {
        //some async code
         await Task.Run(() => System.Threading.Thread.Sleep(500));

         _navigationManager.NavigateTo("page1");
    }
}

Open in chrome and enter some text into input and hit Enter key to trigger button submit. You should see an exception. When clicking a button with a mouse or tabbing out of input everything works

Further technical details

• ASP.NET Core latest version
• VS 2019

[kevingates]

FYI, they're likely to ask for a simple repo showing the code in action. I usually just make a stupid simple repo and add it to github with minimal code (like the template files) and my test code. Just giving you a heads up as it may speed up a reply from the team.

[partyelite]

Thx, here is the repo https://github.com/partyelite/OnBlurException

[mkArtakMSFT]

Thanks for contacting us. We'll sure look into this but in couple of months only.

[javiercn]

I tried this and couldn't reproduce it with the latest blazor webassembly version.Update to the latest version and if you still run into this issue, comment and we'll re-evaluate it.

[javiercn]

@pranavkm since you mentioned you would take care of this.

[MichaelKueh]

We can still reproduce the problem in version 3.2.0-preview3.20168.3. Here is a minimal example:

@page "/"

<EditForm Model="_model" OnValidSubmit="NavigateAfterDelay">
    <input type="text" @onblur="() => { }" />
</EditForm>

@inject NavigationManager _navigationManager

@code {
    private TestModel _model { get; set; } = new TestModel();

    private async Task NavigateAfterDelay()
    {
        await Task.Delay(1000);

        _navigationManager.NavigateTo("/counter");
    }

    class TestModel { }
}

[codeus-de]

Same problem here. Also using 3.2.0-preview3.20168.3.

Navigating away from a component that contains a simple input with registered onblur

This problem is not fixed :(

[aktxyz]

ditto here :(

in my scenario I have a form with a single input with an @onblur handler

• no exception when clicking
• yes exception when submitting via enter key
  • even with onblur handler that does nothing ... ie { }
• no exception with enter key when @onblur is removed

[Timka654]

Have problem too, 3.2.0-preview3.20168.3 Chrome 80.0.3987.163 i'm dont not having permissions for publish original code, but write this sample

<button @onclick="Activate">Click me

@if (IsActive()) { <input type="text" @oninput="ProcessContent" @onfocusout="Deactivate" /> }

@code {

bool active = false;
[Inject] System.Net.Http.HttpClient c { get; set; }

async void ProcessContent(ChangeEventArgs args)
{
    if (!active)
        return;

    if ((string)args.Value == "1")
    {
        try
        {
            await c.PostAsync("http:/localhost/sample", new System.Net.Http.StringContent(""));

        }
        catch
        {
        }

        StateHasChanged();
        Deactivate();
    }
}

void Activate(MouseEventArgs args)
{
    active = true;
    StateHasChanged();
}

void Deactivate()
{
    active = false;
    StateHasChanged();
}

bool IsActive() => active;

}

if you remove @onfocusout from input - problem was be eliminated, may-be this help finding problem

blazor.webassembly.js:1 Unhandled exception rendering component: Cannot read property 'parentNode' of undefined ... blazor.webassembly.js:1 Unhandled exception rendering component: Unknown edit type: 0

[MichaelKueh]

The problem ist still reproduceable in 3.2.0-preview4.20210.8

[MichaelKueh]

@javiercn and @pranavkm are there any updates on this issue?

[HeroSpha]

i was experiencing the same problem, my app was working fine, then suddenly this error started to pop up. i cleaned and rebuild the solution and it went away. im using 3.2.0-preview4.20210.8

[LaughingJohn]

I'm also seeing this error, or something similar. In my case it seems to only happen when I type into a text input field and resize the screen (there is code which adjusts the screen based on size). It does seem to specifically be something to do with the input field because if I don't type anything in I can resize the screen without issue.

[pranavkm]

We're tracking fixing this issue as part of https://github.com/dotnet/aspnetcore/issues/21241.