From a3c904dcc971a0b6ad213765a8cb8d3faef90318 Mon Sep 17 00:00:00 2001
From: moshyfawn <email@moshyfawn.dev>
Date: Sat, 20 May 2023 00:58:44 -0400
Subject: [PATCH] fix(www): refactor controlled inputs API examples (#385)

* refactor: remove usage of uncontrolled input apis within controlled inputs

Closes: #384

* docs: display FormField controlled input usage example

---------

Co-authored-by: shadcn <m@shadcn.com>
---
 apps/www/app/examples/forms/account/account-form.tsx      | 4 ++--
 .../www/app/examples/forms/appearance/appearance-form.tsx | 4 ++--
 apps/www/app/examples/forms/profile-form.tsx              | 8 ++++----
 apps/www/components/examples/input/react-hook-form.tsx    | 4 ++--
 apps/www/components/examples/textarea/react-hook-form.tsx | 4 ++--
 apps/www/content/docs/forms/react-hook-form.mdx           | 6 +++---
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/www/app/examples/forms/account/account-form.tsx b/apps/www/app/examples/forms/account/account-form.tsx
index 2596e965e9..7b8465db2b 100644
--- a/apps/www/app/examples/forms/account/account-form.tsx
+++ b/apps/www/app/examples/forms/account/account-form.tsx
@@ -93,11 +93,11 @@ export function AccountForm() {
         <FormField
           control={form.control}
           name="name"
-          render={() => (
+          render={({ field }) => (
             <FormItem>
               <FormLabel>Name</FormLabel>
               <FormControl>
-                <Input placeholder="Your name" {...form.register("name")} />
+                <Input placeholder="Your name" {...field} />
               </FormControl>
               <FormDescription>
                 This is the name that will be displayed on your profile and in
diff --git a/apps/www/app/examples/forms/appearance/appearance-form.tsx b/apps/www/app/examples/forms/appearance/appearance-form.tsx
index 21229028f8..99ca947ab7 100644
--- a/apps/www/app/examples/forms/appearance/appearance-form.tsx
+++ b/apps/www/app/examples/forms/appearance/appearance-form.tsx
@@ -59,7 +59,7 @@ export function AppearanceForm() {
         <FormField
           control={form.control}
           name="font"
-          render={() => (
+          render={({ field }) => (
             <FormItem>
               <FormLabel>Font</FormLabel>
               <div className="relative w-max">
@@ -69,7 +69,7 @@ export function AppearanceForm() {
                       buttonVariants({ variant: "outline" }),
                       "w-[200px] appearance-none bg-transparent font-normal"
                     )}
-                    {...form.register("font")}
+                    {...field}
                   >
                     <option value="inter">Inter</option>
                     <option value="manrope">Manrope</option>
diff --git a/apps/www/app/examples/forms/profile-form.tsx b/apps/www/app/examples/forms/profile-form.tsx
index ec94aa5251..1522f50c19 100644
--- a/apps/www/app/examples/forms/profile-form.tsx
+++ b/apps/www/app/examples/forms/profile-form.tsx
@@ -91,11 +91,11 @@ export function ProfileForm() {
         <FormField
           control={form.control}
           name="username"
-          render={() => (
+          render={({ field }) => (
             <FormItem>
               <FormLabel>Username</FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...form.register("username")} />
+                <Input placeholder="shadcn" {...field} />
               </FormControl>
               <FormDescription>
                 This is your public display name. It can be your real name or a
@@ -134,14 +134,14 @@ export function ProfileForm() {
         <FormField
           control={form.control}
           name="bio"
-          render={() => (
+          render={({ field }) => (
             <FormItem>
               <FormLabel>Bio</FormLabel>
               <FormControl>
                 <Textarea
                   placeholder="Tell us a little bit about yourself"
                   className="resize-none"
-                  {...form.register("bio")}
+                  {...field}
                 />
               </FormControl>
               <FormDescription>
diff --git a/apps/www/components/examples/input/react-hook-form.tsx b/apps/www/components/examples/input/react-hook-form.tsx
index cf4bc1142d..4e95caddd4 100644
--- a/apps/www/components/examples/input/react-hook-form.tsx
+++ b/apps/www/components/examples/input/react-hook-form.tsx
@@ -45,11 +45,11 @@ export function InputReactHookForm() {
         <FormField
           control={form.control}
           name="username"
-          render={() => (
+          render={({ field }) => (
             <FormItem>
               <FormLabel>Username</FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...form.register("username")} />
+                <Input placeholder="shadcn" {...field} />
               </FormControl>
               <FormDescription>
                 This is your public display name.
diff --git a/apps/www/components/examples/textarea/react-hook-form.tsx b/apps/www/components/examples/textarea/react-hook-form.tsx
index 2c2d743805..8992a19e32 100644
--- a/apps/www/components/examples/textarea/react-hook-form.tsx
+++ b/apps/www/components/examples/textarea/react-hook-form.tsx
@@ -54,14 +54,14 @@ export function TextareaReactHookForm() {
         <FormField
           control={form.control}
           name="bio"
-          render={() => (
+          render={({ field }) => (
             <FormItem>
               <FormLabel>Bio</FormLabel>
               <FormControl>
                 <Textarea
                   placeholder="Tell us a little bit about yourself"
                   className="resize-none"
-                  {...form.register("bio")}
+                  {...field}
                 />
               </FormControl>
               <FormDescription>
diff --git a/apps/www/content/docs/forms/react-hook-form.mdx b/apps/www/content/docs/forms/react-hook-form.mdx
index 548616ddc8..5d052411d2 100644
--- a/apps/www/content/docs/forms/react-hook-form.mdx
+++ b/apps/www/content/docs/forms/react-hook-form.mdx
@@ -58,11 +58,11 @@ const form = useForm()
 <FormField
   control={form.control}
   name="username"
-  render={() => (
+  render={({ field }) => (
     <FormItem>
       <FormLabel>Username</FormLabel>
       <FormControl>
-        <Input placeholder="shadcn" {...form.register("username")} />
+        <Input placeholder="shadcn" {...field} />
       </FormControl>
       <FormDescription>This is your public display name.</FormDescription>
       <FormMessage />
@@ -181,7 +181,7 @@ export function ProfileForm() {
             <FormItem>
               <FormLabel>Username</FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...form.register("username")} />
+                <Input placeholder="shadcn" {...field} />
               </FormControl>
               <FormDescription>
                 This is your public display name.