{"record":{"id":"2a04c17080f08d77","repo":"dotnet/aspnetcore","slug":"unable-to-focus-an-invalid-element","errorCode":null,"errorMessage":"Unable to focus an invalid element.","messagePattern":"Unable to focus an invalid element\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/Components/Web.JS/src/DomWrapper.ts","lineNumber":21,"sourceCode":"\nimport '@microsoft/dotnet-js-interop';\n\nexport const domFunctions = {\n  focus,\n  focusBySelector,\n};\n\nfunction focus(element: HTMLOrSVGElement, preventScroll: boolean): void {\n  if (element instanceof HTMLElement) {\n    element.focus({ preventScroll });\n  } else if (element instanceof SVGElement) {\n    if (element.hasAttribute('tabindex')) {\n      element.focus({ preventScroll });\n    } else {\n      throw new Error('Unable to focus an SVG element that does not have a tabindex.');\n    }\n  } else {\n    throw new Error('Unable to focus an invalid element.');\n  }\n}\n\nfunction focusBySelector(selector: string) {\n  const element = document.querySelector(selector) as HTMLElement;\n  if (element) {\n    // If no explicit tabindex is defined, mark it as programmatically-focusable.\n    // This does actually add a new HTML attribute, but it shouldn't interfere with\n    // diffing because diffing only deals with the attributes you have in your code.\n    if (!element.hasAttribute('tabindex')) {\n      element.tabIndex = -1;\n    }\n\n    element.focus({ preventScroll: true });\n  }\n}\n","sourceCodeStart":3,"sourceCodeEnd":38,"githubUrl":"https://github.com/dotnet/aspnetcore/blob/294cab2f9b2e03af6b953820c7ab497c3c8b7ad9/src/Components/Web.JS/src/DomWrapper.ts#L3-L38","documentation":"Thrown by domFunctions.focus when the target is neither an HTMLElement nor an SVGElement (it falls through both instanceof checks). This indicates the caller passed something invalid (null, a non-element node, or an object whose prototype chain does not include HTMLElement/SVGElement), and the framework cannot focus it.","triggerScenarios":"Passing null/undefined, a Document, a Text node, a detached element whose prototype got mangled (e.g. from another iframe/Realm where instanceof fails), or a polyfilled element to Blazor._internal.domFunctions.focus / FocusAsync.","commonSituations":"ElementReference resolving to null after a re-render; cross-iframe DOM nodes where instanceof HTMLElement fails across Realms; passing a wrapped/proxied element from a third-party library; calling focus on a DocumentFragment or comment node.","solutions":["Null-check the element before focusing: if (element instanceof HTMLElement || element instanceof SVGElement) focus(element).","Ensure the ElementReference is attached to a real rendered element (not null) before calling FocusAsync.","If the element comes from another iframe/Realm, use duck-typing (typeof element.focus === 'function') instead of instanceof, or pass the element via its own Realm's API.","Focus an HTMLElement ancestor instead of the invalid target."],"exampleFix":"// before\nconst el = document.querySelector('#maybe-missing');\nBlazor._internal.domFunctions.focus(el, false); // el is null -> throws\n\n// after\nconst el = document.querySelector('#maybe-missing');\nif (el instanceof HTMLElement || el instanceof SVGElement) {\n  Blazor._internal.domFunctions.focus(el, false);\n}","handlingStrategy":"type-guard","validationCode":"function focusSafe(el: HTMLOrSVGElement | null, preventScroll = false) {\n  if (el && (el instanceof HTMLElement || el instanceof SVGElement)) {\n    el.focus({ preventScroll });\n  }\n}","typeGuard":"function isFocusableElement(el: unknown): el is HTMLElement | SVGElement {\n  return el instanceof HTMLElement || el instanceof SVGElement;\n}\n\n// Cross-Realm-safe variant:\nfunction isFocusableLike(el: unknown): boolean {\n  return !!el && typeof (el as any).focus === 'function';\n}","tryCatchPattern":"try {\n  Blazor._internal.domFunctions.focus(target, false);\n} catch (e) {\n  if (/Unable to focus an invalid element/.test((e as Error).message)) {\n    console.warn('Skipping focus on invalid element', target);\n  } else throw e;\n}","preventionTips":["Null-check and type-guard elements before focusing.","Ensure ElementReferences are attached before calling FocusAsync.","For cross-iframe nodes, duck-type on a 'focus' function rather than instanceof.","Focus a known HTMLElement ancestor instead of an unknown target."],"tags":["dom","focus","validation","null-safety"],"analyzedSha":"294cab2f9b2e03af6b953820c7ab497c3c8b7ad9","analyzedAt":"2026-08-06T20:08:02.189Z","schemaVersion":2},"datasetVersion":"2026-08-06T23:17:07.152Z"}