Fixes that Blazor focus extension could not focus SVG elements (#35080)

Author: KristofferStrube

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -5,9 +5,15 @@ export const domFunctions = {
   focusBySelector,
 };
 
-function focus(element: HTMLElement, preventScroll: boolean): void {
+function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
   if (element instanceof HTMLElement) {
     element.focus({ preventScroll });
+  } else if (element instanceof SVGElement) {
+    if (element.hasAttribute('tabindex')) {
+      element.focus({ preventScroll });
+    } else {
+      throw new Error('Unable to focus an SVG element that does not have a tabindex.');
+    }
   } else {
     throw new Error('Unable to focus an invalid element.');
   }

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -410,6 +410,28 @@ public void CanUseFocusExtensionToFocusElement()
             long getPageYOffset() => (long)((IJavaScriptExecutor)Browser).ExecuteScript("return window.pageYOffset");
         }
 
+        [Fact]
+        public void CanUseFocusExtensionToFocusSvgElement()
+        {
+            Browser.Manage().Window.Size = new System.Drawing.Size(100, 300);
+            var appElement = Browser.MountTestComponent<SvgFocusComponent>();
+
+            var buttonElement = appElement.FindElement(By.Id("focus-button"));
+
+            // Make sure the circle isn't focused when the test begins; we don't want
+            // the test to pass just because the circle started as the focused element
+            Browser.NotEqual("focus-circle", getFocusedElementId);
+
+            // Click the button whose callback focuses the SVG element
+            buttonElement.Click();
+
+            // Verify that the circle is focused
+            Browser.Equal("focus-circle", getFocusedElementId);
+
+            // A local helper that gets the ID of the focused element.
+            string getFocusedElementId() => Browser.SwitchTo().ActiveElement().GetAttribute("id");
+        }
+
         [Fact]
         public void CanUseFocusExtensionToFocusElementPreventScroll()
         {

src/Components/Web.JS/src/DomWrapper.ts

@@ -91,6 +91,7 @@
         <option value="BasicTestApp.SignalRClientComponent">SignalR client</option>
         <option value="BasicTestApp.StringComparisonComponent">StringComparison</option>
         <option value="BasicTestApp.SvgComponent">SVG</option>
+        <option value="BasicTestApp.SvgFocusComponent">SVG Focus component</option>
         <option value="BasicTestApp.TextOnlyComponent">Plain text</option>
         <option value="BasicTestApp.ToggleEventComponent">Toggle Event</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>

src/Components/test/E2ETest/Tests/ComponentRenderingTestBase.cs

@@ -0,0 +1,17 @@
+<svg width="100" heigth="100">
+    <circle tabindex="-1" cx="50" cy="50" r="20" id="focus-circle" @ref="circleReference" @onfocusin="@(() => { didReceiveFocusIn = true; })"></circle>
+</svg>
+
+<button id="focus-button" @onclick="@(() => FocusCircle(false))">Click to focus!</button>
+<hr />
+<p>Received focus in: <span id="focus-event-received">@didReceiveFocusIn</span></p>
+
+@code {
+    private ElementReference circleReference;
+    private bool didReceiveFocusIn;
+
+    private async Task FocusCircle(bool preventScroll)
+    {
+        await circleReference.FocusAsync(preventScroll);
+    }
+}