a

packages/frontend/src/components/MkMenu.vue

@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mousedown.stop="showChildren(item, $event)">
+			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)" @click.stop="showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
@@ -135,8 +135,12 @@ function childActioned() {
 	close(true);
 }
 
-function onGlobalMousedown(event: MouseEvent) {
-	console.log('globalmousedown')
+const onGlobalMousedown = (event: MouseEvent) => {
+	console.log('globalmousedown', itemsEl);
+	if (!itemsEl || !document.body.contains(itemsEl)) {
+		document.removeEventListener('mousedown', onGlobalMousedown);
+		return;
+	}
 	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
@@ -186,10 +190,6 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 }
 
-function onmousedown(ev: MouseEvent) {
-	ev.stopImmediatePropagation();
-}
-
 function clicked(fn: MenuAction, ev: MouseEvent) {
 	fn(ev);
 	close(true);

packages/frontend/src/components/MkModal.vue

@@ -296,7 +296,6 @@ const onOpened = () => {
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
 	el.addEventListener('mousedown', ev => {
-		ev.stopPropagation();
 		console.log('mousedown');
 		contentClicking = true;
 		window.addEventListener('mouseup', ev => {
@@ -306,7 +305,7 @@ const onOpened = () => {
 				contentClicking = false;
 			}, 100);
 		}, { passive: true, once: true });
-	}, { passive: true, capture: true });
+	}, { passive: true });
 };
 
 const alignObserver = new ResizeObserver((entries, observer) => {

packages/frontend/src/components/MkPopupMenu.vue

@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="emit('closing')" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="_close" @hide="manualShowing = false"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="closed">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="manualShowing = false"/>
 </MkModal>
 </template>
 
@@ -15,7 +15,7 @@ import MkModal from './MkModal.vue';
 import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 
-defineProps<{
+const props = defineProps<{
 	items: MenuItem[];
 	align?: 'center' | string;
 	width?: number;
@@ -28,20 +28,33 @@ const emit = defineEmits<{
 	(ev: 'closing'): void;
 }>();
 
+console.log('popup menu modal setup', props.items);
+
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
 
 function click() {
-	console.log('popup menu click');
+	console.log('popup menu modal click', props.items);
 	close();
 }
 
-function _close() {
-	console.log('popup menu close event');
+function onModalClose() {
+	console.log('popup menu modal close', props.items);
+	emit('closing');
+}
+
+function onMenuClose() {
+	console.log('popup menu menu click', props.items);
 	close();
 }
 
+function closed() {
+	console.log('popup menu modal closed', props.items);
+	emit('closed');
+}
+
 function close() {
+	console.log('popup menu close', props.items);
 	if (!modal) return;
 	manualShowing.value = false;
 	modal.close();