From 74f866715f3656aac7bbe60ba0ea2cbbde8f8b3c Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 1 May 2024 02:10:54 +0800
Subject: [PATCH] fix: address infisical secret input ux issue with enter and
 arrow keys

---
 .../v2/InfisicalSecretInput/InfisicalSecretInput.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 29f7ec3c8..e45ca1dc0 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -75,6 +75,7 @@ export const InfisicalSecretInput = ({
   const [listReference, setListReference] = useState<ReferenceItem[]>([]);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const isPopupOpen = isSuggestionsOpen && listReference.length > 0 && currentReference.length > 0;
 
   useEffect(() => {
     setInputValue(propValue ?? "");
@@ -274,7 +275,11 @@ export const InfisicalSecretInput = ({
     } else if (e.key === "Enter" && highlightedIndex >= 0) {
       handleSuggestionSelect();
     }
-    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
+
+    if (
+      (["ArrowDown", "ArrowUp"].includes(e.key) && isPopupOpen) ||
+      (e.key === "Enter" && highlightedIndex >= 0)
+    ) {
       e.preventDefault();
     }
   };
@@ -298,10 +303,7 @@ export const InfisicalSecretInput = ({
   };
 
   return (
-    <Popover.Root
-      open={isSuggestionsOpen && listReference.length > 0 && currentReference.length > 0}
-      onOpenChange={setIsOpen}
-    >
+    <Popover.Root open={isPopupOpen} onOpenChange={setIsOpen}>
       <Popover.Trigger asChild>
         <SecretInput
           {...props}