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]);