@lolyjs/core 0.1.0-alpha.3 → 0.1.0-alpha.4

package/dist/index.js

@@ -5094,7 +5094,7 @@ function applyMetadata(md) {
 }
 
 // modules/runtime/client/AppShell.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 
 // modules/runtime/client/RouterView.tsx
 import { jsx } from "react/jsx-runtime";
@@ -5457,14 +5457,19 @@ async function navigate(nextUrl, handlers, options) {
 }
 function createClickHandler(navigate2) {
   return function handleClick(ev) {
+    const path25 = ev.composedPath();
+    for (const element of path25) {
+      if (!(element instanceof HTMLElement)) continue;
+      const tagName = element.tagName.toLowerCase();
+      if (tagName === "input" || tagName === "textarea" || tagName === "button" || tagName === "select" || element.isContentEditable || tagName === "label" && element.control) {
+        return;
+      }
+    }
+    const target = ev.target;
+    if (!target) return;
     if (ev.defaultPrevented) return;
     if (ev.button !== 0) return;
     if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
-    const target = ev.target;
-    if (!target) return;
-    const tagName = target.tagName.toLowerCase();
-    const isInteractiveElement = tagName === "input" || tagName === "textarea" || tagName === "button" || tagName === "select" || target.isContentEditable || target.closest("input, textarea, button, select, [contenteditable]");
-    if (isInteractiveElement) return;
     const anchor = target.closest("a[href]");
     if (!anchor) return;
     const href = anchor.getAttribute("href");
@@ -5498,25 +5503,33 @@ function AppShell({
   errorRoute
 }) {
   const [state, setState] = useState(initialState);
+  const handlersRef = useRef({
+    setState,
+    routes,
+    notFoundRoute,
+    errorRoute
+  });
   useEffect(() => {
-    const handlers = {
+    handlersRef.current = {
       setState,
       routes,
       notFoundRoute,
       errorRoute
     };
+  }, [routes, notFoundRoute, errorRoute]);
+  useEffect(() => {
     async function handleNavigate(nextUrl, options) {
-      await navigate(nextUrl, handlers, options);
+      await navigate(nextUrl, handlersRef.current, options);
     }
     const handleClick = createClickHandler(handleNavigate);
     const handlePopState = createPopStateHandler(handleNavigate);
-    window.addEventListener("click", handleClick);
-    window.addEventListener("popstate", handlePopState);
+    window.addEventListener("click", handleClick, { capture: false });
+    window.addEventListener("popstate", handlePopState, { capture: false });
     return () => {
-      window.removeEventListener("click", handleClick);
-      window.removeEventListener("popstate", handlePopState);
+      window.removeEventListener("click", handleClick, { capture: false });
+      window.removeEventListener("popstate", handlePopState, { capture: false });
     };
-  }, [routes, notFoundRoute, errorRoute]);
+  }, []);
   const isError = state.route === errorRoute;
   const isNotFound = state.route === notFoundRoute;
   const routeType = isError ? "error" : isNotFound ? "notfound" : "normal";