Add onFocus,onBlur callback props to InputSearch

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