From 0f2a6588762a98616d70a0dd0e34f5e260c5140a Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Thu, 20 Jan 2022 10:12:21 +0530
Subject: [PATCH] Improvement :home page search updated to support live search
 ,without clicking enter button (#1850)

* bugfix: fixing search homepage to allow seaching while typing

* bugfix : debouncing search
---
 frontend/src/HomePage/Header.jsx       | 8 ++++++--
 frontend/src/_components/SearchBox.jsx | 9 ++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/HomePage/Header.jsx b/frontend/src/HomePage/Header.jsx
index 3bdacabe6c..dc446c5485 100644
--- a/frontend/src/HomePage/Header.jsx
+++ b/frontend/src/HomePage/Header.jsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react'
 import { SearchBox } from '@/_components/SearchBox';
 import { Button, ButtonGroup, Dropdown } from 'react-bootstrap';
+import { debounce } from 'lodash';
 
 export default function Header({
   folderName,
@@ -13,6 +14,9 @@ export default function Header({
   showTemplateLibraryModal,
   fileInput,
 }) {
+  const debouncedChangeHandler = useCallback(
+    debounce(onSearchSubmit, 300)
+  , []);
   return (
     <div className="row">
       <div className="col-4">
@@ -20,7 +24,7 @@ export default function Header({
       </div>
 
       <div className="col-8 ms-auto d-print-none d-flex flex-row justify-content-end">
-        <SearchBox onSubmit={onSearchSubmit} />
+        <SearchBox onSubmit={debouncedChangeHandler} />
         {canCreateApp() && (
           <>
             <label className="btn btn-default d-none d-lg-inline mb-3 ms-2" onChange={handleImportApp}>
diff --git a/frontend/src/_components/SearchBox.jsx b/frontend/src/_components/SearchBox.jsx
index 0b14092a0b..2d05a128df 100644
--- a/frontend/src/_components/SearchBox.jsx
+++ b/frontend/src/_components/SearchBox.jsx
@@ -6,12 +6,8 @@ export function SearchBox({ onSubmit }) {
 
   const handleChange = (e) => {
     setSearchText(e.target.value);
-  };
-
-  const trackEnterKey = (e) => {
-    if (e.key === 'Enter') {
-      onSubmit(searchText);
-    }
+    onSubmit(e.target.value);
+    
   };
 
   return (
@@ -38,7 +34,6 @@ export function SearchBox({ onSubmit }) {
         <input
           type="text"
           value={searchText}
-          onKeyDown={trackEnterKey}
           onChange={handleChange}
           className="form-control"
           placeholder="Search"