terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Respect target on <a/> tags under Link (#4763)

Browse source 
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.
This commit is contained in:
James Reggio 2018-07-11 18:03:25 -04:00 committed by Tim Neutkens
parent 4cc691c0b8
commit 1a3f950777
3 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/link.js
View file

@ -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
}

1
test/integration/basic/pages/nav/index.js
View file

@ -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}

12
test/integration/basic/test/client-navigation.js
View file

@ -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', () => {