aboutsummaryrefslogtreecommitdiffstats
path: root/packages/meshbay-hub/src
diff options
context:
space:
mode:
authorChristophe Besson <cbesson@gmail.com>2026-09-16 16:26:16 +0200
committerChristophe Besson <cbesson@gmail.com>2026-09-16 16:26:16 +0200
commit17ddd4de9087a98c87bec28a6b773572b1c58b50 (patch)
tree8ea8ee7cb57ecd8b0b428b089395c449621c102b /packages/meshbay-hub/src
parent2916aa376009283305a7acec4aafa3c96544499e (diff)
downloadmeshbay-17ddd4de9087a98c87bec28a6b773572b1c58b50.tar.gz
menu: do not close on the panel's own scrolling
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 <noreply@anthropic.com>
Diffstat (limited to 'packages/meshbay-hub/src')
-rw-r--r--packages/meshbay-hub/src/meshbay_hub/static/menu.js17
1 files changed, 15 insertions, 2 deletions
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]);