From e7f19421ef278cbf2e3a9cbc86bb6daea21386f8 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 8 May 2024 17:24:06 +0800
Subject: [PATCH] misc: resolved auto-popup of suggestions

---
 .../src/components/v2/SecretPathInput/SecretPathInput.tsx   | 6 ++++--
 frontend/src/hooks/api/secretFolders/queries.tsx            | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
index 270ebf351..9dfb5ff62 100644
--- a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
+++ b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
@@ -56,7 +56,9 @@ export const SecretPathInput = ({
     ) {
       setSecretPath(debouncedInputValue);
     }
+  }, [debouncedInputValue]);
 
+  useEffect(() => {
     // filter suggestions based on matching
     const searchFragment = debouncedInputValue.split("/").pop() || "";
     const filteredSuggestions = folders
@@ -66,7 +68,7 @@ export const SecretPathInput = ({
       .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
 
     setSuggestions(filteredSuggestions);
-  }, [debouncedInputValue]);
+  }, [debouncedInputValue, folders]);
 
   const handleSuggestionSelect = (selectedIndex: number) => {
     if (!suggestions[selectedIndex]) {
@@ -76,7 +78,7 @@ export const SecretPathInput = ({
     const validPaths = inputValue.split("/");
     validPaths.pop();
 
-    const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}`;
+    const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}/`;
     onChange?.(newValue);
     setInputValue(newValue);
     setSecretPath(newValue);
diff --git a/frontend/src/hooks/api/secretFolders/queries.tsx b/frontend/src/hooks/api/secretFolders/queries.tsx
index bcda2b0a4..1bbbfb112 100644
--- a/frontend/src/hooks/api/secretFolders/queries.tsx
+++ b/frontend/src/hooks/api/secretFolders/queries.tsx
@@ -79,7 +79,7 @@ export const useGetFoldersByEnv = ({
       });
     });
     return [...names];
-  }, [(folders || []).map((folder) => folder.data)]);
+  }, [...(folders || []).map((folder) => folder.data)]);
 
   const isFolderPresentInEnv = useCallback(
     (name: string, env: string) => {
@@ -91,7 +91,7 @@ export const useGetFoldersByEnv = ({
       }
       return false;
     },
-    [(folders || []).map((folder) => folder.data)]
+    [...(folders || []).map((folder) => folder.data)]
   );
 
   return { folders, folderNames, isFolderPresentInEnv };