adjustment: finalized InfisicalSecretInput

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,7 +97,12 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [referenceKey, setReferenceKey] = useState<string>();
     const [lastCaretPos, setLastCaretPos] = useState<number>(0);
 
+    useEffect(() => {
+      setValue(propValue as string);
+    }, [propValue]);
+
     const isCaretInsideReference = (str: string, start: number) => {
+      if (str) {
         const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
           (entry) =>
             typeof entry?.index !== "undefined" &&
@@ -106,6 +111,9 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         );
 
         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>

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}