IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

SingleTopNav: Fix org switcher in overlayed MegaMenu (#95654)

Browse Source 
fix org switcher in singleTopNav
This commit is contained in:
Ashley Harrison 2024-10-31 14:48:01 +00:00 committed by GitHub
parent d77fc50198
commit b42c34070a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -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',

8
packages/grafana-ui/src/components/Select/SelectMenu.tsx
View File

@ -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

8
public/app/core/components/AppChrome/AppChromeMenu.tsx
View File

@ -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