From b42c34070a08bc38e15f0a211a75454ba571f6a0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 31 Oct 2024 14:48:01 +0000
Subject: [PATCH] SingleTopNav: Fix org switcher in overlayed MegaMenu (#95654)

fix org switcher in singleTopNav
---
 .../grafana-e2e-selectors/src/selectors/components.ts     | 3 +++
 packages/grafana-ui/src/components/Select/SelectMenu.tsx  | 8 +++++++-
 public/app/core/components/AppChrome/AppChromeMenu.tsx    | 8 +++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 5e2a934ecda..7f49d18d493 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -882,6 +882,9 @@ export const versionedComponents = {
     },
   },
   Select: {
+    menu: {
+      '11.4.0': 'data-testid Select menu',
+    },
     option: {
       '11.1.0': 'data-testid Select option',
       [MIN_GRAFANA_VERSION]: 'Select option',
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 7a0e854126f..447c5aabe03 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -47,7 +47,13 @@ export const SelectMenu = ({
   const optionsElement = components?.Option ?? SelectMenuOptions;
 
   return (
-    <div {...innerProps} className={styles.menu} style={{ maxHeight }} aria-label="Select options menu">
+    <div
+      {...innerProps}
+      data-testid={selectors.components.Select.menu}
+      className={styles.menu}
+      style={{ maxHeight }}
+      aria-label="Select options menu"
+    >
       <CustomScrollbar scrollRefCallback={innerRef} autoHide={false} autoHeightMax="inherit" hideHorizontalTrack>
         {toggleAllOptions && (
           <ToggleAllOption
diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx
index e649fdb12b1..2118f967f83 100644
--- a/public/app/core/components/AppChrome/AppChromeMenu.tsx
+++ b/public/app/core/components/AppChrome/AppChromeMenu.tsx
@@ -6,6 +6,7 @@ import { useRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
@@ -40,7 +41,12 @@ export function AppChromeMenu({}: Props) {
         // don't close when clicking on the menu toggle, let the toggle button handle that
         // this prevents some nasty flickering when the menu is open and the toggle button is clicked
         const isMenuToggle = document.getElementById(TOGGLE_BUTTON_ID)?.contains(element);
-        return !isMenuToggle;
+        // don't close when interacting with a select menu inside the mega menu
+        // e.g. for the org switcher
+        const isSelectMenu = document
+          .querySelector(`[data-testid=${selectors.components.Select.menu}]`)
+          ?.contains(element);
+        return !isMenuToggle && !isSelectMenu;
       },
     },
     ref