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] 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">