????

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>
-			<button v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)">
+			<button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter.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>
@@ -170,10 +170,9 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 
 	if (props.asDrawer) {
-		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target, {
-			onClosing: () => {
-				close();
-			}
+		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target).finally(() => {
+			console.log('child drawer close');
+			emit('close');
 		});
 		emit('hide');
 	} else {
@@ -356,6 +355,7 @@ onBeforeUnmount(() => {
 	}
 
 	&.parent {
+		pointer-events: auto;
 		display: flex;
 		align-items: center;
 		cursor: default;

packages/frontend/src/components/MkModal.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.transition_modal_leaveTo]: transitionName === 'modal',
 		[$style.transition_send_leaveTo]: transitionName === 'send',
 	})"
-	:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
+	:duration="transitionDuration" appear @afterLeave="afterLeave" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, onBeforeUnmount, provide, watch } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
@@ -61,7 +61,12 @@ function getFixedContainer(el: Element | null): Element | null {
 type ModalTypes = 'popup' | 'dialog' | 'drawer';
 
 const props = withDefaults(defineProps<{
+	/**
+	 * 手動で表示/非表示を切り替える
+	 * falseに切り替えてもclosedは発火されないため、closeを呼ぶ必要がある
+	 */
 	manualShowing?: boolean | null;
+
 	anchor?: { x: string; y: string; };
 	src?: HTMLElement | null;
 	preferType?: ModalTypes | 'auto';
@@ -85,6 +90,7 @@ const emit = defineEmits<{
 	(ev: 'esc'): void;
 	(ev: 'close'): void;
 	(ev: 'closed'): void;
+	(ev: 'hide'): void; // afterLeaveで必ず発火する
 }>();
 
 provide('modal', true);
@@ -93,6 +99,7 @@ let maxHeight = $ref<number>();
 let fixed = $ref(false);
 let transformOrigin = $ref('center');
 let showing = $ref(true);
+let manuallyClosed = $ref(false);
 let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 let useSendAnime = $ref(false);
@@ -141,10 +148,20 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	// eslint-disable-next-line vue/no-mutating-props
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing = false;
+	manuallyClosed = true;
 	emit('close');
 }
 
-function onBgClick() {
+function afterLeave() {
+	emit('hide');
+	console.log('closed?', props.manualShowing, manuallyClosed);
+	if (props.manualShowing === null || manuallyClosed) {
+		emit('closed');
+	}
+}
+
+function onBgClick(e) {
+	console.log(e);
 	if (contentClicking) return;
 	emit('click');
 }

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="close" @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="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>
 </template>
 
@@ -31,6 +31,16 @@ const emit = defineEmits<{
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
 
+function click() {
+	console.log('popup menu click');
+	close();
+}
+
+function _close() {
+	console.log('popup menu close event');
+	close();
+}
+
 function close() {
 	if (!modal) return;
 	manualShowing.value = false;

packages/frontend/src/os.ts

@@ -550,6 +550,7 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 			viaKeyboard: options?.viaKeyboard,
 		}, {
 			closed: () => {
+				console.log('closed detected');
 				resolve();
 				dispose();
 			},

packages/frontend/src/scripts/get-user-menu.ts

@@ -330,7 +330,7 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 	}
 
 	const cleanup = () => {
-		if (_DEV_) console.log('user menu cleanup', cleanups);
+		console.log('user menu cleanup', cleanups);
 		cleanups.forEach(cleanup => cleanup());
 	};