From 5b5650889c56653e770112b5179ba9b5eb5456ed Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 17 Mar 2022 10:45:06 +0100
Subject: [PATCH] performance

---
 .../remix-ui/search/src/lib/components/Find.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/search/src/lib/components/Find.tsx b/libs/remix-ui/search/src/lib/components/Find.tsx
index 377c269533..845eed7c0c 100644
--- a/libs/remix-ui/search/src/lib/components/Find.tsx
+++ b/libs/remix-ui/search/src/lib/components/Find.tsx
@@ -1,20 +1,28 @@
-import React, { useContext, useRef } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { SearchContext } from '../context/context'
 
 export const Find = () => {
   const {
     setFind,
+    cancelSearch,
     state,
     toggleCaseSensitive,
     toggleMatchWholeWord,
     toggleUseRegex
   } = useContext(SearchContext)
   const timeOutId = useRef(null)
-  const change = e => {
+  const [inputValue, setInputValue] = useState("");
+  const change = async(e) => {
+    setInputValue(e.target.value)
     clearTimeout(timeOutId.current)
-    timeOutId.current = setTimeout(() => setFind(e.target.value), 500)
+    await cancelSearch()
+    timeOutId.current = setTimeout(async () => await setFind(e.target.value), 500)
   }
 
+  useEffect(() =>{
+    setInputValue('')
+  },[state.workspace])
+
   return (
     <>
       <div className="search_plugin_find-part">
@@ -23,7 +31,8 @@ export const Find = () => {
             id='search_input'
             placeholder="Search"
             className="form-control"
-            onChange={change}
+            value={inputValue}
+            onChange={async(e) => await change(e)}
           ></input>
           <div className="search_plugin_controls">
             <div