From f1f74afee0c975c8511162808bacaf57cdffe7d5 Mon Sep 17 00:00:00 2001
From: nada-deriv <122768621+nada-deriv@users.noreply.github.com>
Date: Tue, 4 Jun 2024 08:23:37 +0400
Subject: [PATCH] [P2PS-3015]/Nada/fix: cannot access t before initialization
 (#15452)

* fix: cannot access t before initialization

* fix: move timeout to ref
---
 .../components/src/components/search-box/search-box.jsx  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/search-box/search-box.jsx b/packages/components/src/components/search-box/search-box.jsx
index b07935d1529e..708d556ce25e 100644
--- a/packages/components/src/components/search-box/search-box.jsx
+++ b/packages/components/src/components/search-box/search-box.jsx
@@ -6,6 +6,7 @@ import Icon from '../icon';
 import Input from '../input';
 
 const SearchBox = ({ className, onClear, onSearch, placeholder }) => {
+    const typing_timer = React.useRef(null);
     const onSearchClear = setFieldValue => {
         setFieldValue('search', '');
 
@@ -15,9 +16,9 @@ const SearchBox = ({ className, onClear, onSearch, placeholder }) => {
     };
 
     const onSearchKeyUpDown = submitForm => {
-        clearTimeout(typing_timer);
+        clearTimeout(typing_timer.current);
 
-        const typing_timer = setTimeout(() => {
+        typing_timer.current = setTimeout(() => {
             submitForm();
         }, 500);
     };
@@ -35,6 +36,10 @@ const SearchBox = ({ className, onClear, onSearch, placeholder }) => {
         }
     };
 
+    React.useEffect(() => {
+        return () => clearTimeout(typing_timer.current);
+    }, []);
+
     return (
         <div className={classNames('search-box', className)}>
             <Formik initialValues={{ search: '' }} onSubmit={onSearchSubmit}>