Skip to content

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

@partyelite

Description

@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

Metadata

Metadata

Assignees

Labels

DoneThis issue has been fixedarea-blazorIncludes: Blazor, Razor Componentsfeature-blazor-wasmThis issue is related to and / or impacts Blazor WebAssemblyinvestigate

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions