From c6f24dbb5ef2b7d19b4eef882d07000b22d67eb8 Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Mon, 13 May 2024 13:38:19 +0530
Subject: [PATCH] fix: resolved unique key error secret input rendering

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 7 +++++--
 frontend/src/components/v2/index.tsx                   | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index eed5867e3..5e7bbef78 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -41,7 +41,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?
 
   // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
   // when break is added a line break works properly
-  return formattedContent.concat(<br />);
+  return formattedContent.concat(<br key={`secret-value-${formattedContent.length + 1}`} />);
 };
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -90,7 +90,10 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             aria-label="secret value"
             ref={ref}
             className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
-            onFocus={() => setIsSecretFocused.on()}
+            onFocus={(evt) => {
+              onFocus?.(evt);
+              setIsSecretFocused.on();
+            }}
             disabled={isDisabled}
             spellCheck={false}
             onBlur={(evt) => {
diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx
index 26af93f37..526580b6c 100644
--- a/frontend/src/components/v2/index.tsx
+++ b/frontend/src/components/v2/index.tsx
@@ -10,6 +10,7 @@ export * from "./Drawer";
 export * from "./Dropdown";
 export * from "./EmailServiceSetupModal";
 export * from "./EmptyState";
+export * from "./FontAwesomeSymbol";
 export * from "./FormControl";
 export * from "./HoverCardv2";
 export * from "./IconButton";