From e7f1e11229dae746f127a4260f96e1e07eec40fa Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Fri, 7 Jan 2022 09:00:55 +0000
Subject: [PATCH] Modal: Fix restore focus behavior (#43749)

* Modal: Fix restore focus behavior

* Use OverlayContainer

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 packages/grafana-ui/src/components/Modal/Modal.tsx         | 6 +++---
 packages/grafana-ui/src/components/Modal/getModalStyles.ts | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index 3f9308e4daf..f650278a294 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useCallback, useEffect } from 'react';
-import { Portal } from '../Portal/Portal';
 import { cx } from '@emotion/css';
 import { useTheme2 } from '../../themes';
 import { IconName } from '../../types';
@@ -8,6 +7,7 @@ import { ModalHeader } from './ModalHeader';
 import { IconButton } from '../IconButton/IconButton';
 import { HorizontalGroup } from '../Layout/Layout';
 import { FocusScope } from '@react-aria/focus';
+import { OverlayContainer } from '@react-aria/overlays';
 
 export interface Props {
   /** @deprecated no longer used */
@@ -71,7 +71,7 @@ export function Modal(props: PropsWithChildren<Props>) {
   const headerClass = cx(styles.modalHeader, typeof title !== 'string' && styles.modalHeaderWithTabs);
 
   return (
-    <Portal>
+    <OverlayContainer>
       <div
         className={styles.modalBackdrop}
         onClick={onClickBackdrop || (closeOnBackdropClick ? onDismiss : undefined)}
@@ -88,7 +88,7 @@ export function Modal(props: PropsWithChildren<Props>) {
           <div className={cx(styles.modalContent, contentClassName)}>{children}</div>
         </div>
       </FocusScope>
-    </Portal>
+    </OverlayContainer>
   );
 }
 
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index de07b44210d..312c517baa0 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -28,6 +28,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => {
     `,
     modalBackdrop: css`
       position: fixed;
+      z-index: ${theme.zIndex.modalBackdrop};
       top: 0;
       right: 0;
       bottom: 0;