danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: form not correctly updating based on values

Browse source 
Closes #549
This commit is contained in:
Nicolas Meienberger 2026-02-25 17:46:00 +01:00
parent cb92d36c95
commit 90560974f3
6 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/client/modules/notifications/components/create-notification-form.tsx
View file

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

9
app/client/modules/notifications/components/notification-forms/generic-form.tsx
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 { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
import { Input } from "~/client/components/ui/input"; import { Input } from "~/client/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
@ -49,7 +49,8 @@ ${body}`;
}; };
export const GenericForm = ({ form }: Props) => { export const GenericForm = ({ form }: Props) => {
const watchedValues = form.watch(); const watchedValues = useWatch({ control: form.control });
const useJson = useWatch({ control: form.control, name: "useJson" });
return ( return (
<> <>
@ -126,7 +127,7 @@ export const GenericForm = ({ form }: Props) => {
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3"> <FormItem className="flex flex-row items-center space-x-3">
<FormControl> <FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} /> <Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
</FormControl> </FormControl>
<div className="space-y-1 leading-none"> <div className="space-y-1 leading-none">
<FormLabel>Use JSON Template</FormLabel> <FormLabel>Use JSON Template</FormLabel>
@ -135,7 +136,7 @@ export const GenericForm = ({ form }: Props) => {
</FormItem> </FormItem>
)} )}
/> />
{form.watch("useJson") && ( {useJson && (
<> <>
<FormField <FormField
control={form.control} control={form.control}

10
app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx
View file

@ -1,4 +1,4 @@
import type { UseFormReturn } from "react-hook-form"; import { useWatch, type UseFormReturn } from "react-hook-form";
import { import {
FormControl, FormControl,
FormDescription, FormDescription,
@ -22,10 +22,10 @@ type Props = {
}; };
export const AdvancedForm = ({ form }: Props) => { export const AdvancedForm = ({ form }: Props) => {
const insecureTls = form.watch("insecureTls"); const insecureTls = useWatch({ control: form.control, name: "insecureTls" });
const cacert = form.watch("cacert"); const cacert = useWatch({ control: form.control, name: "cacert" });
const uploadLimitEnabled = form.watch("uploadLimit.enabled"); const uploadLimitEnabled = useWatch({ control: form.control, name: "uploadLimit.enabled" });
const downloadLimitEnabled = form.watch("downloadLimit.enabled"); const downloadLimitEnabled = useWatch({ control: form.control, name: "downloadLimit.enabled" });
return ( return (
<Collapsible> <Collapsible>

6
app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx
View file

@ -1,4 +1,4 @@
import type { UseFormReturn } from "react-hook-form"; import { useWatch, type UseFormReturn } from "react-hook-form";
import { import {
FormControl, FormControl,
FormDescription, FormDescription,
@ -17,6 +17,8 @@ type Props = {
}; };
export const SftpRepositoryForm = ({ form }: Props) => { export const SftpRepositoryForm = ({ form }: Props) => {
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
return ( return (
<> <>
<FormField <FormField
@ -114,7 +116,7 @@ export const SftpRepositoryForm = ({ form }: Props) => {
</FormItem> </FormItem>
)} )}
/> />
{!form.watch("skipHostKeyCheck") && ( {!skipHostKeyCheck && (
<FormField <FormField
control={form.control} control={form.control}
name="knownHosts" name="knownHosts"

6
app/client/modules/volumes/components/volume-forms/sftp-form.tsx
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 type { FormValues } from "../create-volume-form";
import { import {
FormControl, FormControl,
@ -18,6 +18,8 @@ type Props = {
}; };
export const SFTPForm = ({ form }: Props) => { export const SFTPForm = ({ form }: Props) => {
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
return ( return (
<> <>
<FormField <FormField
@ -132,7 +134,7 @@ export const SFTPForm = ({ form }: Props) => {
</FormItem> </FormItem>
)} )}
/> />
{!form.watch("skipHostKeyCheck") && ( {!skipHostKeyCheck && (
<FormField <FormField
control={form.control} control={form.control}
name="knownHosts" name="knownHosts"

11
app/client/modules/volumes/components/volume-forms/smb-form.tsx
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 type { FormValues } from "../create-volume-form";
import { import {
FormControl, FormControl,
@ -17,7 +17,7 @@ type Props = {
}; };
export const SMBForm = ({ form }: Props) => { export const SMBForm = ({ form }: Props) => {
const guest = form.watch("guest"); const guest = useWatch({ control: form.control, name: "guest" });
return ( return (
<> <>
@ -83,12 +83,7 @@ export const SMBForm = ({ form }: Props) => {
<FormItem> <FormItem>
<FormLabel>Username</FormLabel> <FormLabel>Username</FormLabel>
<FormControl> <FormControl>
<Input <Input placeholder="admin" value={field.value} onChange={field.onChange} disabled={guest} />
placeholder="admin"
value={field.value}
onChange={field.onChange}
disabled={guest}
/>
</FormControl> </FormControl>
<FormDescription>Username for SMB authentication.</FormDescription> <FormDescription>Username for SMB authentication.</FormDescription>
<FormMessage /> <FormMessage />