From b135ba263c91611797ce584960e689af98e43d38 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 22:49:00 +0800
Subject: [PATCH] adjustment: finalized InfisicalSecretInput

---
 .../InfisicalSecretInput.tsx                  | 28 ++++++++++++-------
 .../SecretOverviewTableRow/SecretEditRow.tsx  |  1 +
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 965a24761..9cb0a0bbc 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
+import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import {
@@ -97,15 +97,23 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [referenceKey, setReferenceKey] = useState<string>();
     const [lastCaretPos, setLastCaretPos] = useState<number>(0);
 
-    const isCaretInsideReference = (str: string, start: number) => {
-      const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
-        (entry) =>
-          typeof entry?.index !== "undefined" &&
-          entry.index <= start &&
-          start < entry.index + entry[0].length
-      );
+    useEffect(() => {
+      setValue(propValue as string);
+    }, [propValue]);
 
-      return match || null;
+    const isCaretInsideReference = (str: string, start: number) => {
+      if (str) {
+        const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
+          (entry) =>
+            typeof entry?.index !== "undefined" &&
+            entry.index <= start &&
+            start < entry.index + entry[0].length
+        );
+
+        return match || null;
+      }
+
+      return null;
     };
 
     const setCaretPos = (caretPos: number) => {
@@ -299,7 +307,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
                 if (!showReferencePopup) setIsSecretFocused.off();
               }}
               {...props}
-              value={value}
+              value={value || ""}
               readOnly={isReadOnly}
             />
           </div>
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 5dd8db4d6..58eaf429f 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -100,6 +100,7 @@ export const SecretEditRow = ({
             <InfisicalSecretInput
               {...field}
               value={field.value as string}
+              key="secret-input"
               isVisible={isVisible}
               secretPath={secretPath}
               environment={environment}