docs: onClickOutside ignore by CSS Selectors (#4836)

vitomir-knime · web-flow · commit 3998b1a37ed2 · 2025-06-28T10:10:16.000Z
diff --git a/packages/core/onClickOutside/index.md b/packages/core/onClickOutside/index.md
@@ -44,6 +44,19 @@ useEventListener('pointermove', (e) => {
 })
 ```
 
+If you want to ignore certain elements, you can use the `ignore` option. Provide the elements to ignore as an array of Refs or CSS Selectors.
+
+```ts
+const ignoreElRef = useTemplateRef<HTMLElement>('ignoreEl')
+const ignoreElSelector = '.ignore-el'
+
+onClickOutside(
+  target,
+  event => console.log(event),
+  { ignore: [ignoreElRef, ignoreElSelector] },
+)
+```
+
 ## Component Usage
 
 ```vue
diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts
@@ -10,7 +10,8 @@ import { useEventListener } from '../useEventListener'
 
 export interface OnClickOutsideOptions<Controls extends boolean = false> extends ConfigurableWindow {
   /**
-   * List of elements that should not trigger the event.
+   * List of elements that should not trigger the event,
+   * provided as Refs or CSS Selectors.
    */
   ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]>
   /**
@@ -84,8 +85,8 @@ export function onClickOutside(
   if (isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true
     const listenerOptions = { passive: true }
-    // Not using useEventListener because this event handlers must not be disposed.
-    // See previusly linked references and https://github.com/vueuse/vueuse/issues/4724
+    // Not using useEventListener because these event handlers must not be disposed.
+    // See previously linked references and https://github.com/vueuse/vueuse/issues/4724
     Array.from(window.document.body.children)
       .forEach(el => el.addEventListener('click', noop, listenerOptions))
     window.document.documentElement.addEventListener('click', noop, listenerOptions)
