dotnet/aspnetcore · error · Error

Unable to focus an SVG element that does not have a…

Error message

Unable to focus an SVG element that does not have a tabindex.

What it means

Thrown by the focus() helper in DomWrapper.ts when the target is an SVGElement without a tabindex attribute. Unlike HTMLElement, SVG elements are not focusable by default; Blazor's focus refuses to call element.focus() on such an element because the call would silently do nothing.

Solutions

1. Add tabindex (typically tabindex="0" for tab-order, or tabindex="-1" for programmatic focus) to the SVG element before focusing.
2. If the SVG is decorative, focus a parent HTMLElement (e.g. a wrapping <button>) instead.
3. When building an SVG control, expose a focusable HTMLElement layer (button/link) for keyboard interaction.
4. Pre-check element type and tabindex before invoking focus.

Example fix

<!-- before -->
<svg><rect id="target" /></svg>
<script>document.getElementById('target').focus();</script> <!-- throws -->

<!-- after -->
<svg><rect id="target" tabindex="0" /></svg>
<script>document.getElementById('target').focus();</script>

// Ensure focusability before focusing SVG.
function focusSafe(el) {
  if (el instanceof SVGElement && !el.hasAttribute('tabindex')) {
    el.setAttribute('tabindex', '-1');
  }
  el.focus();
}

function isFocusable(el) {
  if (el instanceof HTMLElement) return true;
  if (el instanceof SVGElement) return el.hasAttribute('tabindex');
  return false;
}

try {
  el.focus();
} catch (e) {
  if (/SVG element that does not have a tabindex/.test(e.message)) {
    el.setAttribute('tabindex', '-1');
    el.focus();
  } else throw e;
}

When it happens

Trigger: Blazor's @focus or a manual focus call targeting an SVG element (e.g. <rect>, <path>, <svg>-based icon button) that lacks a tabindex attribute. Also triggered by focusBySelector-style helpers routed through focus() for SVG targets.

Common situations: Focusing an icon or vector graphic for accessibility/keyboard nav without first making it focusable; calling focus on a chart shape, SVG button, or canvas overlay that is an SVG element; keyboard handling on SVG-only widgets.

Related errors

• Unable to focus an invalid element.
• Cannot connect component
• Could not find any element matching selector
• The ' ' selector is not supported.

AI-assisted analysis of dotnet/aspnetcore@3600ca084e (2026-08-11). Data as JSON: /api/errors/cd1e374ff15e1bbe. Report an issue: GitHub.

Appendix: source

Thrown at src/Components/Web.JS/src/DomWrapper.ts:18

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.

import '@microsoft/dotnet-js-interop';

export const domFunctions = {
  focus,
  focusBySelector,
};

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.');
  }
}

function focusBySelector(selector: string) {
  const element = document.querySelector(selector) as HTMLElement;
  if (element) {
    // If no explicit tabindex is defined, mark it as programmatically-focusable.
    // This does actually add a new HTML attribute, but it shouldn't interfere with
    // diffing because diffing only deals with the attributes you have in your code.
    if (!element.hasAttribute('tabindex')) {
      element.tabIndex = -1;
    }

    element.focus({ preventScroll: true });
  }

View on GitHub (pinned to 3600ca084e)