From abd802cc7449fbf7c9e4cf2cac4a28a13e86df81 Mon Sep 17 00:00:00 2001
From: Viren070 <viren070@protonmail.com>
Date: Sat, 22 Nov 2025 23:36:15 +0000
Subject: [PATCH] fix(frontend/services): store modal values in local state
 closes #503

---
 .../frontend/src/components/menu/services.tsx | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/menu/services.tsx b/packages/frontend/src/components/menu/services.tsx
index 4f6323da..2c3dfc88 100644
--- a/packages/frontend/src/components/menu/services.tsx
+++ b/packages/frontend/src/components/menu/services.tsx
@@ -456,7 +456,6 @@ function Content() {
         onOpenChange={setModalOpen}
         serviceId={modalService}
         values={modalValues}
-        onChange={handleModalValuesChange}
         onSubmit={handleModalSubmit}
         onClose={handleModalClose}
       />
@@ -529,7 +528,6 @@ function ServiceModal({
   onOpenChange,
   serviceId,
   values,
-  onChange,
   onSubmit,
   onClose,
 }: {
@@ -537,23 +535,28 @@ function ServiceModal({
   onOpenChange: (v: boolean) => void;
   serviceId: ServiceId | null;
   values: Record<string, any>;
-  onChange: (v: Record<string, any>) => void;
   onSubmit: (v: Record<string, any>) => void;
   onClose: () => void;
 }) {
   const { status } = useStatus();
+  const [localValues, setLocalValues] = useState<Record<string, any>>({});
+
+  useEffect(() => {
+    if (open) {
+      setLocalValues(values);
+    }
+  }, [open, values]);
+
   if (!status) return null;
   if (!serviceId) return null;
   const meta = status.settings.services[serviceId]!;
   const credentials = meta.credentials || [];
 
   const handleCredentialChange = (optId: string, newValue: any) => {
-    // Create a new object with all existing values plus the updated one
-    const updatedValues = {
-      ...values,
+    setLocalValues((prev) => ({
+      ...prev,
       [optId]: newValue,
-    };
-    onChange(updatedValues);
+    }));
   };
 
   return (
@@ -566,7 +569,7 @@ function ServiceModal({
         className="space-y-4"
         onSubmit={(e) => {
           e.preventDefault();
-          onSubmit(values);
+          onSubmit(localValues);
         }}
       >
         {credentials.map((opt) => (
@@ -576,7 +579,7 @@ function ServiceModal({
               ...opt,
               required: false, // override required to false to allow unsetting
             }}
-            value={opt.forced || opt.default || values[opt.id]}
+            value={opt.forced || opt.default || localValues[opt.id]}
             onChange={(v) => handleCredentialChange(opt.id, v || undefined)}
           />
         ))}