feat(ui): clear gallery search on esc key

Author: psychedelicious

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,13 +27,24 @@ 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
         placeholder={t('gallery.searchImages')}
         value={searchTerm}
         onChange={handleChangeInput}
         data-testid="image-search-input"
+        onKeyDown={handleKeydown}
       />
       {isPending && (
         <InputRightElement h="full" pe={2}>