From 4e354d7af8a0bfdfc3c6b6db7437e596791ee95f Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Tue, 24 Oct 2023 12:22:40 -0300
Subject: [PATCH] fix: input search fixed

---
 src/components/forms/filters/InputSearch.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/filters/InputSearch.tsx b/src/components/forms/filters/InputSearch.tsx
index 713dfc6..7feb158 100644
--- a/src/components/forms/filters/InputSearch.tsx
+++ b/src/components/forms/filters/InputSearch.tsx
@@ -43,6 +43,7 @@ export function InputSearch({
   onResultClick,
 }: BookSearchResultsType) {
   const containerRef = useRef(null);
+  const inputRef = useRef<HTMLDivElement>(null);
   const colorIcons = useColorModeValue('gray.700', 'gray.300');
   const bgInput = useColorModeValue('white', 'black');
   const colorInput = useColorModeValue('gray.900', 'gray.100');
@@ -62,8 +63,13 @@ export function InputSearch({
 
   useOutsideClick({
     ref: containerRef,
-    handler: () => {
-      if (search.query) {
+    handler: (event) => {
+      // Verificar si el clic ocurrió fuera del inputRef
+      if (
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node) &&
+        search.query
+      ) {
         setSearch({ ...search, query: '' });
       }
     },
@@ -121,7 +127,7 @@ export function InputSearch({
 
   return (
     <>
-      <FormControl w={width} mr={{ base: 0, lg: 2 }} ref={containerRef}>
+      <FormControl w={width} mr={{ base: 0, lg: 2 }} ref={inputRef}>
         <InputGroup>
           <InputLeftElement>
             <Icon as={FiSearch} boxSize='20px' color={colorIcons} />
@@ -166,6 +172,7 @@ export function InputSearch({
         </InputGroup>
       </FormControl>
       <Container
+        ref={containerRef}
         display={search.query.length >= 3 ? 'block' : 'none'}
         w={width}
         maxH='300px'