Blazor VirtualScroll throwing exception when used with double-bound field and @key keyword

[bancroftway]

I have double-bound field inside a VirtualScroll component and the item template has @key keyword

                  <tbody>
                    <Virtualize Context="forecast" ItemSize="50" ItemsProvider="@LoadItems">
                        <ItemContent>
                            <tr @key="forecast.Id">
                                <td>@forecast.Date.ToShortDateString()</td>
                                <td>
                                    <InputNumber class="form-control text-center input-sm" @bind-Value="forecast.TemperatureC" />
                                </td>
                                <td>
                                    @forecast.TemperatureF
                                </td>
                                <td>@forecast.Summary</td>
                            </tr>
                        </ItemContent>
                 </Virtualize>
                </tbody>

when the field is edited and without tabbling off the field, an exception is thrown:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Event 96 is already tracked
      Error: Event 96 is already tracked
          at e.update (https://localhost:44362/_framework/blazor.webassembly.js:1:42587)
          at e.setListener (https://localhost:44362/_framework/blazor.webassembly.js:1:40180)
          at e.applyAttribute (https://localhost:44362/_framework/blazor.webassembly.js:1:36469)
          at e.applyEdits (https://localhost:44362/_framework/blazor.webassembly.js:1:32895)
          at e.updateComponent (https://localhost:44362/_framework/blazor.webassembly.js:1:31876)
          at Object.t.renderBatch (https://localhost:44362/_framework/blazor.webassembly.js:1:11924)
          at Object.window.Blazor._internal.renderBatch (https://localhost:44362/_framework/blazor.webassembly.js:1:61510)
          at Object.w [as invokeJSFromDotNet] (https://localhost:44362/_framework/blazor.webassembly.js:1:64032)
          at _mono_wasm_invoke_js_blazor (https://localhost:44362/_framework/dotnet.5.0.0-rc.2.20475.5.js:1:190396)
          at wasm_invoke_iiiiii (<anonymous>:wasm-function[5611]:0xdda74)
Microsoft.JSInterop.JSException: Event 96 is already tracked

A reproduction is here: https://github.com/bancroftway/blazorissuesrepro/tree/vscrollalreadytracked

A brief video showing the error is here: https://www.youtube.com/watch?v=XUUhTaIPodA

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.

[majorimi]

@mkArtakMSFT @SteveSandersonMS I'm having exactly the same error message but with a different scenario.

I have a Blazor component (call it Inner) which exposes the rendered HTML element as ElementReference to a public get.

<input @ref="_ref"/>
...
public ElementReference InnerElementReference = _ref;

Above code builds and works fine when e.g. I use the exposed InnerElementReference to focus it.

And a second (call it Outer) component renders some HTML and also one Inner component. Also has a @ref="" to it and exposes again an ElementReference which should be the Inner component rendered HTML element. So code is like proxies the inner value.

<Inner @ref="_innerRef"/>
...
public ElementReference InnerElementReference = _innerRef.InnerElementReference;

Above code builds but does not work when e.g. I use the exposed InnerElementReference to focus it.

<Outer @ref="_outerRef"/>
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		await _outerRef.InnerElementReference.FocusAsync();
		//So here the Outer component exposes InnerElementReference which is proxied from the Inner element
	}
}

And same issue:

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

Do you think is it related and the same fix will solve it? Or I'm using Blazor wrong? Thanks.

[SteveSandersonMS]

I verified this issue no longer repros in 6.0. This is what I expected since we already did some work to fix the general class of issues that happen when you tab out of an input and an event handler runs synchronously.

@majorimi I can't really tell whether your issue is related or not, since there isn't complete repro code. There's a good chance this is also fixed in 6.0 but I can't promise 100%. If this still affects you, could you try it out with 6.0 RC1 and open a new issue if you can still repro a problem? Thanks!