remove event.stopPropagation(), so that when one menu opens, all others close; (#51557)

Put the ClickOutsideWrapper further out in the PanelHeader, so it doesn't catch itself when clicking on the panel header above the menu;

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 
 import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2, ClickOutsideWrapper } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { getPanelLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
@@ -48,34 +48,33 @@ export const PanelHeader: FC<Props> = ({ panel, error, isViewing, isEditing, dat
         <PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)}>
           {({ closeMenu, panelMenuOpen }) => {
             return (
-              <div className="panel-title">
-                <PanelHeaderNotices frames={data.series} panelId={panel.id} />
-                {alertState ? (
-                  <Icon
-                    name={alertState === 'alerting' ? 'heart-break' : 'heart'}
-                    className="icon-gf panel-alert-icon"
-                    style={{ marginRight: '4px' }}
-                    size="sm"
-                  />
-                ) : null}
-                <h2 className={styles.titleText}>{title}</h2>
-                {!dashboard.meta.publicDashboardAccessToken && (
-                  <div data-testid="panel-dropdown">
-                    <Icon name="angle-down" className="panel-menu-toggle" />
-                    <PanelHeaderMenuWrapper
-                      panel={panel}
-                      dashboard={dashboard}
-                      show={panelMenuOpen}
-                      onClose={closeMenu}
+              <ClickOutsideWrapper onClick={closeMenu} parent={document}>
+                <div className="panel-title">
+                  <PanelHeaderNotices frames={data.series} panelId={panel.id} />
+                  {alertState ? (
+                    <Icon
+                      name={alertState === 'alerting' ? 'heart-break' : 'heart'}
+                      className="icon-gf panel-alert-icon"
+                      style={{ marginRight: '4px' }}
+                      size="sm"
                     />
-                  </div>
-                )}
-                {data.request && data.request.timeInfo && (
-                  <span className="panel-time-info">
-                    <Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
-                  </span>
-                )}
-              </div>
+                  ) : null}
+                  <h2 className={styles.titleText}>{title}</h2>
+                  {!dashboard.meta.publicDashboardAccessToken && (
+                    <div data-testid="panel-dropdown">
+                      <Icon name="angle-down" className="panel-menu-toggle" />
+                      {panelMenuOpen ? (
+                        <PanelHeaderMenuWrapper panel={panel} dashboard={dashboard} onClose={closeMenu} />
+                      ) : null}
+                    </div>
+                  )}
+                  {data.request && data.request.timeInfo && (
+                    <span className="panel-time-info">
+                      <Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
+                    </span>
+                  )}
+                </div>
+              </ClickOutsideWrapper>
             );
           }}
         </PanelHeaderMenuTrigger>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx

@@ -14,18 +14,18 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 export const PanelHeaderMenuTrigger: FC<Props> = ({ children, ...divProps }) => {
   const [clickCoordinates, setClickCoordinates] = useState<CartesianCoords2D>({ x: 0, y: 0 });
   const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
+
   const onMenuToggle = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
       if (!isClick(clickCoordinates, eventToClickCoordinates(event))) {
         return;
       }
 
-      event.stopPropagation();
-
       setPanelMenuOpen(!panelMenuOpen);
     },
     [clickCoordinates, panelMenuOpen, setPanelMenuOpen]
   );
+
   const onMouseDown = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
       setClickCoordinates(eventToClickCoordinates(event));

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuWrapper.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from 'react';
 
-import { ClickOutsideWrapper } from '@grafana/ui';
-
 import { DashboardModel, PanelModel } from '../../state';
 
 import { PanelHeaderMenu } from './PanelHeaderMenu';
@@ -10,22 +8,15 @@ import { PanelHeaderMenuProvider } from './PanelHeaderMenuProvider';
 interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
-  show: boolean;
   onClose: () => void;
 }
 
-export const PanelHeaderMenuWrapper: FC<Props> = ({ show, onClose, panel, dashboard }) => {
-  if (!show) {
-    return null;
-  }
-
+export const PanelHeaderMenuWrapper: FC<Props> = ({ panel, dashboard }) => {
   return (
-    <ClickOutsideWrapper onClick={onClose} parent={document}>
-      <PanelHeaderMenuProvider panel={panel} dashboard={dashboard}>
-        {({ items }) => {
-          return <PanelHeaderMenu items={items} />;
-        }}
-      </PanelHeaderMenuProvider>
-    </ClickOutsideWrapper>
+    <PanelHeaderMenuProvider panel={panel} dashboard={dashboard}>
+      {({ items }) => {
+        return <PanelHeaderMenu items={items} />;
+      }}
+    </PanelHeaderMenuProvider>
   );
 };