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.

Exception thrown if FocusAsync() and @onfocusin are used in custom input element at the same time - blazor Wasm

See original GitHub issue

In a Blazor WebAssembly project

Simultaneously setting of focus and using of the razor component event onfocusin throws an exception:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Event 3 is already tracked Error: Event 3 is already tracked

I want to create an input element that is focused after the first render. At the same time, I want to do further work once the element receives focus (from the user or programmatically) using @onfocusin.

For these reasons, my input element now looks like this:

@inherits InputText

<input type="text"
       @bind-value="CurrentValue"
       @ref="_inputReference"
       @onfocusin="FocusInHandler" />

@code {
        private ElementReference _inputReference;

        protected async override Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await SetFocus();
            }

            await base.OnAfterRenderAsync(firstRender);
        }

        public async Task SetFocus()
        {
            await _inputReference.FocusAsync();
        }

        async Task FocusInHandler(FocusEventArgs e)
        {
            ...
        }

The exception is thrown as soon as the focus is set (for the demo project its when the page containing the input is loaded).

To Reproduce

Demo project

The Exception

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Event 3 is already tracked
      Error: Event 3 is already tracked
          at e.add (https://localhost:44390/_framework/blazor.webassembly.js:1:42456)
          at e.setListener (https://localhost:44390/_framework/blazor.webassembly.js:1:40690)
          at e.applyAttribute (https://localhost:44390/_framework/blazor.webassembly.js:1:36857)
          at e.insertElement (https://localhost:44390/_framework/blazor.webassembly.js:1:35691)
          at e.insertFrame (https://localhost:44390/_framework/blazor.webassembly.js:1:34562)
          at e.applyEdits (https://localhost:44390/_framework/blazor.webassembly.js:1:32948)
          at e.updateComponent (https://localhost:44390/_framework/blazor.webassembly.js:1:32264)
          at Object.t.renderBatch (https://localhost:44390/_framework/blazor.webassembly.js:1:12129)
          at Object.window.Blazor._internal.renderBatch (https://localhost:44390/_framework/blazor.webassembly.js:1:61899)
          at Object.w [as invokeJSFromDotNet] (https://localhost:44390/_framework/blazor.webassembly.js:1:64421)
Microsoft.JSInterop.JSException: Event 3 is already tracked
Error: Event 3 is already tracked
    at e.add (https://localhost:44390/_framework/blazor.webassembly.js:1:42456)
    at e.setListener (https://localhost:44390/_framework/blazor.webassembly.js:1:40690)
    at e.applyAttribute (https://localhost:44390/_framework/blazor.webassembly.js:1:36857)
    at e.insertElement (https://localhost:44390/_framework/blazor.webassembly.js:1:35691)
    at e.insertFrame (https://localhost:44390/_framework/blazor.webassembly.js:1:34562)
    at e.applyEdits (https://localhost:44390/_framework/blazor.webassembly.js:1:32948)
    at e.updateComponent (https://localhost:44390/_framework/blazor.webassembly.js:1:32264)
    at Object.t.renderBatch (https://localhost:44390/_framework/blazor.webassembly.js:1:12129)
    at Object.window.Blazor._internal.renderBatch (https://localhost:44390/_framework/blazor.webassembly.js:1:61899)
    at Object.w [as invokeJSFromDotNet] (https://localhost:44390/_framework/blazor.webassembly.js:1:64421)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier, Int32 arg0, RenderBatch arg1, Object arg2, Int64 targetInstanceId)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object](String identifier, Int32 arg0, RenderBatch arg1)
   at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync(RenderBatch& batch)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

Further technical details

version: .NET 5.0.3
dotnet --info:

.NET SDK (gemäß “global.json”): Version: 5.0.103 Commit: 72dec52dbd

Laufzeitumgebung: OS Name: Windows OS Version: 10.0.18363 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\5.0.103\

Host (useful for support): Version: 5.0.3 Commit: c636bbdc8a

.NET SDKs installed: 3.1.406 [C:\Program Files\dotnet\sdk] 5.0.100-rc.2.20479.15 [C:\Program Files\dotnet\sdk] 5.0.100 [C:\Program Files\dotnet\sdk] 5.0.103 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0-rc.2.20475.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0-rc.2.20475.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0-rc.2.20475.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Visual Studio Professional 2019 v. 16.8.5

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:7 (5 by maintainers)

Top GitHub Comments

3reactions

SteveSandersonMScommented, Apr 21, 2021

I’m working on a fix for this in 6.0-preview5, but a quick workaround for people currently affected is to add an await Task.Yield() before you call FocusAsync, e.g., updating the code posted above:

        protected async override Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await Task.Yield();
                await _inputReference.FocusAsync();
            }
        }

3reactions

anddrzejbcommented, Apr 13, 2021

I hit the same bug while working on Ant Design Blazor. @SteveSandersonMS looking at this it seems to be affecting a lot of component libraries. Blazorise, AntDesign & MudBlazor have in total almost 480K nuget downloads (ABP has 4500K but probably only a fraction of that is for blazor related projects). It is not a huge number but I would not consider that “a few” either. This bug is also present in core6.0 preview 3. In my case the bug does not surface when I run my app in Firefox. It does show in Chrome & Edge.