From d6a5bf9d501c67d5cb5b23351bff9d8cf0e8ad8e Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Sat, 27 Apr 2024 00:32:34 +0800
Subject: [PATCH] adjustment: simplified onchange propagation

---
 .../components/v2/SecretPathInput/SecretPathInput.tsx    | 9 +++++----
 .../src/pages/integrations/cloudflare-pages/create.tsx   | 2 +-
 .../src/pages/integrations/cloudflare-workers/create.tsx | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
index 1024a5c08..1487cb302 100644
--- a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
+++ b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
@@ -10,7 +10,7 @@ import { useGetFoldersByEnv } from "@app/hooks/api";
 
 import { Input } from "../Input";
 
-type Props = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
   value?: string | null;
   isImport?: boolean;
   isVisible?: boolean;
@@ -18,6 +18,7 @@ type Props = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
   isDisabled?: boolean;
   environment?: string;
   containerClassName?: string;
+  onChange?: (arg: string) => void;
 };
 
 export const SecretPathInput = ({
@@ -49,7 +50,7 @@ export const SecretPathInput = ({
     if (environment) {
       setInputValue("/");
       setSecretPath("/");
-      onChange?.({ target: { value: "/" } } as any);
+      onChange?.("/");
     }
   }, [environment]);
 
@@ -83,7 +84,7 @@ export const SecretPathInput = ({
     validPaths.pop();
 
     const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}`;
-    onChange?.({ target: { value: newValue } } as any);
+    onChange?.(newValue);
     setInputValue(newValue);
     setSecretPath(newValue);
     setHighlightedIndex(-1);
@@ -107,7 +108,7 @@ export const SecretPathInput = ({
   const handleInputChange = (e: any) => {
     // propagate event to react-hook-form onChange
     if (onChange) {
-      onChange(e);
+      onChange(e.target.value);
     }
 
     setInputValue(e.target.value);
diff --git a/frontend/src/pages/integrations/cloudflare-pages/create.tsx b/frontend/src/pages/integrations/cloudflare-pages/create.tsx
index 1b2835b76..570b2b83a 100644
--- a/frontend/src/pages/integrations/cloudflare-pages/create.tsx
+++ b/frontend/src/pages/integrations/cloudflare-pages/create.tsx
@@ -125,7 +125,7 @@ export default function CloudflarePagesIntegrationPage() {
         <FormControl label="Infisical Secret Path" className="mt-2 px-6">
           <SecretPathInput
             value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
+            onChange={(value) => setSecretPath(value)}
             environment={selectedSourceEnvironment}
             placeholder="Provide a path, default is /"
           />
diff --git a/frontend/src/pages/integrations/cloudflare-workers/create.tsx b/frontend/src/pages/integrations/cloudflare-workers/create.tsx
index c706cdd5d..f4a35d47c 100644
--- a/frontend/src/pages/integrations/cloudflare-workers/create.tsx
+++ b/frontend/src/pages/integrations/cloudflare-workers/create.tsx
@@ -116,7 +116,7 @@ export default function CloudflareWorkersIntegrationPage() {
         <FormControl label="Infisical Secret Path" className="mt-2 px-6">
           <SecretPathInput
             value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
+            onChange={(value) => setSecretPath(value)}
             environment={selectedSourceEnvironment}
             placeholder="Provide a path, default is /"
           />