diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue index b5987715a..34af209c0 100644 --- a/packages/frontend/src/components/MkPopupMenu.vue +++ b/packages/frontend/src/components/MkPopupMenu.vue @@ -1,5 +1,5 @@ @@ -20,6 +20,7 @@ defineProps<{ const emit = defineEmits<{ (ev: 'closed'): void; + (ev: 'closing'): void; }>(); let modal = $shallowRef>(); diff --git a/packages/frontend/src/components/form/select.vue b/packages/frontend/src/components/form/select.vue index 068ca2ebc..4b5a14f5b 100644 --- a/packages/frontend/src/components/form/select.vue +++ b/packages/frontend/src/components/form/select.vue @@ -18,7 +18,7 @@ > -
+
@@ -56,6 +56,7 @@ const slots = useSlots(); const { modelValue, autofocus } = toRefs(props); const v = ref(modelValue.value); const focused = ref(false); +const opening = ref(false); const changed = ref(false); const invalid = ref(false); const filled = computed(() => v.value !== '' && v.value != null); @@ -119,6 +120,7 @@ onMounted(() => { const onClick = (ev: MouseEvent) => { focused.value = true; + opening.value = true; const menu = []; let options = slots.default!(); @@ -158,6 +160,9 @@ const onClick = (ev: MouseEvent) => { os.popupMenu(menu, container.value, { width: container.value.offsetWidth, + onClosing: () => { + opening.value = false; + }, }).then(() => { focused.value = false; }); @@ -277,3 +282,13 @@ const onClick = (ev: MouseEvent) => { } } + + diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index a4c34104c..6e36f1837 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -515,6 +515,7 @@ export function popupMenu(items: MenuItem[] | Ref, src?: HTMLElement align?: string; width?: number; viaKeyboard?: boolean; + onClosing?: () => void; }) { return new Promise((resolve, reject) => { let dispose; @@ -529,6 +530,9 @@ export function popupMenu(items: MenuItem[] | Ref, src?: HTMLElement resolve(); dispose(); }, + closing: () => { + if (options?.onClosing) options.onClosing(); + }, }).then(res => { dispose = res.dispose; });