From c03bf7d8ad8d046abdfe266c4e2871624c0f1411 Mon Sep 17 00:00:00 2001
From: Alexa V <239999+axelavargas@users.noreply.github.com>
Date: Fri, 31 Mar 2023 16:35:34 +0200
Subject: [PATCH] New Panel Header: Fix when clicking submenu item the parent
 menu item onClick get's triggered (#65691)

---
 .betterer.results                                      |  2 +-
 .../dashgrid/PanelHeader/PanelHeaderMenuItem.tsx       |  2 +-
 public/app/features/dashboard/utils/getPanelMenu.ts    | 10 +++++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index d91d8349bbe..2ef9780c95a 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2658,7 +2658,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "15"]
+      [0, 0, 0, "Do not use any type assertions.", "15"]
     ],
     "public/app/features/dashboard/utils/panelMerge.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
index 279aef64f50..12d589bb68c 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -25,7 +25,7 @@ export const PanelHeaderMenuItem = (props: Props & PanelMenuItem) => {
       ref={setRef}
       data-testid={selectors.components.Panels.Panel.menuItems(props.text)}
     >
-      <a onClick={props.onClick} href={props.href}>
+      <a onClick={props.onClick} href={props.href} role="menuitem">
         {icon && <Icon name={icon} className={styles.menuIconClassName} />}
         <span className="dropdown-item-text" aria-label={selectors.components.Panels.Panel.headerItems(props.text)}>
           {props.text}
diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts
index d2bbaee17d2..c808182b1f9 100644
--- a/public/app/features/dashboard/utils/getPanelMenu.ts
+++ b/public/app/features/dashboard/utils/getPanelMenu.ts
@@ -180,7 +180,15 @@ export function getPanelMenu(
     type: 'submenu',
     text: t('panel.header-menu.inspect', `Inspect`),
     iconClassName: 'info-circle',
-    onClick: (e: React.MouseEvent<any>) => onInspectPanel(),
+    onClick: (e: React.MouseEvent<HTMLElement>) => {
+      const currentTarget = e.currentTarget;
+      const target = e.target as HTMLElement;
+      const closestMenuItem = target.closest('[role="menuitem"]');
+
+      if (target === currentTarget || closestMenuItem === currentTarget) {
+        onInspectPanel();
+      }
+    },
     shortcut: 'i',
     subMenu: inspectMenu,
   });