@stevederico/skateboard-ui 4.9.0 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+4.10.0
+
+  Fix dropdown menu item clicks
+  Register portaled layer after attach
+
 4.9.0
 
   Replace duration with transition-none

package/dist/ui/dropdown-menu.js

@@ -84,12 +84,31 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
     const { onTypeaheadKeyDown } = useTypeahead();
     const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the menu fails the contains() check and
+        // is treated as an outside click — closing the menu before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
         };
     }, [mounted, layers]);
     // Focus the first item once the popup is actually visible — a
@@ -294,12 +313,31 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
     const { onTypeaheadKeyDown } = useTypeahead();
     const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the menu fails the contains() check and
+        // is treated as an outside click — closing the menu before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
         };
     }, [mounted, layers]);
     const didFocus = React.useRef(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "4.9.0",
+  "version": "4.10.0",
   "type": "module",
   "exports": {
     ".": {