`Error: Unable to focus on an invalid element` when focusing on SVG elements

[KristofferStrube]

Describe the bug

When you try to focus an SVG element that has a tabindex attribute an error is thrown from here: https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web.JS/src/DomWrapper.ts#L12

This is because SVG elements are not an instance of HTMLElement.

But SVG elements can actually be focused if they have a tabindex attribute like so:

<svg height="50" width="50">
    <rect tabindex="0" x="5" y="5" width="40" height="40" fill="grey"></rect>
</svg>

This can be fixed by changing the function that checks to the following:

function focus(element: HTMLElement, preventScroll: boolean): void {
  if (element instanceof HTMLElement) {
    element.focus({ preventScroll });
  } else if (element.hasAttribute('tabindex')) {
    element.focus({ preventScroll });
  } else {
    throw new Error('Unable to focus an invalid element.');
  }
}

This will check if the element has the tabindex attribute.

This might need more thought as that could be too loose a definition.

To Reproduce

A repo that reproduces this error can be found here: https://github.com/KristofferStrube/BlazorSVGFocusBug/
The repo can be demoed on GitHub Pages here: https://kristofferstrube.github.io/BlazorSVGFocusBug/

Exceptions (if any)

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Unable to focus an invalid element.
      Error: Unable to focus an invalid element.
          at Object.focus (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:25215)
          at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:2669
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:2643)
          at Object.ut [as invokeJSFromDotNet] (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:52772)
          at _mono_wasm_invoke_js_blazor (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.6.0.0-preview.6.21352.12.js:1:207806)
          at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[2461]:0x78fb6
          at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[2187]:0x6130b
          at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[6671]:0x15d556
          at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[6495]:0x154eb0
Microsoft.JSInterop.JSException: Unable to focus an invalid element.
Error: Unable to focus an invalid element.
    at Object.focus (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:25215)
    at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:2669
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:2643)
    at Object.ut [as invokeJSFromDotNet] (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/blazor.webassembly.js:1:52772)
    at _mono_wasm_invoke_js_blazor (https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.6.0.0-preview.6.21352.12.js:1:207806)
    at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[2461]:0x78fb6
    at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[2187]:0x6130b
    at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[6671]:0x15d556
    at https://kristofferstrube.github.io/BlazorSVGFocusBug/_framework/dotnet.wasm:wasm-function[6495]:0x154eb0
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[System.Object, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime , String , Object[] )
   at BlazorSVGFocusBug.Pages.Index.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

Further technical details

ASP.NET Core version

6.0.100-preview.6.21355.2

Include the output of dotnet --info

.NET SDK (reflecting any global.json):
 Version:   6.0.100-preview.6.21355.2
 Commit:    7f8e0d76c0

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19041
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.100-preview.6.21355.2\

Host (useful for support):
  Version: 6.0.0-preview.6.21352.12
  Commit:  770d630b28

.NET SDKs installed:
  2.1.811 [C:\Program Files\dotnet\sdk]
  2.2.207 [C:\Program Files\dotnet\sdk]
  3.1.301 [C:\Program Files\dotnet\sdk]
  3.1.400-preview-015178 [C:\Program Files\dotnet\sdk]
  5.0.100 [C:\Program Files\dotnet\sdk]
  5.0.201 [C:\Program Files\dotnet\sdk]
  6.0.100-preview.6.21355.2 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.0-preview.6.21355.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.13 [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.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-preview.5.21301.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-preview.6.21352.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.13 [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.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-preview.5.21301.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-preview.6.21353.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

The IDE (VS / VS Code/ VS4Mac) you're running on, and its version

Visual Studio 2022 or dotnet CLI. It happens for both and when hosted on GitHub Pages.

[pranavkm]

Thanks for the issue report @KristofferStrube. Would you be willing to send us a PR that includes your change + tests?

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[KristofferStrube]

Hey @pranavkm,
I can definitely try! :D

[KristofferStrube]

@pranavkm I have submitted a PR now.
This is my first PR to aspnetcore so if anything is missing or could be better then feel free to point me towards that.