From f120653d1530d25bae99613c3ee8567040ce80b3 Mon Sep 17 00:00:00 2001
From: Luc Martial <lucmartial@msn.com>
Date: Tue, 25 Feb 2025 09:58:34 +0100
Subject: [PATCH] Correction d'un bug de la search bar qui ne se fermait pas
 lorsque l'on cliquait sur un onglet de navigation

---
 src/components/characters.jsx | 17 +++++++++++++++--
 src/components/comics.jsx     | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/characters.jsx b/src/components/characters.jsx
index f4cf5a0..6be3f5d 100644
--- 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
index 5efdc57..9bb9394 100644
--- 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