CMenu fix clickaway

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"