From 1a3f9507773a43e44748cbe5c0017223b99c3980 Mon Sep 17 00:00:00 2001
From: James Reggio <james.reggio@gmail.com>
Date: Wed, 11 Jul 2018 18:03:25 -0400
Subject: [PATCH] Respect `target` on <a/> tags under Link (#4763)

There are occasions where it is useful to have `target='_blank'` on hyperlinks within your own app. (For example, if your app is being loaded in an iframe and you'd like for the links to break out in to new windows.)

With this PR, the `onClick` logic in Link now checks for an external target on the nested <a/> tag, and will fall back to the default behavior if it's present, similar to the logic for shift-/cmd-clicking the link.
---
 lib/link.js                                      |  5 +++--
 test/integration/basic/pages/nav/index.js        |  1 +
 test/integration/basic/test/client-navigation.js | 12 ++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/lib/link.js b/lib/link.js
index 130a1c58..e4bcd2cd 100644
--- a/lib/link.js
+++ b/lib/link.js
@@ -41,8 +41,9 @@ export default class Link extends Component {
   }
 
   linkClicked (e) {
-    if (e.currentTarget.nodeName === 'A' &&
-      (e.metaKey || e.ctrlKey || e.shiftKey || (e.nativeEvent && e.nativeEvent.which === 2))) {
+    const { nodeName, target } = e.currentTarget
+    if (nodeName === 'A' &&
+      ((target && target !== '_self') || e.metaKey || e.ctrlKey || e.shiftKey || (e.nativeEvent && e.nativeEvent.which === 2))) {
       // ignore click for new tab / new window behavior
       return
     }
diff --git a/test/integration/basic/pages/nav/index.js b/test/integration/basic/pages/nav/index.js
index 07b4578a..e09a2e86 100644
--- a/test/integration/basic/pages/nav/index.js
+++ b/test/integration/basic/pages/nav/index.js
@@ -39,6 +39,7 @@ export default class extends Component {
         <Link href='/nav/as-path'><a id='as-path-link-no-as' style={linkStyle}>As Path (No as)</a></Link>
         <Link href='/nav/as-path-using-router'><a id='as-path-using-router-link' style={linkStyle}>As Path (Using Router)</a></Link>
         <Link href='/nav/on-click'><a id='on-click-link' style={linkStyle}>A element with onClick</a></Link>
+        <Link href='/nav/about'><a id='target-link' target='_blank'>A element with target</a></Link>
         <button
           onClick={() => this.visitQueryStringPage()}
           style={linkStyle}
diff --git a/test/integration/basic/test/client-navigation.js b/test/integration/basic/test/client-navigation.js
index 474355b7..e71e9c33 100644
--- a/test/integration/basic/test/client-navigation.js
+++ b/test/integration/basic/test/client-navigation.js
@@ -58,6 +58,18 @@ export default (context, render) => {
         expect(text).toBe('This is the home.')
         browser.close()
       })
+
+      it('should not navigate if the <a/> tag has a target', async () => {
+        const browser = await webdriver(context.appPort, '/nav')
+
+        const counterText = await browser
+          .elementByCss('#increase').click()
+          .elementByCss('#target-link').click()
+          .elementByCss('#counter').text()
+
+        expect(counterText).toBe('Counter: 1')
+        browser.close()
+      })
     })
 
     describe('with unexpected <a/> nested tag', () => {