From 063e526433667d3f182a841078e693ef7d27a8a4 Mon Sep 17 00:00:00 2001 From: sibbng Date: Fri, 11 Nov 2022 02:13:55 +0300 Subject: [PATCH 1/2] fix(onClickOutside): call handler if `click` event is fired by a keypress --- packages/core/onClickOutside/index.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts index 2e329a0e6a1..ae44d212852 100644 --- a/packages/core/onClickOutside/index.ts +++ b/packages/core/onClickOutside/index.ts @@ -52,9 +52,14 @@ export function onClickOutside( const el = unrefElement(target) - if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value) + if (!el || el === event.target || event.composedPath().includes(el)) return + if (!shouldListen.value) { + shouldListen.value = true + return + } + handler(event) } @@ -69,7 +74,8 @@ export function onClickOutside( useEventListener(window, 'click', listener, { passive: true, capture }), useEventListener(window, 'pointerdown', (e) => { const el = unrefElement(target) - shouldListen.value = !!el && !e.composedPath().includes(el) && !shouldIgnore(e) + if (el) + shouldListen.value = !e.composedPath().includes(el) && !shouldIgnore(e) }, { passive: true }), useEventListener(window, 'pointerup', (e) => { if (e.button === 0) { From 2d113b21a7976710a288f63038a50b2e0365f9cb Mon Sep 17 00:00:00 2001 From: sibbng Date: Fri, 11 Nov 2022 17:06:06 +0300 Subject: [PATCH 2/2] refactor: `shouldListen` doesn't have to be a ref --- packages/core/onClickOutside/index.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts index ae44d212852..bf8933eb311 100644 --- a/packages/core/onClickOutside/index.ts +++ b/packages/core/onClickOutside/index.ts @@ -1,5 +1,4 @@ import type { Fn } from '@vueuse/shared' -import { ref } from 'vue-demi' import type { MaybeElementRef } from '../unrefElement' import { unrefElement } from '../unrefElement' import { useEventListener } from '../useEventListener' @@ -43,7 +42,7 @@ export function onClickOutside( if (!window) return - const shouldListen = ref(true) + let shouldListen = true let fallback: number @@ -55,8 +54,8 @@ export function onClickOutside( if (!el || el === event.target || event.composedPath().includes(el)) return - if (!shouldListen.value) { - shouldListen.value = true + if (!shouldListen) { + shouldListen = true return } @@ -75,7 +74,7 @@ export function onClickOutside( useEventListener(window, 'pointerdown', (e) => { const el = unrefElement(target) if (el) - shouldListen.value = !e.composedPath().includes(el) && !shouldIgnore(e) + shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e) }, { passive: true }), useEventListener(window, 'pointerup', (e) => { if (e.button === 0) {