From 225eabb19d474da2f2585847984fc7c6aa397e4f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Aug 2023 02:11:27 +0000
Subject: [PATCH] a

---
 packages/frontend/src/components/MkMenu.vue   | 14 +++++------
 packages/frontend/src/components/MkModal.vue  |  3 +--
 .../frontend/src/components/MkPopupMenu.vue   | 25 ++++++++++++++-----
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index f974aa1675..5082205b5b 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/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);
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 44a8b3c8b5..08ee30e441 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/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) => {
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 1c72d0dbb5..e44622a741 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/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();