From da29aa5fcbd8f26c1bf432f94976d72d457dfb1d Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 22 Apr 2024 22:52:11 -0400
Subject: [PATCH] Add onFocus,onBlur callback props to InputSearch

---
 app/components/InputSearch.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/components/InputSearch.tsx b/app/components/InputSearch.tsx
index 77e7de243..fb65b11cf 100644
--- a/app/components/InputSearch.tsx
+++ b/app/components/InputSearch.tsx
@@ -7,7 +7,9 @@ import Input, { Props as InputProps } from "~/components/Input";
 type Props = InputProps & {
   placeholder?: string;
   value?: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
 };
 
@@ -18,15 +20,29 @@ function InputSearch(
   const { t } = useTranslation();
   const theme = useTheme();
   const [isFocused, setIsFocused] = React.useState(false);
-  const handleFocus = React.useCallback(() => {
-    setIsFocused(true);
-  }, []);
+  const {
+    placeholder = `${t("Search")}…`,
+    onKeyDown,
+    onBlur,
+    onFocus,
+    ...rest
+  } = props;
 
-  const handleBlur = React.useCallback(() => {
-    setIsFocused(false);
-  }, []);
+  const handleFocus = React.useCallback(
+    (event) => {
+      setIsFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
 
-  const { placeholder = `${t("Search")}…`, onKeyDown, ...rest } = props;
+  const handleBlur = React.useCallback(
+    (event) => {
+      setIsFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
 
   return (
     <Input