Merge pull request #770 from MTES-MCT/fix/search-bar-click

Bug fix: clique sur un résultat de recherche n'a aucun effet pour certains utilisateurs
MTES-MCT · Dec 2, 2024 · 601ea9f · 601ea9f
2 parents ea4a1fa + 7282464
commit 601ea9f
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/assets/scripts/components/widgets/SearchBar.tsx b/assets/scripts/components/widgets/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, ChangeEvent, useState } from 'react';
+import React, { useEffect, ChangeEvent, useState, useRef } from 'react';
 import styled from 'styled-components';
 import { useSearchTerritoryQuery } from '@services/api';
 import useDebounce from '@hooks/useDebounce';
@@ -123,6 +123,7 @@ const NoResultsMessage = styled.div`
 `;
 
 const SearchBar: React.FC<SearchBarProps> = ({ createUrl, origin }) => {
+    const searchContainerRef = useRef<HTMLDivElement>(null);
     const [query, setQuery] = useState<string>('');
     const [isFocused, setIsFocused] = useState<boolean>(false);
     const [data, setData] = useState<Territory[] | undefined>(undefined);
@@ -142,16 +143,32 @@ const SearchBar: React.FC<SearchBarProps> = ({ createUrl, origin }) => {
         }
     }, [isFetching, queryData, debouncedQuery, shouldQueryBeSkipped]);
 
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (searchContainerRef.current && !searchContainerRef.current.contains(event.target as Node)) {
+                setIsFocused(false);
+                setData(undefined);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
         const newQuery = event.target.value;
         setQuery(newQuery);
     };
 
     const handleBlur = () => {
         setTimeout(() => {
-            setQuery('');
-            setIsFocused(false);
-            setData(undefined);
+            if (!isSubmitting) {
+                setQuery('');
+                setIsFocused(false);
+                setData(undefined);
+            }
         }, 150);
     };
 
@@ -207,7 +224,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ createUrl, origin }) => {
     return (
         <>
             <Overlay $visible={isFocused} />
-            <SearchContainer>
+            <SearchContainer ref={searchContainerRef}>
                 <Icon className="bi bi-search" />
                 <Input
                     type="text"
@@ -228,6 +245,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ createUrl, origin }) => {
                                     <ResultItem
                                         key={territory.source_id}
                                         $disabled={isDisabled}
+                                        onMouseDown={(e) => e.preventDefault()}
                                         onClick={() => createDiagnostic(territory.public_key, isDisabled)}
                                     >
                                         <div>