fix(#1309791): [Example App] Reset SearchBar when I navigate on the d…

…ifferent links
Elastic-Suite · Sep 4, 2024 · 8f9b17f · 8f9b17f
1 parent 868472d
commit 8f9b17f
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/front/example-app/src/components/SearchBar/SearchBar.tsx b/front/example-app/src/components/SearchBar/SearchBar.tsx
@@ -54,7 +54,7 @@ import {
   AUTOCOMPLETE_FACET_TYPE,
   AUTOCOMPLETE_PRODUCT_TYPE,
 } from '../../constants'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 const MIN_AUTOCOMPLETE_CHAR = 3
 
@@ -110,6 +110,7 @@ function SearchBar(props: IProps): JSX.Element {
   const navigate = useNavigate()
 
   const [search, setSearch] = useState('')
+  const location = useLocation()
   const [documents, setDocuments, _load, debouncedLoad] = useGraphqlApi<
     IGraphqlSearchProducts & IGraphqlSearchCategories
   >()
@@ -202,6 +203,12 @@ function SearchBar(props: IProps): JSX.Element {
     loadDocuments(search)
   }, [loadDocuments, search])
 
+  useEffect(() => {
+    if (location.pathname !== '/search') {
+      setSearch('')
+    }
+  }, [location])
+
   function handleSearchChange(
     _event: ChangeEvent<HTMLInputElement>,
     value: IProductAutoComplete | ICategoryAutoComplete | IFacetAutocomplete