From 5ebe36b39f2f57a94740e8c625ec6d038d8d365e Mon Sep 17 00:00:00 2001
From: Oleg Apostol <truerenton@gmail.com>
Date: Mon, 23 Sep 2019 23:51:13 +0300
Subject: [PATCH] feat: preventBubbling is optional

---
 README.md      | 4 +++-
 src/index.d.ts | 3 ++-
 src/index.js   | 8 +++++---
 src/match.d.ts | 3 ++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d296b197..97ae0a29 100644
--- a/README.md
+++ b/README.md
@@ -119,6 +119,8 @@ render(
 
 `<Link>` is just a normal link, but it automatically adds and removes an "active" classname to itself based on whether it matches the current URL.
 
+By default Link allow bubbling event on click, but you can control it by prop `preventBubbling`.
+
 ```js
 import { Router } from 'preact-router';
 import { Link } from 'preact-router/match';
@@ -128,7 +130,7 @@ render(
     <nav>
       <Link activeClassName="active" href="/">Home</Link>
       <Link activeClassName="active" href="/foo">Foo</Link>
-      <Link activeClassName="active" href="/bar">Bar</Link>
+      <Link activeClassName="active" preventBubbling href="/bar">Click event will not bubble</Link>
     </nav>
     <Router>
       <div default>
diff --git a/src/index.d.ts b/src/index.d.ts
index fe648bc9..76d7820d 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,4 +1,5 @@
 import * as preact from 'preact';
+import { LinkProps } from './match.d'
 
 export function route(url: string, replace?: boolean): boolean;
 export function route(options: { url: string; replace?: boolean }): boolean;
@@ -62,7 +63,7 @@ export function Route<Props>(
     props: RouteProps<Props> & Partial<Props>
 ): preact.VNode;
 
-export function Link(props: {activeClassName?: string} & JSX.HTMLAttributes): preact.VNode;
+export function Link(props: LinkProps): preact.VNode;
 
 declare module 'preact' {
     export interface Attributes extends RoutableProps {}
diff --git a/src/index.js b/src/index.js
index a34bd2d3..5f6472d7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -89,10 +89,12 @@ function routeFromLink(node) {
 }
 
 
-function handleLinkClick(e) {
+function handleLinkClick(e, props) {
 	if (e.button==0) {
 		routeFromLink(e.currentTarget || e.target || this);
-		return prevent(e);
+
+		if (props.preventBubbling) return prevent(e);
+		return e;
 	}
 }
 
@@ -249,7 +251,7 @@ class Router extends Component {
 }
 
 const Link = (props) => (
-	createElement('a', assign({ onClick: handleLinkClick }, props))
+	createElement('a', assign({ onClick: e => handleLinkClick(e, props) }, props))
 );
 
 const Route = props => createElement(props.component, props);
diff --git a/src/match.d.ts b/src/match.d.ts
index c0bdbc59..10b9e8e2 100644
--- a/src/match.d.ts
+++ b/src/match.d.ts
@@ -7,7 +7,8 @@ export class Match extends preact.Component<RoutableProps, {}> {
 }
 
 export interface LinkProps extends JSX.HTMLAttributes {
-    activeClassName: string;
+    activeClassName?: string;
+    preventBubbling?: boolean;
 }
 
 export function Link(props: LinkProps): preact.VNode;