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

package/dist/index.cjs

@@ -5499,14 +5499,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");
@@ -5540,25 +5545,33 @@ function AppShell({
   errorRoute
 }) {
   const [state, setState] = (0, import_react2.useState)(initialState);
+  const handlersRef = (0, import_react2.useRef)({
+    setState,
+    routes,
+    notFoundRoute,
+    errorRoute
+  });
   (0, import_react2.useEffect)(() => {
-    const handlers = {
+    handlersRef.current = {
       setState,
       routes,
       notFoundRoute,
       errorRoute
     };
+  }, [routes, notFoundRoute, errorRoute]);
+  (0, import_react2.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";