fix(frontend): MkPopupMenuがドロワーで子メニューの出現と同時にpopupをresolveさせるのをやめさせる (#11441)

* fix(frontend): MkPopupMenuがドロワーで子メニューの出現と同時にpopupをresolveさせるのをやめさせる

* fix

* noCache

* ✌️

* fix

* ????

* a

* a

* ✌️

* fix emoji picker

* ?????

* close

* 1

* fix2

* ✌️

* fix

* ✌️

* ✌️

* ✌️

* preferClick

* ✌️

* fix lint

* a

* rm nocache

packages/frontend/src/components/MkPopupMenu.vue

@@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal.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="modal.close()"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="onModalClosed">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { ref } from 'vue';
 import MkModal from './MkModal.vue';
 import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
@@ -29,6 +29,46 @@ const emit = defineEmits<{
 }>();
 
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
+const manualShowing = ref(true);
+const hiding = ref(false);
+
+function click() {
+	close();
+}
+
+function onModalClose() {
+	emit('closing');
+}
+
+function onMenuClose() {
+	close();
+	if (hiding.value) {
+		// hidingであればclosedを発火
+		emit('closed');
+	}
+}
+
+function onModalClosed() {
+	if (!hiding.value) {
+		// hidingでなければclosedを発火
+		emit('closed');
+	}
+}
+
+function hide() {
+	manualShowing.value = false;
+	hiding.value = true;
+
+	// closeは呼ぶ必要がある
+	modal?.close();
+}
+
+function close() {
+	manualShowing.value = false;
+
+	// closeは呼ぶ必要がある
+	modal?.close();
+}
 </script>
 
 <style lang="scss" module>