From 12e21d32a0c02d6eccf76a917128f2953797825f Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Tue, 20 Dec 2022 13:51:42 +0300
Subject: [PATCH] fix(onClickOutside): apply ignore list on keyboard clicks
 (#2438)

---
 packages/core/onClickOutside/index.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts
index bf8933eb311..db8a170654d 100644
--- a/packages/core/onClickOutside/index.ts
+++ b/packages/core/onClickOutside/index.ts
@@ -37,7 +37,7 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
   handler: OnClickOutsideHandler<{ detectIframe: T['detectIframe'] }>,
   options: T = {} as T,
 ) {
-  const { window = defaultWindow, ignore, capture = true, detectIframe = false } = options
+  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options
 
   if (!window)
     return
@@ -46,6 +46,13 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
 
   let fallback: number
 
+  const shouldIgnore = (event: PointerEvent) => {
+    return ignore.some((target) => {
+      const el = unrefElement(target)
+      return el && (event.target === el || event.composedPath().includes(el))
+    })
+  }
+
   const listener = (event: PointerEvent) => {
     window.clearTimeout(fallback)
 
@@ -54,6 +61,9 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
     if (!el || el === event.target || event.composedPath().includes(el))
       return
 
+    if (event.detail === 0)
+      shouldListen = !shouldIgnore(event)
+
     if (!shouldListen) {
       shouldListen = true
       return
@@ -62,13 +72,6 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
     handler(event)
   }
 
-  const shouldIgnore = (event: PointerEvent) => {
-    return ignore && ignore.some((target) => {
-      const el = unrefElement(target)
-      return el && (event.target === el || event.composedPath().includes(el))
-    })
-  }
-
   const cleanup = [
     useEventListener(window, 'click', listener, { passive: true, capture }),
     useEventListener(window, 'pointerdown', (e) => {