fix(COffcanvas): closes if onmouseup event is outside of the modal

Author: mrholek

packages/coreui-vue/src/components/offcanvas/COffcanvas.ts

@@ -97,19 +97,20 @@ const COffcanvas = defineComponent({
       }, 1)
     }
     const handleAfterEnter = () => {
-      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('mousedown', handleMouseDown)
+      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
       el.addEventListener('transitionend', () => {
         done()
       })
+      window.removeEventListener('mousedown', handleMouseDown)
+      window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')
     }
     const handleAfterLeave = (el: RendererElement) => {
       el.style.visibility = 'hidden'
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyUp)
     }
 
     const handleDismiss = () => {
@@ -124,7 +125,12 @@ const COffcanvas = defineComponent({
         }
       }
     }
-    const handleClickOutside = (event: Event) => {
+
+    const handleMouseDown = (event: Event) => {
+      window.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
+    }
+
+    const handleMouseUp = (event: Event) => {
       if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
         props.backdrop && handleDismiss()
       }
@@ -134,6 +140,7 @@ const COffcanvas = defineComponent({
       h(
         Transition,
         {
+          css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
           onLeave: (el, done) => handleLeave(el, done),