From f10a4c4de83cb6ae04ae106a8bdd9e575a684867 Mon Sep 17 00:00:00 2001
From: "fandi.susanto.bts" <fandi.susanto.bts@gmail.com>
Date: Thu, 6 Aug 2026 10:46:11 +0700
Subject: [PATCH] CMenu fix clickaway

---
 src/components/menu/CMenu.vue | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/menu/CMenu.vue b/src/components/menu/CMenu.vue
index 5682173..87b10db 100644
--- a/src/components/menu/CMenu.vue
+++ b/src/components/menu/CMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import CMenuList from './CMenuList.vue'
 import type {
@@ -28,6 +28,7 @@ const emit = defineEmits<{
 }>()
 
 const expandedKeys = ref<Set<string>>(new Set())
+const rootList = ref<{ $el: HTMLElement } | null>(null)
 
 const resolvedSubmenuMode = computed<'inline' | 'flyout'>(() => {
   if (props.submenuMode !== 'auto') return props.submenuMode
@@ -74,10 +75,36 @@ function selectItem(event: CMenuSelectEvent) {
   expandedKeys.value = new Set()
   emit('select', event)
 }
+
+function eventIsInsideMenu(event: Event) {
+  const element = rootList.value?.$el
+  return Boolean(element && event.composedPath().includes(element))
+}
+
+function closeFromOutside(event: Event) {
+  if (
+    resolvedSubmenuMode.value === 'flyout' &&
+    expandedKeys.value.size > 0 &&
+    !eventIsInsideMenu(event)
+  ) {
+    expandedKeys.value = new Set()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', closeFromOutside, true)
+  document.addEventListener('focusin', closeFromOutside, true)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', closeFromOutside, true)
+  document.removeEventListener('focusin', closeFromOutside, true)
+})
 </script>
 
 <template>
   <CMenuList
+    ref="rootList"
     :items="items"
     :orientation="orientation"
     :submenu-mode="resolvedSubmenuMode"