From 1391b741b23b683009bff82b96da212673b4ea64 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 11 Feb 2022 00:17:15 +0100
Subject: [PATCH] feat(ui) - auto complete debounce issue fix

---
 .../LiveSessionList/LiveSessionList.tsx       |  2 +-
 .../FilterAutoComplete/FilterAutoComplete.tsx | 43 ++++++++++---------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
index 2c13d8d86..5f4bf2b46 100644
--- a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
@@ -84,7 +84,7 @@ function LiveSessionList(props: Props) {
         title={"No live sessions."}
         subtext={
           <span>
-            See how to <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'enable Assist'}</a> and ensure you're using tracker-assist v3.5.0 or higher.
+            See how to <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'enable Assist'}</a> and ensure you're using tracker-assist <span className="font-medium">v3.5.0</span> or higher.
           </span>
         }
         image={<img src="/img/live-sessions.png"
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index dd82cb1b7..73e4ec3c2 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -10,6 +10,8 @@ const hiddenStyle = {
   opacity: 0, position: 'fixed', left: '-3000px'
 };
 
+let debouncedRequestValues = (value) => null;
+
 interface Props {
   showOrButton?: boolean;
   showCloseButton?: boolean;
@@ -45,22 +47,24 @@ function FilterAutoComplete(props: Props) {
   const [query, setQuery] = useState(value);
   
 
-  const requestValues = (q) => {    
-    setLoading(true);
-
-    return new APIClient()[method?.toLowerCase()](endpoint, { ...params, q })
-    .then(response => response.json())
-    .then(({ errors, data }) => {
-      if (errors) {
-        // this.setError();
-      } else {
-        setOptions(data);       
-      }
-    }).finally(() => setLoading(false));
-    // .catch(this.setError);
-  }
-
-  const debouncedRequestValues = debounce(requestValues, 1000)
+  useEffect(() => {
+    const requestValues = (q) => {    
+      setLoading(true);
+  
+      return new APIClient()[method?.toLowerCase()](endpoint, { ...params, q })
+      .then(response => response.json())
+      .then(({ errors, data }) => {
+        if (errors) {
+          // this.setError();
+        } else {
+          setOptions(data);       
+        }
+      }).finally(() => setLoading(false));
+    
+    }
+  
+    debouncedRequestValues = debounce(requestValues, 1000)
+  }, [])
 
   const onInputChange = ({ target: { value } }) => {
     setQuery(value);
@@ -136,11 +140,8 @@ function FilterAutoComplete(props: Props) {
 
       { !showOrButton && <div className="ml-3">or</div> }
 
-      {/* <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea> */}
-
-      { showModal &&
+      { (showModal && (options.length > 0) || loading) &&  (
         <div className={ stl.menu }>
-          { headerText && headerText }
           <Loader loading={loading} size="small">
             {
               options.map((item, i) => (
@@ -156,7 +157,7 @@ function FilterAutoComplete(props: Props) {
             }
           </Loader>
         </div>
-      }
+      )}
     </div>
   );
 }