fix(vue): handle outsideClick touchend event on SVG elements (#3777)

Closes: #3752
Reuses code from: #3704

Right now `touchend` only checks if target is HTMLElement, but this
check will fail for some other elements (like SVG elements).

This change brings dom utils from #3704 to Vue to properly resolve
target.

Before:


https://github.com/user-attachments/assets/668b79df-b4d7-4287-acac-1c4a8777d6dd

After:


https://github.com/user-attachments/assets/92e328a8-0994-40df-b4ca-0ca610b81d72

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: Sekhmet

packages/@headlessui-vue/CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Cancel outside click behavior on touch devices when scrolling ([#3266](https://github.com/tailwindlabs/headlessui/pull/3266))
 - Fix restoring focus to correct element when closing `Dialog` component ([#3365](https://github.com/tailwindlabs/headlessui/pull/3365))
 - Cleanup `process` in Combobox component when using virtualization ([#3495](https://github.com/tailwindlabs/headlessui/pull/3495))
+- Ensure outside click properly works when clicking SVG elements ([#3777](https://github.com/tailwindlabs/headlessui/pull/3777))
 
 ## [1.7.22] - 2024-05-08
 

packages/@headlessui-vue/src/hooks/use-outside-click.ts

@@ -1,5 +1,5 @@
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
-import { dom } from '../utils/dom'
+import { dom, isHTMLIframeElement, isHTMLorSVGElement } from '../utils/dom'
 import { FocusableMode, isFocusableElement } from '../utils/focus-management'
 import { isMobile } from '../utils/platform'
 import { useDocumentEvent } from './use-document-event'
@@ -19,12 +19,15 @@ const MOVE_THRESHOLD_PX = 30
 
 export function useOutsideClick(
   containers: ContainerInput | (() => ContainerInput),
-  cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void,
+  cb: (
+    event: MouseEvent | PointerEvent | FocusEvent | TouchEvent,
+    target: HTMLOrSVGElement & Element
+  ) => void,
   enabled: ComputedRef<boolean> = computed(() => true)
 ) {
   function handleOutsideClick<E extends MouseEvent | PointerEvent | FocusEvent | TouchEvent>(
     event: E,
-    resolveTarget: (event: E) => HTMLElement | null
+    resolveTarget: (event: E) => (HTMLOrSVGElement & Element) | null
   ) {
     // Check whether the event got prevented already. This can happen if you use the
     // useOutsideClick hook in both a Dialog and a Menu and the inner Menu "cancels" the default
@@ -162,7 +165,7 @@ export function useOutsideClick(
       }
 
       return handleOutsideClick(event, () => {
-        if (event.target instanceof HTMLElement) {
+        if (isHTMLorSVGElement(event.target)) {
           return event.target
         }
         return null
@@ -188,7 +191,7 @@ export function useOutsideClick(
     'blur',
     (event) => {
       return handleOutsideClick(event, () => {
-        return window.document.activeElement instanceof HTMLIFrameElement
+        return isHTMLIframeElement(window.document.activeElement)
           ? window.document.activeElement
           : null
       })

packages/@headlessui-vue/src/utils/dom.ts

@@ -21,3 +21,38 @@ export function dom<T extends HTMLElement | ComponentPublicInstance>(
 
   return null
 }
+
+// Source: https://github.com/tailwindlabs/headlessui/blob/2de2779a1e3a5a02c1684e611daf5a68e8002143/packages/%40headlessui-react/src/utils/dom.ts
+// Normally you can use `element instanceof HTMLElement`, but if you are in
+// different JS Context (e.g.: inside an iframe) then the `HTMLElement` will be
+// a different class and the check will fail.
+//
+// Instead, we will check for certain properties to determine if the element
+// is of a specific type.
+
+export function isNode(element: unknown): element is Node {
+  if (typeof element !== 'object') return false
+  if (element === null) return false
+  return 'nodeType' in element
+}
+
+export function isElement(element: unknown): element is Element {
+  return isNode(element) && 'tagName' in element
+}
+
+export function isHTMLElement(element: unknown): element is HTMLElement {
+  return isElement(element) && 'accessKey' in element
+}
+
+// HTMLOrSVGElement doesn't inherit from HTMLElement or from Element. But this
+// is the type that contains the `tabIndex` property.
+//
+// Once we know that this is an `HTMLOrSVGElement` we also know that it is an
+// `Element` (that contains more information)
+export function isHTMLorSVGElement(element: unknown): element is HTMLOrSVGElement & Element {
+  return isElement(element) && 'tabIndex' in element
+}
+
+export function isHTMLIframeElement(element: unknown): element is HTMLIFrameElement {
+  return isHTMLElement(element) && element.nodeName === 'IFRAME'
+}

packages/@headlessui-vue/src/utils/focus-management.ts

@@ -75,7 +75,7 @@ export enum FocusableMode {
 }
 
 export function isFocusableElement(
-  element: HTMLElement,
+  element: HTMLOrSVGElement & Element,
   mode: FocusableMode = FocusableMode.Strict
 ) {
   if (element === getOwnerDocument(element)?.body) return false
@@ -85,7 +85,7 @@ export function isFocusableElement(
       return element.matches(focusableSelector)
     },
     [FocusableMode.Loose]() {
-      let next: HTMLElement | null = element
+      let next: Element | null = element
 
       while (next !== null) {
         if (next.matches(focusableSelector)) return true