feat(Assistant): Clear search when clicking outside on the input on d…

…esktop
cozy · Oct 28, 2024 · 4e9461d · 4e9461d
1 parent fb001fc
commit 4e9461d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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>
   )
 }