From 535c4576f79303a54c6f832208d39bb434e02027 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 13 Dec 2022 14:44:32 +0000
Subject: [PATCH] Command Palette: Fix not being able to type if triggered
 whilst another modal is open (#59728)

handle command palette in the same way as other modals
---
 .../commandPalette/CommandPalette.tsx         | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index e87f0b6b1e3..c03c7c941e6 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -1,5 +1,7 @@
 import { css } from '@emotion/css';
+import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
+import { useOverlay } from '@react-aria/overlays';
 import {
   KBarAnimator,
   KBarPortal,
@@ -12,12 +14,11 @@ import {
   useRegisterActions,
   useKBar,
 } from 'kbar';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction, locationService } from '@grafana/runtime';
 import { useStyles2 } from '@grafana/ui';
-import { useGrafana } from 'app/core/context/GrafanaContext';
 import { useSelector } from 'app/types';
 
 import { ResultItem } from './ResultItem';
@@ -31,7 +32,6 @@ import getGlobalActions from './actions/global.static.actions';
 
 export const CommandPalette = () => {
   const styles = useStyles2(getSearchStyles);
-  const { keybindings } = useGrafana();
   const [actions, setActions] = useState<Action[]>([]);
   const [staticActions, setStaticActions] = useState<Action[]>([]);
   const { query, showing } = useKBar((state) => ({
@@ -45,6 +45,13 @@ export const CommandPalette = () => {
     };
   });
 
+  const ref = useRef<HTMLDivElement>(null);
+  const { overlayProps } = useOverlay(
+    { isOpen: showing, onClose: () => query.setVisualState(VisualState.animatingOut) },
+    ref
+  );
+  const { dialogProps } = useDialog({}, ref);
+
   useEffect(() => {
     if (isNotLogin) {
       const staticActionsResp = getGlobalActions(navBarTree);
@@ -61,19 +68,8 @@ export const CommandPalette = () => {
       getDashboardNavActions('go/dashboard').then((dashAct) => {
         setActions([...staticActions, ...dashAct]);
       });
-
-      keybindings.bindGlobal('esc', () => {
-        query.setVisualState(VisualState.animatingOut);
-      });
     }
-
-    return () => {
-      keybindings.bindGlobal('esc', () => {
-        keybindings.globalEsc();
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showing]);
+  }, [showing, staticActions]);
 
   useRegisterActions(actions, [actions]);
 
@@ -81,9 +77,11 @@ export const CommandPalette = () => {
     <KBarPortal>
       <KBarPositioner className={styles.positioner}>
         <KBarAnimator className={styles.animator}>
-          <FocusScope contain>
-            <KBarSearch className={styles.search} />
-            <RenderResults />
+          <FocusScope contain autoFocus restoreFocus>
+            <div {...overlayProps} {...dialogProps}>
+              <KBarSearch className={styles.search} />
+              <RenderResults />
+            </div>
           </FocusScope>
         </KBarAnimator>
       </KBarPositioner>