From 4e9461ddfa997d1fa2fd1dc028202577ff1c3241 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Mon, 28 Oct 2024 14:54:23 +0100
Subject: [PATCH] feat(Assistant): Clear search when clicking outside on the
 input on desktop

---
 src/assistant/Search/SearchBar.jsx        |  1 +
 src/assistant/Search/SearchBarDesktop.jsx | 39 ++++++++++++-----------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/assistant/Search/SearchBar.jsx b/src/assistant/Search/SearchBar.jsx
index c4b376786..63f46a850 100644
--- a/src/assistant/Search/SearchBar.jsx
+++ b/src/assistant/Search/SearchBar.jsx
@@ -58,6 +58,7 @@ const SearchBar = () => {
       value={inputValue}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
+      onClear={handleClear}
       onChange={handleChange}
     />
   )
diff --git a/src/assistant/Search/SearchBarDesktop.jsx b/src/assistant/Search/SearchBarDesktop.jsx
index 024797fa7..95f7317ec 100644
--- a/src/assistant/Search/SearchBarDesktop.jsx
+++ b/src/assistant/Search/SearchBarDesktop.jsx
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 
+import ClickAwayListener from 'cozy-ui/transpiled/react/ClickAwayListener'
 import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -11,29 +12,31 @@ import { useSearch } from './SearchProvider'
 
 import styles from './styles.styl'
 
-const SearchBarDesktop = ({ value, onClick, onKeyDown, onChange }) => {
+const SearchBarDesktop = ({ value, onClick, onKeyDown, onClear, onChange }) => {
   const { t } = useI18n()
   const { searchValue } = useSearch()
   const searchRef = useRef()
 
   return (
-    <>
-      <SearchBar
-        className={searchValue ? styles['searchBarDesktop--result'] : ''}
-        ref={searchRef}
-        size="large"
-        icon={<Icon className="u-mh-1" icon={AssistantIcon} size={32} />}
-        placeholder={t('assistant.search.placeholder')}
-        value={value}
-        componentsProps={{
-          inputBase: { onKeyDown }
-        }}
-        disabledClear
-        disabledFocus={value !== ''}
-        onChange={onChange}
-      />
-      {searchValue && <ResultMenu anchorRef={searchRef} onClick={onClick} />}
-    </>
+    <ClickAwayListener onClickAway={onClear}>
+      <span>
+        <SearchBar
+          className={searchValue ? styles['searchBarDesktop--result'] : ''}
+          ref={searchRef}
+          size="large"
+          icon={<Icon className="u-mh-1" icon={AssistantIcon} size={32} />}
+          placeholder={t('assistant.search.placeholder')}
+          value={value}
+          componentsProps={{
+            inputBase: { onKeyDown }
+          }}
+          disabledClear
+          disabledFocus={value !== ''}
+          onChange={onChange}
+        />
+        {searchValue && <ResultMenu anchorRef={searchRef} onClick={onClick} />}
+      </span>
+    </ClickAwayListener>
   )
 }