From b916df773694992c3d47c3345dbe0497a6dcbc36 Mon Sep 17 00:00:00 2001
From: Nico <47644445+nicotsx@users.noreply.github.com>
Date: Wed, 25 Feb 2026 18:36:12 +0100
Subject: [PATCH] fix: form not correctly updating based on values (#572)

* fix: form not correctly updating based on values

Closes #549

* chore: pr review
---
 .../components/create-notification-form.tsx           |  2 +-
 .../components/notification-forms/generic-form.tsx    |  9 +++++----
 .../components/repository-forms/advanced-tls-form.tsx | 11 ++++++-----
 .../repository-forms/sftp-repository-form.tsx         |  6 ++++--
 .../volumes/components/volume-forms/sftp-form.tsx     |  6 ++++--
 .../volumes/components/volume-forms/smb-form.tsx      | 11 +++--------
 6 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/app/client/modules/notifications/components/create-notification-form.tsx b/app/client/modules/notifications/components/create-notification-form.tsx
index d166f858..684740e2 100644
--- a/app/client/modules/notifications/components/create-notification-form.tsx
+++ b/app/client/modules/notifications/components/create-notification-form.tsx
@@ -111,7 +111,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 			name: "",
 		},
 		resetOptions: {
-			keepDefaultValues: true,
+			keepDefaultValues: false,
 			keepDirtyValues: false,
 		},
 	});
diff --git a/app/client/modules/notifications/components/notification-forms/generic-form.tsx b/app/client/modules/notifications/components/notification-forms/generic-form.tsx
index d969939c..7df1a5d7 100644
--- a/app/client/modules/notifications/components/notification-forms/generic-form.tsx
+++ b/app/client/modules/notifications/components/notification-forms/generic-form.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
 import { Input } from "~/client/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
@@ -49,7 +49,8 @@ ${body}`;
 };
 
 export const GenericForm = ({ form }: Props) => {
-	const watchedValues = form.watch();
+	const watchedValues = useWatch({ control: form.control });
+	const useJson = useWatch({ control: form.control, name: "useJson" });
 
 	return (
 		<>
@@ -126,7 +127,7 @@ export const GenericForm = ({ form }: Props) => {
 				render={({ field }) => (
 					<FormItem className="flex flex-row items-center space-x-3">
 						<FormControl>
-							<Checkbox checked={field.value} onCheckedChange={field.onChange} />
+							<Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
 						</FormControl>
 						<div className="space-y-1 leading-none">
 							<FormLabel>Use JSON Template</FormLabel>
@@ -135,7 +136,7 @@ export const GenericForm = ({ form }: Props) => {
 					</FormItem>
 				)}
 			/>
-			{form.watch("useJson") && (
+			{useJson && (
 				<>
 					<FormField
 						control={form.control}
diff --git a/app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx b/app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx
index c26878e8..20e6ed9a 100644
--- a/app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx
+++ b/app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import {
 	FormControl,
 	FormDescription,
@@ -22,10 +22,10 @@ type Props = {
 };
 
 export const AdvancedForm = ({ form }: Props) => {
-	const insecureTls = form.watch("insecureTls");
-	const cacert = form.watch("cacert");
-	const uploadLimitEnabled = form.watch("uploadLimit.enabled");
-	const downloadLimitEnabled = form.watch("downloadLimit.enabled");
+	const insecureTls = useWatch({ control: form.control, name: "insecureTls" });
+	const cacert = useWatch({ control: form.control, name: "cacert" });
+	const uploadLimitEnabled = useWatch({ control: form.control, name: "uploadLimit.enabled" });
+	const downloadLimitEnabled = useWatch({ control: form.control, name: "downloadLimit.enabled" });
 
 	return (
 		<Collapsible>
@@ -164,6 +164,7 @@ export const AdvancedForm = ({ form }: Props) => {
 												onValueChange={field.onChange}
 												defaultValue={field.value || "Mbps"}
 												value={field.value || "Mbps"}
+												disabled={!downloadLimitEnabled}
 											>
 												<FormControl>
 													<SelectTrigger className="text-xs">
diff --git a/app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx b/app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx
index c5286a60..e5825d00 100644
--- a/app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx
+++ b/app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import {
 	FormControl,
 	FormDescription,
@@ -17,6 +17,8 @@ type Props = {
 };
 
 export const SftpRepositoryForm = ({ form }: Props) => {
+	const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
+
 	return (
 		<>
 			<FormField
@@ -114,7 +116,7 @@ export const SftpRepositoryForm = ({ form }: Props) => {
 					</FormItem>
 				)}
 			/>
-			{!form.watch("skipHostKeyCheck") && (
+			{!skipHostKeyCheck && (
 				<FormField
 					control={form.control}
 					name="knownHosts"
diff --git a/app/client/modules/volumes/components/volume-forms/sftp-form.tsx b/app/client/modules/volumes/components/volume-forms/sftp-form.tsx
index 821dc5f5..869d9ead 100644
--- a/app/client/modules/volumes/components/volume-forms/sftp-form.tsx
+++ b/app/client/modules/volumes/components/volume-forms/sftp-form.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import type { FormValues } from "../create-volume-form";
 import {
 	FormControl,
@@ -18,6 +18,8 @@ type Props = {
 };
 
 export const SFTPForm = ({ form }: Props) => {
+	const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
+
 	return (
 		<>
 			<FormField
@@ -132,7 +134,7 @@ export const SFTPForm = ({ form }: Props) => {
 					</FormItem>
 				)}
 			/>
-			{!form.watch("skipHostKeyCheck") && (
+			{!skipHostKeyCheck && (
 				<FormField
 					control={form.control}
 					name="knownHosts"
diff --git a/app/client/modules/volumes/components/volume-forms/smb-form.tsx b/app/client/modules/volumes/components/volume-forms/smb-form.tsx
index 3c9f0167..89e64b52 100644
--- a/app/client/modules/volumes/components/volume-forms/smb-form.tsx
+++ b/app/client/modules/volumes/components/volume-forms/smb-form.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from "react-hook-form";
+import { useWatch, type UseFormReturn } from "react-hook-form";
 import type { FormValues } from "../create-volume-form";
 import {
 	FormControl,
@@ -17,7 +17,7 @@ type Props = {
 };
 
 export const SMBForm = ({ form }: Props) => {
-	const guest = form.watch("guest");
+	const guest = useWatch({ control: form.control, name: "guest" });
 
 	return (
 		<>
@@ -83,12 +83,7 @@ export const SMBForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Username</FormLabel>
 						<FormControl>
-							<Input
-								placeholder="admin"
-								value={field.value}
-								onChange={field.onChange}
-								disabled={guest}
-							/>
+							<Input placeholder="admin" value={field.value} onChange={field.onChange} disabled={guest} />
 						</FormControl>
 						<FormDescription>Username for SMB authentication.</FormDescription>
 						<FormMessage />