[FIX] router: do not prevent default click on <a> in some cases

src/router/Link.ts

@@ -5,7 +5,7 @@ export const LINK_TEMPLATE_NAME = "__owl__-router-link";
 export const LINK_TEMPLATE = `
     <a  t-att-class="{'router-link-active': isActive }"
         t-att-href="href"
-        t-on-click.prevent="navigate">
+        t-on-click="navigate">
         <t t-slot="default"/>
     </a>`;
 
@@ -26,7 +26,23 @@ export class Link<Env extends RouterEnv> extends Component<Env, Props, {}> {
     return (<any>document.location).pathname === this.href;
   }
 
-  navigate() {
+  navigate(ev) {
+    // don't redirect with control keys
+    if (ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey) {
+      return;
+    }
+    // don't redirect on right click
+    if (ev.button !== undefined && ev.button !== 0) {
+      return;
+    }
+    // don't redirect if `target="_blank"`
+    if (ev.currentTarget && ev.currentTarget.getAttribute) {
+      const target = ev.currentTarget.getAttribute("target");
+      if (/\b_blank\b/i.test(target)) {
+        return;
+      }
+    }
+    ev.preventDefault();
     this.env.router.navigate(this.props);
   }
 }

tests/router/Link.test.ts

@@ -45,11 +45,40 @@ describe("Link component", () => {
     expect(window.location.pathname).toBe("/users");
     fixture.querySelector("a")!.click();
     await nextTick();
+    expect(window.location.pathname).toBe("/about");
     expect(fixture.innerHTML).toBe(
       '<div><a href="/about" class="router-link-active">About</a></div>'
     );
 
-    expect(window.location.pathname).toBe("/about");
     expect(env.qweb.templates[LINK_TEMPLATE_NAME].fn.toString()).toMatchSnapshot();
   });
+
+  test("do not redirect if right clicking", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+            <div t-name="App">
+                <Link to="'about'">About</Link>
+            </div>
+        </templates>
+    `);
+    class App extends Component<any, any, any> {
+      components = { Link: Link };
+    }
+
+    const routes = [{ name: "about", path: "/about" }, { name: "users", path: "/users" }];
+
+    router = new TestRouter(env, routes, { mode: "history" });
+    router.navigate({ to: "users" });
+    const app = new App(env);
+    await app.mount(fixture);
+
+    expect(window.location.pathname).toBe("/users");
+    var evt = new MouseEvent("click", {
+      button: 1
+    });
+
+    fixture.querySelector("a")!.dispatchEvent(evt);
+    await nextTick();
+    expect(window.location.pathname).toBe("/users");
+  });
 });

tests/router/__snapshots__/Link.test.ts.snap

@@ -13,7 +13,7 @@ exports[`Link component can render simple cases 1`] = `
     if (!context['navigate']) {
         throw new Error('Missing handler \\\\'' + 'navigate' + \`\\\\' when evaluating template '__owl__-router-link'\`)
     }
-    extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {e.preventDefault();context['navigate'].call(owner, e);};
+    extra.handlers['click' + 3] = extra.handlers['click' + 3] || context['navigate'].bind(owner);
     p3.on['click'] = extra.handlers['click' + 3];
     const slot4 = this.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot4) {