From 70a4e090f7353cc2851e0238b9d2389371ecbf8e Mon Sep 17 00:00:00 2001
From: grafakus <marc.mignonsin@grafana.com>
Date: Mon, 15 Dec 2025 13:09:57 +0100
Subject: [PATCH] DynamicDashboards: Fix to enable the selection of options for
 variables in the controls menu

---
 .../DashboardControlsMenu.tsx                 | 22 +++----------------
 .../DashboardControlsMenuButton.tsx           |  8 +++----
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenu.tsx b/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenu.tsx
index edec4d05659..ab22606f2ca 100644
--- a/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenu.tsx
+++ b/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenu.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { SceneDataLayerProvider, SceneVariable } from '@grafana/scenes';
 import { DashboardLink } from '@grafana/schema';
-import { Box, Menu, useStyles2 } from '@grafana/ui';
+import { Menu, useStyles2 } from '@grafana/ui';
 
 import { DashboardLinkRenderer } from '../DashboardLinkRenderer';
 import { DataLayerControl } from '../DataLayerControl';
@@ -18,23 +18,7 @@ interface DashboardControlsMenuProps {
 
 export function DashboardControlsMenu({ variables, links, annotations, dashboardUID }: DashboardControlsMenuProps) {
   return (
-    <Box
-      minWidth={32}
-      borderColor={'weak'}
-      borderStyle={'solid'}
-      boxShadow={'z3'}
-      display={'flex'}
-      direction={'column'}
-      borderRadius={'default'}
-      backgroundColor={'primary'}
-      padding={1}
-      gap={0.5}
-      onClick={(e) => {
-        // Normally, clicking the overlay closes the dropdown.
-        // We stop event propagation here to keep it open while users interact with variable controls.
-        e.stopPropagation();
-      }}
-    >
+    <>
       {/* Variables */}
       {variables.map((variable, index) => (
         <div key={variable.state.key}>
@@ -61,7 +45,7 @@ export function DashboardControlsMenu({ variables, links, annotations, dashboard
           ))}
         </>
       )}
-    </Box>
+    </>
   );
 }
 
diff --git a/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx b/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx
index 898eb471373..4697a0f24c5 100644
--- a/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx
+++ b/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Dropdown, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Toggletip, ToolbarButton, useStyles2 } from '@grafana/ui';
 
 import { DashboardScene } from '../DashboardScene';
 
@@ -24,9 +24,9 @@ export function DashboardControlsButton({ dashboard }: { dashboard: DashboardSce
   }
 
   return (
-    <Dropdown
+    <Toggletip
       placement="bottom-start"
-      overlay={
+      content={
         <DashboardControlsMenu variables={variables} links={links} annotations={annotations} dashboardUID={uid} />
       }
     >
@@ -40,7 +40,7 @@ export function DashboardControlsButton({ dashboard }: { dashboard: DashboardSce
       >
         + {dashboardControlsCount}
       </ToolbarButton>
-    </Dropdown>
+    </Toggletip>
   );
 }