From 1f6f6da4c07928cd51587e5d134b66e218005e99 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 13 Jan 2026 11:07:56 +0000
Subject: [PATCH] ensure portalled elements count as within the
 floatingfocusmanager boundary

---
 packages/grafana-ui/src/components/Drawer/Drawer.tsx       | 3 ++-
 packages/grafana-ui/src/components/Modal/Modal.tsx         | 3 ++-
 packages/grafana-ui/src/components/Toggletip/Toggletip.tsx | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 7d115e3f9d0..678b71adb25 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -12,6 +12,7 @@ import { useStyles2 } from '../../themes/ThemeContext';
 import { getDragStyles } from '../DragHandle/DragHandle';
 import { IconButton } from '../IconButton/IconButton';
 import { Stack } from '../Layout/Stack/Stack';
+import { getPortalContainer } from '../Portal/Portal';
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
 import { Text } from '../Text/Text';
 
@@ -128,7 +129,7 @@ export function Drawer({
         motionName: styles.maskMotion,
       }}
     >
-      <FloatingFocusManager context={context} modal>
+      <FloatingFocusManager context={context} modal getInsideElements={() => [getPortalContainer()]}>
         <div className={styles.container} ref={refs.setFloating}>
           {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
           <div
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index f6ea73c3d31..070e96350fa 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -9,6 +9,7 @@ import { useStyles2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types/icon';
 import { IconButton } from '../IconButton/IconButton';
 import { Stack } from '../Layout/Stack/Stack';
+import { getPortalContainer } from '../Portal/Portal';
 
 import { ModalHeader } from './ModalHeader';
 import { getModalStyles } from './getModalStyles';
@@ -98,7 +99,7 @@ export function Modal(props: PropsWithChildren<Props>) {
         className={styles.modalBackdrop}
         onClick={onClickBackdrop || (closeOnBackdropClick ? onDismiss : undefined)}
       />
-      <FloatingFocusManager context={context} modal={trapFocus}>
+      <FloatingFocusManager context={context} modal={trapFocus} getInsideElements={() => [getPortalContainer()]}>
         <div
           className={cx(styles.modal, className)}
           ref={refs.setFloating}
diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
index 002f15ec04b..0b36236cb88 100644
--- a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
+++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
@@ -20,7 +20,7 @@ import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { getPositioningMiddleware } from '../../utils/floating';
 import { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';
 import { IconButton } from '../IconButton/IconButton';
-import { Portal } from '../Portal/Portal';
+import { getPortalContainer, Portal } from '../Portal/Portal';
 
 import { ToggletipContent } from './types';
 
@@ -120,7 +120,7 @@ export const Toggletip = memo(
         })}
         {isOpen && (
           <Portal>
-            <FloatingFocusManager context={context} modal={true}>
+            <FloatingFocusManager context={context} modal={true} getInsideElements={() => [getPortalContainer()]}>
               <div
                 data-testid="toggletip-content"
                 className={cx(style.container, {