kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(menu): prevent dropdown from closing when cursor crosses offset gap (#2367)

This commit is contained in:
Noah Neukam 2026-03-05 12:50:04 +01:00 committed by GitHub
parent 62eb72c9f7
commit d7722d0193
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/misc/Dropdown.vue
View File

@ -68,9 +68,11 @@ defineSlots<{
const initialMount = ref(false)
const open = ref(false)
const dropdown = ref<HTMLElement>()
const dropdownMenu = ref<HTMLElement>()
const dropdownPosition = ref({x: 0, y: 0})
const dropdownMenuOffset = computed(() => 4)
function close() {
open.value = false
@ -87,7 +89,7 @@ async function updatePosition() {
placement: 'bottom-end',
strategy: 'absolute',
middleware: [
offset(4),
offset(dropdownMenuOffset.value),
autoPlacement({
allowedPlacements: ['bottom-end', 'top-end', 'bottom-start', 'top-start'],
padding: 8,
@ -102,6 +104,7 @@ async function updatePosition() {
const dropdownMenuStyle = computed(() => ({
left: `${dropdownPosition.value.x}px`,
top: `${dropdownPosition.value.y}px`,
'--hover-offset': `${dropdownMenuOffset.value}px`,
}))
function toggleOpen() {
@ -129,6 +132,12 @@ onClickOutside(dropdown, (e) => {
position: relative;
}
.dropdown-menu::before {
content: "";
position: absolute;
inset: calc(var(--hover-offset) * -1);
}
.dropdown-menu {
min-inline-size: 12rem;
position: absolute;