From e12372364dc7b2c0bc8c2179109b4a860fb05f10 Mon Sep 17 00:00:00 2001
From: Abdulrehman-Jafer <121712508+Abdulrehman-Jafer@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:45:33 +0500
Subject: [PATCH] web: add support for realtime search (#2171)

Signed-off-by: Abdulrehman-Jafer <abdulrehmanjaferwork01233@gmail.com>
---
 apps/web/src/components/search/index.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/search/index.js b/apps/web/src/components/search/index.js
index a50f061ac..c43360bc7 100644
--- a/apps/web/src/components/search/index.js
+++ b/apps/web/src/components/search/index.js
@@ -20,8 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as Icon from "../icons";
 import "./search.css";
 import Field from "../field";
-
-function SearchBox(props) {
+import { debounce } from "../../utils/debounce";
+function SearchBox({ onSearch }) {
   return (
     <Field
       data-test-id="search-input"
@@ -29,18 +29,16 @@ function SearchBox(props) {
       id="search"
       name="search"
       type="text"
-      sx={{m: 0,mx: 1,mt: 1}}
+      sx={{ m: 0, mx: 1, mt: 1 }}
       placeholder="Type your query here"
-      onKeyDown={(e) => {
-        if (e.key === "Enter") props.onSearch(e.target.value);
-      }}
+      onChange={debounce((e) => onSearch(e.target.value), 250)}
       action={{
         icon: Icon.Search,
         testId: "search-button",
         onClick: () => {
           const searchField = document.getElementById("search");
           if (searchField && searchField.value && searchField.value.length) {
-            props.onSearch(searchField.value);
+            onSearch(searchField.value);
           }
         }
       }}