From 6a2b0dde6314133835e7232f3a61c6818b9dbb8d Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Mon, 18 Jan 2021 12:07:48 +0100
Subject: [PATCH] Grafana-ui: Fix context menu item always using onClick
 instead of href (#30350)

---
 .../grafana-ui/src/components/Menu/Menu.tsx   | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx
index 52c47b912e8..5129b8dab24 100644
--- a/packages/grafana-ui/src/components/Menu/Menu.tsx
+++ b/packages/grafana-ui/src/components/Menu/Menu.tsx
@@ -84,7 +84,14 @@ const MenuGroup: React.FC<MenuGroupProps> = ({ group, onClick }) => {
               target={item.target}
               icon={item.icon}
               onClick={(e: React.MouseEvent<HTMLElement>) => {
+                // We can have both url and onClick and we want to allow user to open the link in new tab/window
+                const isSpecialKeyPressed = e.ctrlKey || e.metaKey || e.shiftKey;
+                if (isSpecialKeyPressed && item.url) {
+                  return;
+                }
+
                 if (item.onClick) {
+                  e.preventDefault();
                   item.onClick(e);
                 }
 
@@ -115,23 +122,7 @@ const MenuItemComponent: React.FC<MenuItemProps> = React.memo(({ url, icon, labe
   const styles = useStyles(getMenuStyles);
   return (
     <div className={styles.item}>
-      <a
-        href={url ? url : undefined}
-        target={target}
-        className={cx(className, styles.link)}
-        onClick={e => {
-          // We can have both url and onClick and we want to allow user to open the link in new tab/window
-          const isSpecialKeyPressed = e.ctrlKey || e.metaKey || e.shiftKey;
-          if (isSpecialKeyPressed && url) {
-            return;
-          }
-
-          if (onClick) {
-            e.preventDefault();
-            onClick(e);
-          }
-        }}
-      >
+      <a href={url ? url : undefined} target={target} className={cx(className, styles.link)} onClick={onClick}>
         {icon && <Icon name={icon} className={styles.icon} />} {label}
       </a>
     </div>