feat(OnClickOutside): support component with fragments (#4313)

ilyaliao · web-flow · commit fe322bd9655a · 2024-11-21T08:05:45.000Z
diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts
@@ -1,4 +1,5 @@
 import type { Fn, MaybeRefOrGetter } from '@vueuse/shared'
+import type { ComponentPublicInstance, VNode } from 'vue-demi'
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
 import { isIOS, noop, toValue } from '@vueuse/shared'
@@ -69,9 +70,35 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
     })
   }
 
+  /**
+   * Determines if the given target has multiple root elements.
+   * Referenced from: https://github.com/vuejs/test-utils/blob/ccb460be55f9f6be05ab708500a41ec8adf6f4bc/src/vue-wrapper.ts#L21
+   */
+  function hasMultipleRoots(target: MaybeElementRef): boolean {
+    const vm = toValue(target) as ComponentPublicInstance
+    return vm && vm.$.subTree.shapeFlag === 16
+  }
+
+  function checkMultipleRoots(target: MaybeElementRef, event: PointerEvent): boolean {
+    const vm = toValue(target) as ComponentPublicInstance
+    const children = vm.$.subTree && vm.$.subTree.children
+
+    if (children == null || !Array.isArray(children))
+      return false
+
+    // @ts-expect-error should be VNode
+    return children.some((child: VNode) => child.el === event.target || event.composedPath().includes(child.el))
+  }
+
   const listener = (event: PointerEvent) => {
     const el = unrefElement(target)
 
+    if (event.target == null)
+      return
+
+    if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event))
+      return
+
     if (!el || el === event.target || event.composedPath().includes(el))
       return
 
