From bfc6e07140e504a11e8839ebe046077882125511 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 1 Apr 2025 16:46:21 +0200
Subject: [PATCH] PanelChrome: Click inside also selects panel (#103168)

---
 .../src/components/PanelChrome/PanelChrome.tsx     | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 342e2eeb638..d3d805958d2 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -230,6 +230,19 @@ export function PanelChrome({
     [onDragStart]
   );
 
+  const onContentPointerDown = React.useCallback(
+    (evt: React.PointerEvent) => {
+      // Ignore clicks inside buttons, links, canvas and svg elments
+      // This does prevent a clicks inside a graphs from selecting panel as there is normal div above the canvas element that intercepts the click
+      if (evt.target instanceof Element && evt.target.closest('button,a,canvas,svg')) {
+        return;
+      }
+
+      onSelect?.(evt);
+    },
+    [onSelect]
+  );
+
   const headerContent = (
     <>
       {/* Non collapsible title */}
@@ -386,6 +399,7 @@ export function PanelChrome({
           data-testid={selectors.components.Panels.Panel.content}
           className={cx(styles.content, height === undefined && styles.containNone)}
           style={contentStyle}
+          onPointerDown={onContentPointerDown}
         >
           {typeof children === 'function' ? children(innerWidth, innerHeight) : children}
         </div>