From 4fdefe58c75d460c502165bf47b2f8c2baeeb881 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:07:13 +1000
Subject: [PATCH] feat(ui): clear gallery search on esc key

---
 .../gallery/components/ImageGrid/GallerySearch.tsx  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx
index 3990495106..bb2fe8ff29 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx
@@ -1,7 +1,7 @@
 import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, KeyboardEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
@@ -27,6 +27,16 @@ export const GallerySearch = ({ searchTerm, onChangeSearchTerm, onResetSearchTer
     [onChangeSearchTerm]
   );
 
+  const handleKeydown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      // exit search mode on escape
+      if (e.key === 'Escape') {
+        onResetSearchTerm();
+      }
+    },
+    [onResetSearchTerm]
+  );
+
   return (
     <InputGroup>
       <Input
@@ -34,6 +44,7 @@ export const GallerySearch = ({ searchTerm, onChangeSearchTerm, onResetSearchTer
         value={searchTerm}
         onChange={handleChangeInput}
         data-testid="image-search-input"
+        onKeyDown={handleKeydown}
       />
       {isPending && (
         <InputRightElement h="full" pe={2}>