feat(onClickOutside): allow the value of target to be a getter (#5098)

keeplearning66 · web-flow · commit 7133cfe456a3 · 2025-10-15T19:59:53.000Z
diff --git a/packages/core/onClickOutside/index.browser.test.ts b/packages/core/onClickOutside/index.browser.test.ts
@@ -3,8 +3,9 @@ import { describe, expect, it, vi } from 'vitest'
 import { defineComponent, useTemplateRef } from 'vue'
 import { onClickOutside } from './index'
 
-const complexComponent = defineComponent({
-  template: `
+function getComplexComponent(useGetter = false) {
+  return defineComponent({
+    template: `
     <div>
       <div ref="target">
         Inside
@@ -23,31 +24,31 @@ const complexComponent = defineComponent({
       </div>
    </div>
   `,
-  setup() {
-    const target = useTemplateRef<HTMLDivElement>('target')
-    const outside = useTemplateRef<HTMLDivElement>('outside')
+    setup() {
+      const target = useTemplateRef<HTMLDivElement>('target')
+      const outside = useTemplateRef<HTMLDivElement>('outside')
+      onClickOutside(
+        useGetter ? () => target.value : target,
+        (...args) => {
+          console.log(...args)
+        },
+        {
+          ignore: [outside],
+        },
+      )
 
-    onClickOutside(
-      target,
-      (...args) => {
-        console.log(...args)
-      },
-      {
-        ignore: [outside],
-      },
-    )
-
-    return {
-      target,
-      outside,
-    }
-  },
-})
+      return {
+        target,
+        outside,
+      }
+    },
+  })
+}
 
 describe('onClickOutside', () => {
   it('should work with ignored element', async () => {
     const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-    const screen = page.render(complexComponent)
+    const screen = page.render(getComplexComponent())
     const target = screen.getByText('Inside')
     const outside = screen.getByText('Outside')
     const label = screen.getByText('Label')
@@ -63,4 +64,19 @@ describe('onClickOutside', () => {
     await userEvent.click(other)
     expect(consoleSpy).toHaveBeenCalled()
   })
+
+  it('allow the value of target to be a getter', async () => {
+    const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+    const screen = page.render(getComplexComponent(true))
+    const target = screen.getByText('Inside')
+    const other = screen.getByText('Other')
+
+    await expect.element(target).toBeInTheDocument()
+    await expect.element(other).toBeInTheDocument()
+    expect(consoleSpy).not.toHaveBeenCalled()
+    await userEvent.click(target)
+    expect(consoleSpy).not.toHaveBeenCalled()
+    await userEvent.click(other)
+    expect(consoleSpy).toHaveBeenCalled()
+  })
 })
diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts
@@ -1,7 +1,7 @@
 import type { Fn } from '@vueuse/shared'
 import type { ComponentPublicInstance, MaybeRefOrGetter, VNode } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
-import type { MaybeElementRef } from '../unrefElement'
+import type { MaybeComputedElementRef, MaybeElementRef } from '../unrefElement'
 import { isIOS, noop } from '@vueuse/shared'
 import { toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
@@ -58,22 +58,22 @@ let _iOSWorkaround = false
 export function onClickOutside<
   T extends OnClickOutsideOptions,
 >(
-  target: MaybeElementRef,
+  target: MaybeComputedElementRef,
   handler: OnClickOutsideHandler<T>,
   options?: T
 ): Fn
 
 export function onClickOutside<
   T extends OnClickOutsideOptions<true>,
 >(
-  target: MaybeElementRef,
+  target: MaybeComputedElementRef,
   handler: OnClickOutsideHandler<T>,
   options: T
 ): OnClickOutsideControlsReturn
 
 // Implementation
 export function onClickOutside(
-  target: MaybeElementRef,
+  target: MaybeComputedElementRef,
   handler: OnClickOutsideHandler,
   options: OnClickOutsideOptions<boolean> = {},
 ) {
@@ -116,12 +116,12 @@ export function onClickOutside(
    * 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 {
+  function hasMultipleRoots(target: MaybeComputedElementRef): boolean {
     const vm = toValue(target) as ComponentPublicInstance
     return vm && vm.$.subTree.shapeFlag === 16
   }
 
-  function checkMultipleRoots(target: MaybeElementRef, event: Event): boolean {
+  function checkMultipleRoots(target: MaybeComputedElementRef, event: Event): boolean {
     const vm = toValue(target) as ComponentPublicInstance
     const children = vm.$.subTree && vm.$.subTree.children
 
