Added click modifiers, target prop

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.
 
 ## [1.8.1] -2020-02-27
 ### Added

src/components/Link.react.js

@@ -42,6 +42,11 @@ export default class Link extends Component {
     }
 
     updateLocation(e) {
+        const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
+
+        if (hasModifiers || e.button !== 1) {
+            return;
+        }
         // prevent anchor from updating location
         e.preventDefault();
         const {href, refresh} = this.props;
@@ -64,6 +69,7 @@ export default class Link extends Component {
             loading_state,
             children,
             title,
+            external,
         } = this.props;
         /*
          * ideally, we would use cloneElement however
@@ -81,6 +87,7 @@ export default class Link extends Component {
                 href={href}
                 onClick={e => this.updateLocation(e)}
                 title={title}
+                target={external ? '_blank' : '_self'}
             >
                 {isNil(children) ? href : children}
             </a>
@@ -116,6 +123,10 @@ Link.propTypes = {
      * information.
      */
     title: PropTypes.string,
+    /**
+     * Opens the link in a new tab.
+     */
+    external: PropTypes.bool,
     /**
      * The children of this component
      */
@@ -141,4 +152,5 @@ Link.propTypes = {
 
 Link.defaultProps = {
     refresh: false,
+    external: false,
 };