From 014d4758c68a091de9ce4e553c46933e4d057163 Mon Sep 17 00:00:00 2001
From: Kristina Demeshchik <kristina.demeshchik@gmail.com>
Date: Tue, 30 Dec 2025 14:27:38 -0500
Subject: [PATCH] Dashboards: Prevent row selection when clicking canvas add
 actions (#115580)

* event propogation issues

* Action items width

* prevent pointer up event
---
 .../grafana-ui/src/components/PanelChrome/PanelChrome.tsx | 8 +++++---
 .../scene/layouts-shared/CanvasGridAddActions.tsx         | 7 +++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 8eace0b38b8..f969bbcf3f0 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -248,15 +248,17 @@ export function PanelChrome({
 
   const onContentPointerDown = React.useCallback(
     (evt: React.PointerEvent) => {
-      // Ignore clicks inside buttons, links, canvas and svg elments
+      // When selected, 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')) {
+      if (isSelected && evt.target instanceof Element && evt.target.closest('button,a,canvas,svg')) {
+        // Stop propagation otherwise row config editor will get selected
+        evt.stopPropagation();
         return;
       }
 
       onSelect?.(evt);
     },
-    [onSelect]
+    [isSelected, onSelect]
   );
 
   const headerContent = (
diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx b/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
index dd5c4ac20b6..9f75b5b7be4 100644
--- a/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
+++ b/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
@@ -59,7 +59,11 @@ export function CanvasGridAddActions({ layoutManager }: Props) {
   }, [layoutManager]);
 
   return (
-    <div className={cx(styles.addAction, 'dashboard-canvas-add-button')}>
+    <div
+      className={cx(styles.addAction, 'dashboard-canvas-add-button')}
+      onPointerUp={(evt) => evt.stopPropagation()}
+      onPointerDown={(evt) => evt.stopPropagation()}
+    >
       <Button
         variant="primary"
         fill="text"
@@ -189,7 +193,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     height: theme.spacing(5),
     bottom: 0,
     left: 0,
-    right: 0,
     opacity: 0,
     [theme.transitions.handleMotion('no-preference', 'reduce')]: {
       transition: theme.transitions.create('opacity'),