From baa1fa3ecab762b6c442f1b67942a54079e1c6e2 Mon Sep 17 00:00:00 2001 From: Tim Spears Date: Tue, 30 Aug 2022 09:57:37 -0400 Subject: [PATCH] support for parent to be component --- resources/js/components/UseOpenable.vue | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/resources/js/components/UseOpenable.vue b/resources/js/components/UseOpenable.vue index 12f52cc..3777868 100644 --- a/resources/js/components/UseOpenable.vue +++ b/resources/js/components/UseOpenable.vue @@ -12,7 +12,7 @@ const TAGS_WITH_DEFAULT_BEHAVIOR = ['A', 'BUTTON', 'IFRAME', 'INPUT', 'TEXTAREA' * modals and dropdowns. It provides methods for handling focus, keyboard * events, hover and delayed close. */ -export default function useOpenable (el, focusOnClose = null) { +export default function useOpenable (el, focusOnClose = null, isComponent = false) { let timeout = null const isOpen = ref(false) @@ -39,7 +39,11 @@ export default function useOpenable (el, focusOnClose = null) { addEventListener('focusout', checkFocus) addEventListener('keydown', checkKeydown) nextTick(() => { - el.value.addEventListener('mousedown', checkMousedown) + if (isComponent) { + el.value.$el.addEventListener('mousedown', checkMousedown) + } else { + el.value.addEventListener('mousedown', checkMousedown) + } }) } @@ -56,7 +60,11 @@ export default function useOpenable (el, focusOnClose = null) { isOpen.value = false removeEventListener('focusout', checkFocus) removeEventListener('keydown', checkKeydown) - el.value.removeEventListener('mousedown', checkMousedown) + if (isComponent) { + el.value.$el.removeEventListener('mousedown', checkMousedown) + } else { + el.value.removeEventListener('mousedown', checkMousedown) + } } /** @@ -78,7 +86,8 @@ export default function useOpenable (el, focusOnClose = null) { * component, and if so, closes the component. */ const checkFocus = (event) => { - if (isOpen.value && !el.value.contains(event.relatedTarget)) { + const element = isComponent ? el.value.$el : el.value + if (isOpen.value && !element.contains(event.relatedTarget)) { close() } }