Merge pull request #29 from WildCodeSchool/feature/search-bar

Correction d'un bug de la search bar qui ne se fermait pas lorsque l'…
WildCodeSchool · Feb 25, 2025 · d72bb61 · d72bb61
2 parents 51eeef0 + f120653
commit d72bb61
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/components/characters.jsx b/src/components/characters.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import '../style/characters.scss';
 
@@ -9,9 +9,22 @@ export default function Characters({ data, onClick }) {
     setIsVisible(false);
   };
 
+  const handleClickOutside = (event) => {
+    if (isVisible && !event.target.closest('.search-container')) {
+      hideCharacters();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
   return (
     <>
-      <div className='search-container' style={{ display: isVisible ? 'block' : 'none' }}>
+      <div className='search-container' style={{ display: isVisible ? '' : 'none' }}>
         <div className='search-result' onClick={hideCharacters}>
           <button className='close-search' onClick={hideCharacters}>
             X

diff --git a/src/components/comics.jsx b/src/components/comics.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import '../style/comics.scss';
@@ -10,8 +10,21 @@ export default function Comics({ data, onClick }) {
     setIsVisible(false);
   };
 
+  const handleClickOutside = (event) => {
+    if (isVisible && !event.target.closest('.search-container')) {
+      hideComics();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
   return (
-    <div className='search-container' style={{ display: isVisible ? 'block' : 'none' }}>
+    <div className='search-container' style={{ display: isVisible ? '' : 'none' }}>
       <div className='search-result' onClick={hideComics}>
         <button className='close-search' onClick={hideComics}>
           X