From 8bab14a67286e37a48e8309a4fc711137132142a Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 8 May 2024 00:43:14 +0800
Subject: [PATCH 1/2] misc: added handling of input focus

---
 .../components/v2/SecretPathInput/SecretPathInput.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
index ed97ad8dd..270ebf351 100644
--- a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
+++ b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
@@ -31,6 +31,7 @@ export const SecretPathInput = ({
   const [inputValue, setInputValue] = useState(propValue ?? "");
   const [secretPath, setSecretPath] = useState("/");
   const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [isInputFocused, setIsInputFocus] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const debouncedInputValue = useDebounce(inputValue, 200);
 
@@ -108,7 +109,7 @@ export const SecretPathInput = ({
 
   return (
     <Popover.Root
-      open={suggestions.length > 0 && inputValue.length > 1}
+      open={suggestions.length > 0 && isInputFocused}
       onOpenChange={() => {
         setHighlightedIndex(-1);
       }}
@@ -119,6 +120,8 @@ export const SecretPathInput = ({
           type="text"
           autoComplete="off"
           onKeyDown={handleKeyDown}
+          onFocus={() => setIsInputFocus(true)}
+          onBlur={() => setIsInputFocus(false)}
           value={inputValue}
           onChange={handleInputChange}
           className={containerClassName}
@@ -150,8 +153,9 @@ export const SecretPathInput = ({
               key={`secret-reference-secret-${i + 1}`}
             >
               <div
-                className={`${highlightedIndex === i ? "bg-gray-600" : ""
-                  } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+                className={`${
+                  highlightedIndex === i ? "bg-gray-600" : ""
+                } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
               >
                 <div className="flex gap-2">
                   <div className="flex items-center text-yellow-700">

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 2/2] 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 };