FEATURE adding an easy escape clicking elsewhere

resources/js/search-bar.ts

@@ -37,6 +37,7 @@ export default class SearchBar {
     );
     this.searchBar.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
     document.addEventListener('keydown', this.handleKeyDown.bind(this));
+    document.addEventListener('click', this.handleClickOutside.bind(this));
     window.addEventListener('scroll', this.handleScroll.bind(this));
   }
 
@@ -115,6 +116,22 @@ export default class SearchBar {
     this.close();
   }
 
+  private handleClickOutside(event: MouseEvent): void {
+    if (!this.isOpen || !this.searchBar) return;
+
+    const target = event.target as Node;
+
+    // Vérifier si le clic est en dehors de la barre de recherche ET des boutons
+    const isClickOutsideSearchBar = !this.searchBar.contains(target);
+    const isClickOnButton = Array.from(this.searchButtons || []).some((button) =>
+      button.contains(target)
+    );
+
+    if (isClickOutsideSearchBar && !isClickOnButton) {
+      this.close();
+    }
+  }
+
   private updateAriaHidden(): void {
     if (!this.searchBar) return;
 
@@ -136,6 +153,7 @@ export default class SearchBar {
     // Dans un vrai projet, il faudrait stocker les références des fonctions
     this.searchBar.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));
     document.removeEventListener('keydown', this.handleKeyDown.bind(this));
+    document.removeEventListener('click', this.handleClickOutside.bind(this));
     window.removeEventListener('scroll', this.handleScroll.bind(this));
   }
 }