From 5d91ace74569bc85b8be678c0d1795f05b4d2ec0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 15 May 2023 13:48:19 +0100
Subject: [PATCH] ToolbarButtonRow: prevent closure of overflow menu when
 interacting with portal elements (#68319)

* don't close the overflow menu when interacting with something in a portal

* keep overflow ref logic
---
 .../src/components/ToolbarButton/ToolbarButtonRow.tsx       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
index 6ef76011688..0fcfce6d7cc 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
@@ -7,6 +7,7 @@ import React, { forwardRef, HTMLAttributes, useState, useRef, useLayoutEffect, c
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useTheme2 } from '../../themes';
+import { getPortalContainer } from '../Portal/Portal';
 
 import { ToolbarButton } from './ToolbarButton';
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -29,7 +30,10 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
         onClose: () => setShowOverflowItems(false),
         isDismissable: true,
         isOpen: showOverflowItems,
-        shouldCloseOnInteractOutside: (element: Element) => !overflowRef.current?.contains(element),
+        shouldCloseOnInteractOutside: (element: Element) => {
+          const portalContainer = getPortalContainer();
+          return !overflowRef.current?.contains(element) && !portalContainer.contains(element);
+        },
       },
       overflowItemsRef
     );