@dloizides/ui-nav 1.13.0 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.13.1
+
+- **Fix (mobile drawer: a sub-item / leaf tap dismissed the drawer WITHOUT navigating).**
+  On a phone-width viewport, tapping a leaf inside the open `MobileDrawer` closed the drawer
+  but the route never changed — verified live on finreg via Playwright (real Chromium, real
+  pointer events); every jsdom unit test stayed green because it wired `onClose` to an inert
+  `jest.fn()` that never unmounts anything.
+  - **Root cause.** `MobileDrawer` closes on a nav press via a NATIVE
+    `panel.addEventListener('click', …)`. react-native-web fires a leaf's `onPress` from its
+    `onClick`, dispatched through REACT's synthetic event system whose root listener sits on the
+    app-root container — an ANCESTOR of the panel. So on a real click the native panel listener
+    runs FIRST (during the DOM bubble), and closing synchronously there ran `setDrawerOpen(false)`,
+    unmounting the panel and tearing the leaf out of the tree BEFORE React could dispatch its
+    `onPress`. The navigation call never ran.
+  - **Fix.** The drawer's close is now DEFERRED to the next macrotask (`setTimeout(…, 0)`), so
+    React finishes dispatching the tapped leaf's `onPress` (the navigation) for the current click;
+    the panel then unmounts on the following tick, after the route has already changed. Scrim tap
+    and group-header toggle are unchanged.
+  - **No API change.** All 7 portals get the fix on their next bump.
+
 ## 1.11.0
 
 - **Feature (an expandable nav group now auto-opens when the current route is inside it).**

package/dist/index.js

@@ -1054,6 +1054,10 @@ var SCRIM_Z_INDEX = 1;
 var PANEL_Z_INDEX = 2;
 var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
 var NAV_TOGGLE_SELECTOR = "[aria-expanded]";
+function deferClose(close) {
+  if (typeof setTimeout === "function") setTimeout(close, 0);
+  else close();
+}
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
   openHint: "Open the navigation menu",
@@ -1119,7 +1123,7 @@ var MobileDrawer = ({
       if (target === null) return;
       const activatable = target.closest(NAV_ACTIVATABLE_SELECTOR);
       const isToggle = activatable !== null && activatable.closest(NAV_TOGGLE_SELECTOR) !== null;
-      if (activatable !== null && !isToggle) onClose();
+      if (activatable !== null && !isToggle) deferClose(onClose);
     };
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);