Merge pull request #2 from phlex-ruby/handle-anchor-wrappers

Handle clicks that occur inside an <a> tag
phlex-ruby · Mar 6, 2024 · eeb4b40 · eeb4b40
2 parents 10a79d2 + 9007f53
commit eeb4b40
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 44 deletions.
diff --git a/dist/phlex.js b/dist/phlex.js
diff --git a/src/phlex.ts b/src/phlex.ts
@@ -17,31 +17,34 @@ export function init(): void {
 	// });
 
 	document.addEventListener("click", (event) => {
-		const link = event.target;
-
-		if (link instanceof HTMLAnchorElement) {
-			if (event.metaKey || event.ctrlKey || event.shiftKey) return;
-
-			if (link.ariaDisabled) {
-				event.preventDefault();
-				return;
-			}
-
-			const href = link.href;
-			const action = link.getAttribute("phlex-action");
-			const targetId = link.getAttribute("phlex-target");
-			const fragment = link.getAttribute("phlex-fragment");
-
-			if (action) {
-				event.preventDefault();
-				link.ariaDisabled = "true";
-
-				createEvent(href, targetId, fragment).then((event) => {
-					const actionMethod = Actions.get(action);
-					if (actionMethod) actionMethod(event);
-
-					link.ariaDisabled = null;
-				});
+		const targetElement = event.target;
+		if (targetElement instanceof Element) {
+			const link = targetElement.closest("a");
+
+			if (link instanceof HTMLAnchorElement) {
+				if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+
+				if (link.ariaDisabled) {
+					event.preventDefault();
+					return;
+				}
+
+				const href = link.href;
+				const action = link.getAttribute("phlex-action");
+				const targetId = link.getAttribute("phlex-target");
+				const fragment = link.getAttribute("phlex-fragment");
+
+				if (action) {
+					event.preventDefault();
+					link.ariaDisabled = "true";
+
+					createEvent(href, targetId, fragment).then((event) => {
+						const actionMethod = Actions.get(action);
+						if (actionMethod) actionMethod(event);
+
+						link.ariaDisabled = null;
+					});
+				}
 			}
 		}
 	});