Fix focus not returned to SVG Element (#3704)

This PR fixes an issue where the focus is not returned to an `SVG`
element with a `tabIndex` correctly.

There are a few issues going on here:

1. We assume that the element to focus (`e.target`) is an instanceof
`HTMLElement`, but the `SVGElement` is not an instanceof `HTMLElement`.
2. By using `instanceof` we are checking against concrete classes, so if
this happen to cross certain contexts (Shadow DOM, Iframes, ...) then
the instances would be different.

To solve this, we will now:

1. Relax the types and only care about the actual attributes and methods
we are interested in. In most cases this means changing internal types
from `HTMLElement` to `Element` for example.
2. We will check whether certain properties are available in the object
to deduce the correct type from the object.

Fixes: #3660

## Test plan

Added an SVG to open a Dialog component and made sure that pressing
`escape` or clicking outside of the Dialog does restore the focus to the
SVG itself.
```tsx
<svg
  tabIndex={0}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      setIsOpen((v) => !v)
    }
  }}
  onClick={() => setIsOpen((v) => !v)}
  className="h-6 w-6 text-gray-500"
>
  <BookOpenIcon />
</svg>
```


Here is a video of that behavior:


https://github.com/user-attachments/assets/1805ca67-8bc7-4315-98a7-2490cba9230c

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix clicking `Label` component should open `<Input type="file">` ([#3707](https://github.com/tailwindlabs/headlessui/pull/3707))
 - Ensure clicking on interactive elements inside `Label` component works ([#3709](https://github.com/tailwindlabs/headlessui/pull/3709))
+- Fix focus not returned to SVG Element ([#3704](https://github.com/tailwindlabs/headlessui/pull/3704))
 
 ## [2.2.2] - 2025-04-17
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -63,6 +63,7 @@ import { history } from '../../utils/active-element-history'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
+import * as DOM from '../../utils/dom'
 import { match } from '../../utils/match'
 import { isMobile } from '../../utils/platform'
 import {
@@ -1012,8 +1013,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
         }
 
         let option = e.target.closest('[role="option"]:not([data-disabled])')
-        if (option !== null) {
-          return QuickReleaseAction.Select(option as HTMLElement)
+        if (DOM.isHTMLElement(option)) {
+          return QuickReleaseAction.Select(option)
         }
 
         if (optionsElement?.contains(e.target)) {

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -35,6 +35,7 @@ import {
 } from '../../internal/open-closed'
 import type { Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import * as DOM from '../../utils/dom'
 import { match } from '../../utils/match'
 import { getOwnerDocument } from '../../utils/owner'
 import {
@@ -185,7 +186,7 @@ function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
     ref,
     optionalRef(
       (ref) => {
-        internalDisclosureRef.current = ref as HTMLElement | null
+        internalDisclosureRef.current = ref
       },
       props.as === undefined ||
         // @ts-expect-error The `as` prop _can_ be a Fragment
@@ -202,22 +203,26 @@ function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
   } as StateDefinition)
   let [{ disclosureState, buttonId }, dispatch] = reducerBag
 
-  let close = useEvent((focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => {
-    dispatch({ type: ActionTypes.CloseDisclosure })
-    let ownerDocument = getOwnerDocument(internalDisclosureRef)
-    if (!ownerDocument) return
-    if (!buttonId) return
+  let close = useEvent(
+    (focusableElement?: HTMLOrSVGElement | MutableRefObject<HTMLOrSVGElement | null>) => {
+      dispatch({ type: ActionTypes.CloseDisclosure })
+      let ownerDocument = getOwnerDocument(internalDisclosureRef)
+      if (!ownerDocument) return
+      if (!buttonId) return
 
-    let restoreElement = (() => {
-      if (!focusableElement) return ownerDocument.getElementById(buttonId)
-      if (focusableElement instanceof HTMLElement) return focusableElement
-      if (focusableElement.current instanceof HTMLElement) return focusableElement.current
+      let restoreElement = (() => {
+        if (!focusableElement) return ownerDocument.getElementById(buttonId)
+        if (DOM.isHTMLorSVGElement(focusableElement)) return focusableElement
+        if ('current' in focusableElement && DOM.isHTMLorSVGElement(focusableElement.current)) {
+          return focusableElement.current
+        }
 
-      return ownerDocument.getElementById(buttonId)
-    })()
+        return ownerDocument.getElementById(buttonId)
+      })()
 
-    restoreElement?.focus()
-  })
+      restoreElement?.focus()
+    }
+  )
 
   let api = useMemo<ContextType<typeof DisclosureAPIContext>>(() => ({ close }), [close])
 

packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx

@@ -21,25 +21,26 @@ import { useWatch } from '../../hooks/use-watch'
 import { Hidden, HiddenFeatures } from '../../internal/hidden'
 import type { Props } from '../../types'
 import { history } from '../../utils/active-element-history'
+import * as DOM from '../../utils/dom'
 import { Focus, FocusResult, focusElement, focusIn } from '../../utils/focus-management'
 import { match } from '../../utils/match'
 import { microTask } from '../../utils/micro-task'
 import { forwardRefWithAs, useRender, type HasDisplayName, type RefProp } from '../../utils/render'
 
 type Containers =
   // Lazy resolved containers
-  | (() => Iterable<HTMLElement>)
+  | (() => Iterable<Element>)
 
   // List of containers
-  | MutableRefObject<Set<MutableRefObject<HTMLElement | null>>>
+  | MutableRefObject<Set<MutableRefObject<Element | null>>>
 
-function resolveContainers(containers?: Containers): Set<HTMLElement> {
+function resolveContainers(containers?: Containers): Set<Element> {
   if (!containers) return new Set<HTMLElement>()
   if (typeof containers === 'function') return new Set(containers())
 
-  let all = new Set<HTMLElement>()
+  let all = new Set<Element>()
   for (let container of containers.current) {
-    if (container.current instanceof HTMLElement) {
+    if (DOM.isElement(container.current)) {
       all.add(container.current)
     }
   }
@@ -121,8 +122,8 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
 
   let direction = useTabDirection()
   let handleFocus = useEvent((e: ReactFocusEvent) => {
-    let el = container.current as HTMLElement
-    if (!el) return
+    if (!DOM.isHTMLElement(container.current)) return
+    let el = container.current
 
     // TODO: Cleanup once we are using real browser tests
     let wrapper = process.env.NODE_ENV === 'test' ? microTask : (cb: Function) => cb()
@@ -163,10 +164,10 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
       if (!(features & FocusTrapFeatures.FocusLock)) return
 
       let allContainers = resolveContainers(containers)
-      if (container.current instanceof HTMLElement) allContainers.add(container.current)
+      if (DOM.isHTMLElement(container.current)) allContainers.add(container.current)
 
       let relatedTarget = e.relatedTarget
-      if (!(relatedTarget instanceof HTMLElement)) return
+      if (!DOM.isHTMLorSVGElement(relatedTarget)) return
 
       // Known guards, leave them alone!
       if (relatedTarget.dataset.headlessuiFocusGuard === 'true') {
@@ -190,7 +191,7 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
 
         // It was invoked via something else (e.g.: click, programmatically, ...). Redirect to the
         // previous active item in the FocusTrap
-        else if (e.target instanceof HTMLElement) {
+        else if (DOM.isHTMLorSVGElement(e.target)) {
           focusElement(e.target)
         }
       }
@@ -247,7 +248,7 @@ export let FocusTrap = Object.assign(FocusTrapRoot, {
 // ---
 
 function useRestoreElement(enabled: boolean = true) {
-  let localHistory = useRef<HTMLElement[]>(history.slice())
+  let localHistory = useRef(history.slice())
 
   useWatch(
     ([newEnabled], [oldEnabled]) => {
@@ -418,7 +419,7 @@ function useFocusLock(
     ownerDocument: Document | null
     container: MutableRefObject<HTMLElement | null>
     containers?: Containers
-    previousActiveElement: MutableRefObject<HTMLElement | null>
+    previousActiveElement: MutableRefObject<HTMLOrSVGElement | null>
   }
 ) {
   let mounted = useIsMounted()
@@ -433,14 +434,14 @@ function useFocusLock(
       if (!mounted.current) return
 
       let allContainers = resolveContainers(containers)
-      if (container.current instanceof HTMLElement) allContainers.add(container.current)
+      if (DOM.isHTMLElement(container.current)) allContainers.add(container.current)
 
       let previous = previousActiveElement.current
       if (!previous) return
 
       let toElement = event.target as HTMLElement | null
 
-      if (toElement && toElement instanceof HTMLElement) {
+      if (DOM.isHTMLElement(toElement)) {
         if (!contains(allContainers, toElement)) {
           event.preventDefault()
           event.stopPropagation()
@@ -457,7 +458,7 @@ function useFocusLock(
   )
 }
 
-function contains(containers: Set<HTMLElement>, element: HTMLElement) {
+function contains(containers: Set<Element>, element: Element) {
   for (let container of containers) {
     if (container.contains(element)) return true
   }

packages/@headlessui-react/src/components/label/label.tsx

@@ -155,7 +155,7 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
     // Labels connected to 'real' controls will already click the element. But we don't know that
     // ahead of time. This will prevent the default click, such that only a single click happens
     // instead of two. Otherwise this results in a visual no-op.
-    if (current instanceof HTMLLabelElement) {
+    if (DOM.isHTMLLabelElement(current)) {
       e.preventDefault()
     }
 
@@ -168,7 +168,7 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
       context.props.onClick(e)
     }
 
-    if (current instanceof HTMLLabelElement) {
+    if (DOM.isHTMLLabelElement(current)) {
       let target = document.getElementById(current.htmlFor)
       if (target) {
         // Bail if the target element is disabled
@@ -186,7 +186,7 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
         // immediately require state changes, e.g.: Radio & Checkbox inputs need to be checked (or
         // unchecked).
         if (
-          (target instanceof HTMLInputElement &&
+          (DOM.isHTMLInputElement(target) &&
             (target.type === 'file' || target.type === 'radio' || target.type === 'checkbox')) ||
           target.role === 'radio' ||
           target.role === 'checkbox' ||

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -60,6 +60,7 @@ import type { EnsureArray, Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
+import * as DOM from '../../utils/dom'
 import {
   Focus as FocusManagementFocus,
   FocusableMode,
@@ -376,8 +377,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
         }
 
         let option = e.target.closest('[role="option"]:not([data-disabled])')
-        if (option !== null) {
-          return QuickReleaseAction.Select(option as HTMLElement)
+        if (DOM.isHTMLElement(option)) {
+          return QuickReleaseAction.Select(option)
         }
 
         if (optionsElement?.contains(e.target)) {

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -51,6 +51,7 @@ import type { Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
+import * as DOM from '../../utils/dom'
 import {
   Focus as FocusManagementFocus,
   FocusableMode,
@@ -241,8 +242,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
         }
 
         let item = e.target.closest('[role="menuitem"]:not([data-disabled])')
-        if (item !== null) {
-          return QuickReleaseAction.Select(item as HTMLElement)
+        if (DOM.isHTMLElement(item)) {
+          return QuickReleaseAction.Select(item)
         }
 
         if (itemsElement?.contains(e.target)) {

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -59,6 +59,7 @@ import {
 } from '../../internal/open-closed'
 import type { Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import * as DOM from '../../utils/dom'
 import {
   Focus,
   FocusResult,
@@ -358,7 +359,7 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
     'focus',
     (event) => {
       if (event.target === window) return
-      if (!(event.target instanceof HTMLElement)) return
+      if (!DOM.isHTMLorSVGElement(event.target)) return
       if (popoverState !== PopoverStates.Open) return
       if (isFocusWithinPopoverGroup()) return
       if (!button) return
@@ -395,8 +396,8 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
 
       let restoreElement = (() => {
         if (!focusableElement) return button
-        if (focusableElement instanceof HTMLElement) return focusableElement
-        if ('current' in focusableElement && focusableElement.current instanceof HTMLElement)
+        if (DOM.isHTMLElement(focusableElement)) return focusableElement
+        if ('current' in focusableElement && DOM.isHTMLElement(focusableElement.current))
           return focusableElement.current
 
         return button
@@ -679,8 +680,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
 
   let direction = useTabDirection()
   let handleFocus = useEvent(() => {
-    let el = state.panel as HTMLElement
-    if (!el) return
+    if (!DOM.isHTMLElement(state.panel)) return
+    let el = state.panel
 
     function run() {
       let result = match(direction.current, {

packages/@headlessui-react/src/components/portal/portal.tsx

@@ -22,6 +22,7 @@ import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complet
 import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
 import { usePortalRoot } from '../../internal/portal-force-root'
 import type { Props } from '../../types'
+import * as DOM from '../../utils/dom'
 import { env } from '../../utils/env'
 import { forwardRefWithAs, useRender, type HasDisplayName, type RefProp } from '../../utils/render'
 
@@ -120,7 +121,7 @@ let InternalPortalFn = forwardRefWithAs(function InternalPortalFn<
   useOnUnmount(() => {
     if (!target || !element) return
 
-    if (element instanceof Node && target.contains(element)) {
+    if (DOM.isNode(element) && target.contains(element)) {
       target.removeChild(element)
     }
 

packages/@headlessui-react/src/components/switch/switch.tsx

@@ -28,6 +28,7 @@ import { FormFields } from '../../internal/form-fields'
 import { useProvidedId } from '../../internal/id'
 import type { Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import * as DOM from '../../utils/dom'
 import { attemptSubmit } from '../../utils/form'
 import {
   forwardRefWithAs,
@@ -85,7 +86,7 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
           htmlFor: context.switch?.id,
           onClick(event: React.MouseEvent<HTMLLabelElement>) {
             if (!switchElement) return
-            if (event.currentTarget instanceof HTMLLabelElement) {
+            if (DOM.isHTMLLabelElement(event.currentTarget)) {
               event.preventDefault()
             }
             switchElement.click()