From 18dc8a65f7632d02b1daae5331bb78a668a03a7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 16 May 2024 18:55:58 +0100
Subject: [PATCH] web: core/ListSearch fixes

---
 web/src/components/core/ListSearch.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/ListSearch.jsx b/web/src/components/core/ListSearch.jsx
index 252cd1544b..33451d9a26 100644
--- a/web/src/components/core/ListSearch.jsx
+++ b/web/src/components/core/ListSearch.jsx
@@ -38,7 +38,7 @@ const search = (elements, term) => {
 };
 
 /**
- * TODO: Rename
+ * TODO: Rename and/or refactor?
  * Input field for searching in a given list of elements.
  * @component
  *
@@ -54,10 +54,14 @@ export default function ListSearch({
 }) {
   const [value, setValue] = useState("");
   const [resultSize, setResultSize] = useState(elements.length);
-  const searchHandler = useDebounce(term => {
-    const result = search(elements, term);
+
+  const updateResult = (result) => {
     setResultSize(result.length);
     onChangeProp(result);
+  };
+
+  const searchHandler = useDebounce(term => {
+    updateResult(search(elements, term));
   }, 500);
 
   const onChange = (value) => {
@@ -65,12 +69,17 @@ export default function ListSearch({
     searchHandler(value);
   };
 
+  const onClear = () => {
+    setValue("");
+    updateResult(elements);
+  };
+
   return (
     <SearchInput
       placeholder={placeholder}
       value={value}
       onChange={(_, value) => onChange(value)}
-      onClear={() => onChangeProp(elements)}
+      onClear={onClear}
       resultsCount={resultSize}
     />
   );