From 5011b259c700adcbe9dc55e0946c1d0e2eba4d28 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 29 Nov 2022 11:13:21 +0000
Subject: [PATCH] Chore: ignore eslint rules in `Dropdown`/`TopNavBarMenu`
 (#59385)

ignore eslint rules in dropdown/topnavbarmenu
---
 packages/grafana-ui/src/components/Dropdown/Dropdown.tsx     | 5 +++++
 .../app/core/components/AppChrome/TopBar/TopNavBarMenu.tsx   | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
index 93f91724e2a..bd96418eb51 100644
--- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
@@ -44,6 +44,11 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
       {visible && (
         <Portal>
           <FocusScope autoFocus>
+            {/*
+              this is handling bubbled events from the inner overlay
+              see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events
+            */}
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
             <div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked}>
               <div {...getArrowProps({ className: 'tooltip-arrow' })} />
               <CSSTransition
diff --git a/public/app/core/components/AppChrome/TopBar/TopNavBarMenu.tsx b/public/app/core/components/AppChrome/TopBar/TopNavBarMenu.tsx
index a740f5afc60..605e196f7ec 100644
--- a/public/app/core/components/AppChrome/TopBar/TopNavBarMenu.tsx
+++ b/public/app/core/components/AppChrome/TopBar/TopNavBarMenu.tsx
@@ -26,6 +26,9 @@ export function TopNavBarMenu({ node: nodePlain }: TopNavBarMenuProps) {
   return (
     <Menu
       header={
+        // this is needed to prevent bubbling the event to `Menu` and then closing when highlighting header text
+        // see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div onClick={(e) => e.stopPropagation()} className={styles.header}>
           <div>{getNavTitle(node.id) ?? node.text}</div>
           {node.subTitle && <div className={styles.subTitle}>{node.subTitle}</div>}