fix: avoid closing cron menu while selecting options

This commit is contained in:
jxxghp
2026-04-10 15:33:08 +08:00
parent d76a50c216
commit ba7d4cd392

View File

@@ -8,7 +8,44 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue'])
const menu = ref(false)
const currentCron = ref(props.modelValue)
const menuRoot = ref<HTMLElement>()
const instance = getCurrentInstance()
const menuContentClass = `cron-input-menu-${instance?.uid ?? 'default'}`
const menuContentSelector = `.${menuContentClass}`
function isCronMenuTarget(target: EventTarget | null) {
if (!(target instanceof Element)) return false
if (menuRoot.value?.contains(target)) return true
const menuContent = document.querySelector(menuContentSelector)
if (menuContent?.contains(target)) return true
const overlayId = target.closest('.v-overlay')?.getAttribute('id')
if (!overlayId || !menuContent) return false
return Array.from(menuContent.querySelectorAll('[aria-owns]')).some(
activator => activator.getAttribute('aria-owns') === overlayId,
)
}
function closeOnOutsidePointerDown(event: PointerEvent) {
if (!menu.value || isCronMenuTarget(event.target)) return
menu.value = false
}
onMounted(() => {
document.addEventListener('pointerdown', closeOnOutsidePointerDown, true)
})
onBeforeUnmount(() => {
document.removeEventListener('pointerdown', closeOnOutsidePointerDown, true)
})
watch(currentCron, newVal => {
emit('update:modelValue', newVal)
@@ -23,8 +60,13 @@ watch(
</script>
<template>
<div>
<VMenu :close-on-content-click="false" content-class="cursor-default" persistent>
<div ref="menuRoot">
<VMenu
v-model="menu"
:close-on-content-click="false"
:content-class="['cursor-default', menuContentClass]"
persistent
>
<template v-slot:activator="{ props }">
<slot name="activator" :menuprops="props" />
</template>