From 090afc9ae0cb2abe1af4dec5c0130704eb146840 Mon Sep 17 00:00:00 2001
From: Kristina <kristina.durivage@grafana.com>
Date: Tue, 26 Apr 2022 06:31:13 -0500
Subject: [PATCH] Bind command palette specific overrides and reset when no
 longer relevant (#48217)

* Bind command palette specific overrides and reset when no longer relevant

* Use original global escape instead of resetting the whole keybinding profile
---
 public/app/core/services/keybindingSrv.ts     |  2 +-
 .../commandPalette/CommandPalette.tsx         | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index 0e9755af3a8..789c455ab24 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@@ -49,7 +49,7 @@ export class KeybindingSrv {
     this.bind('t r', () => toggleTheme(true));
   }
 
-  private globalEsc() {
+  globalEsc() {
     const anyDoc = document as any;
     const activeElement = anyDoc.activeElement;
 
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index db0e978be14..fe17e292fb8 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -33,8 +33,7 @@ import getGlobalActions from './actions/global.static.actions';
 export const CommandPalette = () => {
   const styles = useStyles2(getSearchStyles);
   const [actions, setActions] = useState<Action[]>([]);
-  const { notHidden, query, showing } = useKBar((state) => ({
-    notHidden: state.visualState !== VisualState.hidden,
+  const { query, showing } = useKBar((state) => ({
     showing: state.visualState === VisualState.showing,
   }));
   const isNotLogin = locationService.getLocation().pathname !== '/login';
@@ -45,12 +44,6 @@ export const CommandPalette = () => {
     };
   });
 
-  keybindingSrv.bind('esc', () => {
-    if (notHidden) {
-      query.setVisualState(VisualState.animatingOut);
-    }
-  });
-
   useEffect(() => {
     (async () => {
       if (isNotLogin) {
@@ -65,7 +58,18 @@ export const CommandPalette = () => {
   useEffect(() => {
     if (showing) {
       reportInteraction('commandPalette_opened');
+
+      keybindingSrv.bindGlobal('esc', () => {
+        query.setVisualState(VisualState.animatingOut);
+      });
     }
+
+    return () => {
+      keybindingSrv.bindGlobal('esc', () => {
+        keybindingSrv.globalEsc();
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showing]);
 
   useRegisterActions(actions, [actions]);