[v10.0.x] ToolbarButtonRow: prevent closure of overflow menu when interacting with portal elements (#68457)

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

(cherry picked from commit 5d91ace745)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

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
     );