ensure portalled elements count as within the floatingfocusmanager boundary

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

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}

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, {