fix: form not correctly updating based on values (#572)

* fix: form not correctly updating based on values

Closes #549

* chore: pr review
This commit is contained in:
Nico 2026-02-25 18:36:12 +01:00 committed by GitHub
parent cb92d36c95
commit b916df7736
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 23 additions and 22 deletions

View file

@ -111,7 +111,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
name: "",
},
resetOptions: {
keepDefaultValues: true,
keepDefaultValues: false,
keepDirtyValues: false,
},
});

View file

@ -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}

View file

@ -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">

View file

@ -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"

View file

@ -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"

View file

@ -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 />