diff --git a/CHANGELOG.md b/CHANGELOG.md index 98c7aa4d1..13195ebe4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). - [#766](https://github.com/plotly/dash-core-components/pull/766) Update from React 16.8.6 to 16.13.0 - [#768](https://github.com/plotly/dash-core-components/pull/768) Added title property to dcc.Link - [#776](https://github.com/plotly/dash-core-components/pull/776) Update dcc.Link to set href as children if children not defined. Makes href a required prop as well. +- [#767](https://github.com/plotly/dash-core-components/pull/767) Updated dcc.Link to respond to click modifiers, and added a target prop. ## [1.8.1] -2020-02-27 ### Added diff --git a/src/components/Link.react.js b/src/components/Link.react.js index 7a87e8eae..72fe2f1c2 100644 --- a/src/components/Link.react.js +++ b/src/components/Link.react.js @@ -42,9 +42,17 @@ export default class Link extends Component { } updateLocation(e) { + const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey; + const {href, refresh, target} = this.props; + + if (hasModifiers) { + return; + } + if (target !== '_self' && !isNil(target)) { + return; + } // prevent anchor from updating location e.preventDefault(); - const {href, refresh} = this.props; if (refresh) { window.location.pathname = href; } else { @@ -64,6 +72,7 @@ export default class Link extends Component { loading_state, children, title, + target, } = this.props; /* * ideally, we would use cloneElement however @@ -81,6 +90,7 @@ export default class Link extends Component { href={href} onClick={e => this.updateLocation(e)} title={title} + target={target} > {isNil(children) ? href : children} @@ -116,6 +126,10 @@ Link.propTypes = { * information. */ title: PropTypes.string, + /** + * Specifies where to open the link reference. + */ + target: PropTypes.string, /** * The children of this component */