From dfb5cf37b451c0d7c9719e6205209f30f0f48c8b Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Mon, 12 Oct 2026 02:33:14 -0300 Subject: [PATCH] fix(dropdown): keep submenu open while the pointer moves into it Moving the pointer diagonally from a submenu trigger to its flyout crosses the items below it, which closed the flyout before it could be reached. Delay hiding the flyout by 300ms, and show it immediately on hover or focus. --- frontend/src/styles/_dropdown.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/frontend/src/styles/_dropdown.scss b/frontend/src/styles/_dropdown.scss index 52a89ec6..71b75ffd 100644 --- a/frontend/src/styles/_dropdown.scss +++ b/frontend/src/styles/_dropdown.scss @@ -444,6 +444,19 @@ $breakpoints: ( border: var(--dropdown-border-width) solid var(--dropdown-border-color); border-radius: var(--dropdown-border-radius); box-shadow: var(--dropdown-box-shadow); + // Delay hiding: moving the pointer diagonally into the flyout crosses the + // items below the parent, and the delay keeps it open long enough to reach it. + // Delaying display (not visibility) keeps the flyout inheriting the menu's + // visibility, so it still disappears together with the main menu. + transition-property: display; + transition-duration: 0s; + transition-delay: 300ms; + transition-behavior: allow-discrete; + } + + &:hover > .dropdown-submenu-content, + &:focus-within > .dropdown-submenu-content { + transition-delay: 0s; } } }