From 17ddd4de9087a98c87bec28a6b773572b1c58b50 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Wed, 16 Sep 2026 16:26:16 +0200 Subject: menu: do not close on the panel's own scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dismiss-on-scroll listener is on the capture phase, because `scroll` does not bubble — so it also heard the menu scrolling itself, and a long tracklist closed the moment it was wheeled. Filter on the event's origin. Co-Authored-By: Claude Opus 5 --- packages/meshbay-hub/src/meshbay_hub/static/menu.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'packages/meshbay-hub/src') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/menu.js b/packages/meshbay-hub/src/meshbay_hub/static/menu.js index 1c6a96a..16aecd8 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/menu.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/menu.js @@ -155,14 +155,27 @@ function Menu({ x, y, items, onClose }) { // sticky bands and the grid scrolls underneath them, so a menu that // survives a scroll is a menu still pointing at the album it was opened // on while sitting over a completely different one. + // + // But the panel also scrolls *itself*: a playlist's tracklist expands + // inside it and is routinely taller than the window. `scroll` does not + // bubble, which is why this listener is on the capture phase — and capture + // is equally what makes it hear the panel's own scrolling, on the way + // down. So the menu closed the instant it was scrolled, by wheel or by + // dragging its own scrollbar, and the track being reached for could not be + // reached at all. Ask where the scroll came from, not merely that one + // happened. + const onScroll = (e) => { + if (ref.current && e.target instanceof Node && ref.current.contains(e.target)) return; + onClose(); + }; document.addEventListener('keydown', onKey); document.addEventListener('mousedown', onDown); - window.addEventListener('scroll', onClose, true); + window.addEventListener('scroll', onScroll, true); window.addEventListener('resize', onClose); return () => { document.removeEventListener('keydown', onKey); document.removeEventListener('mousedown', onDown); - window.removeEventListener('scroll', onClose, true); + window.removeEventListener('scroll', onScroll, true); window.removeEventListener('resize', onClose); }; }, [onClose]); -- cgit v1.2.3