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

[DCIW]

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

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[stsrki]

The same thing is reported for Blazorise Megabit/Blazorise#1823

But by the look of it, it seems this is the Blazor issue.

[jan-johansson-mr]

I second that bug, I've included another sample based on little more than the starter Blazor WebAssembly template. You'll find the sample at Blazor issue with focus trap.
Thanks

[stsrki]

Happening also with our Blazorise components. Megabit/Blazorise#1823

ABP framework is also affected. https://github.com/volosoft/volo/issues/5807

It's a pretty serious bug and I don't think affected-few label is valid anymore.

[anddrzejb]

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.

[SteveSandersonMS]

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();
            }
        }

[stsrki]

I can confirm Task.Yield(); helps as a workaround, for now.

Thank you @SteveSandersonMS