diff --git a/plugins/woocommerce-admin/packages/components/src/link/index.js b/plugins/woocommerce-admin/packages/components/src/link/index.js
index 918f5136ae2..94b2db82bf8 100644
--- a/plugins/woocommerce-admin/packages/components/src/link/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/link/index.js
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import { partial } from 'lodash';
import { getHistory } from '@woocommerce/navigation';
@@ -10,11 +9,22 @@ import { getHistory } from '@woocommerce/navigation';
* Use `Link` to create a link to another resource. It accepts a type to automatically
* create wp-admin links, wc-admin links, and external links.
*/
-class Link extends Component {
+
+function Link( { children, href, type, ...props } ) {
// @todo Investigate further if we can use directly.
// With React Router 5+, cannot be used outside of the main elements,
// which seems to include components imported from @woocommerce/components. For now, we can use the history object directly.
- wcAdminLinkHandler( onClick, event ) {
+ const wcAdminLinkHandler = ( onClick, event ) => {
+ // If cmd, ctrl, alt, or shift are used, use default behavior to allow opening in a new tab.
+ if (
+ event.ctrlKey ||
+ event.metaKey ||
+ event.altKey ||
+ event.shiftKey
+ ) {
+ return;
+ }
+
event.preventDefault();
// If there is an onclick event, execute it.
@@ -26,29 +36,22 @@ class Link extends Component {
}
getHistory().push( event.target.closest( 'a' ).getAttribute( 'href' ) );
+ };
+
+ const passProps = {
+ ...props,
+ 'data-link-type': type,
+ };
+
+ if ( type === 'wc-admin' ) {
+ passProps.onClick = partial( wcAdminLinkHandler, passProps.onClick );
}
- render() {
- const { children, href, type, ...props } = this.props;
-
- const passProps = {
- ...props,
- 'data-link-type': type,
- };
-
- if ( type === 'wc-admin' ) {
- passProps.onClick = partial(
- this.wcAdminLinkHandler,
- passProps.onClick
- );
- }
-
- return (
-
- { children }
-
- );
- }
+ return (
+
+ { children }
+
+ );
}
Link.propTypes = {