From fba330b5d955919fa407ad7055bbbb2edf471413 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 1 Apr 2022 11:10:35 +0100
Subject: [PATCH] hitting esc when search input is focused and empty should
 close the search

---
 app/components/SearchPalette.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/SearchPalette.tsx b/app/components/SearchPalette.tsx
index 8b00f19..6cd4e44 100644
--- a/app/components/SearchPalette.tsx
+++ b/app/components/SearchPalette.tsx
@@ -93,6 +93,16 @@ export function SearchPalette({
       inputValue ? searchApi.search(inputValue) : searchApi.reset(),
   });
 
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Escape" && onClose && cb.inputValue.length === 0) {
+        searchApi.reset();
+        onClose?.();
+      }
+    },
+    [onClose, cb.inputValue]
+  );
+
   return (
     <>
       <div
@@ -105,7 +115,7 @@ export function SearchPalette({
         >
           <SearchIcon className="absolute w-7 h-7 top-1/2 transform -translate-y-1/2 left-3 text-white pointer-events-none" />
           <input
-            {...cb.getInputProps()}
+            {...cb.getInputProps({ onKeyDown: handleInputKeyDown })}
             type="text"
             placeholder="Search the JSON…"
             className="search-field w-full pl-12 pr-4 py-4 rounded-sm text-white text-2xl caret-indigo-700 bg-slate-900 border-indigo-700 focus:outline-none focus:ring focus:ring-indigo-700"