From 16808efbe6f69bfd80aa43ed38ad65685367a843 Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Wed, 2 Oct 2024 20:04:11 +0100
Subject: [PATCH] fix(CModal): closes if onmouseup event is outside of the
modal
---
packages/coreui-react/src/components/modal/CModal.tsx | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx
index e02c3425..7c4b3274 100644
--- a/packages/coreui-react/src/components/modal/CModal.tsx
+++ b/packages/coreui-react/src/components/modal/CModal.tsx
@@ -145,14 +145,14 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
useEffect(() => {
if (_visible) {
activeElementRef.current = document.activeElement as HTMLElement | null
- document.addEventListener('mouseup', handleClickOutside)
+ document.addEventListener('mousedown', handleMouseDown)
document.addEventListener('keydown', handleKeyDown)
} else {
activeElementRef.current?.focus()
}
return () => {
- document.removeEventListener('mouseup', handleClickOutside)
+ document.removeEventListener('mousedown', handleMouseDown)
document.removeEventListener('keydown', handleKeyDown)
}
}, [_visible])
@@ -205,8 +205,11 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
}
}
}, [_visible])
-
- const handleClickOutside = (event: Event) => {
+
+ const handleMouseDown = (event: Event) => {
+ document.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
+ }
+ const handleMouseUp = (event: Event) => {
if (modalRef.current && modalRef.current == event.target) {
handleDismiss()
}