Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 <d1b91dfced854ee99a396ef9a5cfcf72>:0 at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TRes] (System.String identifier, T0 arg0, T1 arg1) <0x3252d58 + 0x00014> in <d1b91dfced854ee99a396ef9a5cfcf72>: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 <cbf249d7f04d4fa18d15bfae8ef7f389>: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