mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 15:36:49 +08:00
fix: avoid closing cron menu while selecting options
This commit is contained in:
@@ -8,7 +8,44 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
|
const menu = ref(false)
|
||||||
const currentCron = ref(props.modelValue)
|
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 => {
|
watch(currentCron, newVal => {
|
||||||
emit('update:modelValue', newVal)
|
emit('update:modelValue', newVal)
|
||||||
@@ -23,8 +60,13 @@ watch(
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div ref="menuRoot">
|
||||||
<VMenu :close-on-content-click="false" content-class="cursor-default" persistent>
|
<VMenu
|
||||||
|
v-model="menu"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
:content-class="['cursor-default', menuContentClass]"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<slot name="activator" :menuprops="props" />
|
<slot name="activator" :menuprops="props" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user