From c50f13862b7c7611a6c8f03fd983c19a4c013bd0 Mon Sep 17 00:00:00 2001
From: jsun969 <i@jsun.lol>
Date: Fri, 16 Feb 2024 17:25:32 +1030
Subject: [PATCH] fix: form field isn't controlled

---
 src/app/(account)/join/steps/StepTwo.tsx | 13 +++----------
 src/components/Field.tsx                 |  4 +---
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx
index 1ad9077f..c99a1aae 100644
--- a/src/app/(account)/join/steps/StepTwo.tsx
+++ b/src/app/(account)/join/steps/StepTwo.tsx
@@ -44,17 +44,10 @@ export default function StepTwo() {
     });
 
     const { user } = useUser();
-    // Fetch user's profile information on component mount
     useEffect(() => {
-        // Check if user profile data exists
-        if (user && user.primaryEmailAddress && user.fullName) {
-            // Split the full name into first and last names
-            const [firstName, lastName] = user.fullName.split(' ');
-            // Set the first and last names in the state
-            form.setValue('firstName', firstName);
-            form.setValue('lastName', lastName);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if (!user) return;
+        form.setValue('firstName', String(user.firstName));
+        form.setValue('lastName', String(user.lastName));
     }, [user]);
 
     const { nextStep } = useJoinUsStep();
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
index c73c66b6..48041c45 100644
--- a/src/components/Field.tsx
+++ b/src/components/Field.tsx
@@ -10,7 +10,6 @@ export interface FieldProps {
     type?: 'text' | 'password' | 'select' | 'checkbox';
     options?: readonly string[] | string[];
     placeholder?: string;
-    defaultValue?: string;
 }
 
 const Field = ({
@@ -21,7 +20,6 @@ const Field = ({
     type = 'text',
     options = [],
     placeholder,
-    defaultValue,
 }: FieldProps) => {
     const [showPassword, setShowPassword] = useState(false);
 
@@ -71,7 +69,7 @@ const Field = ({
                         id={label.toLowerCase()}
                         name={label.toLowerCase()}
                         type={showPassword ? 'text' : type}
-                        defaultValue={defaultValue}
+                        value={value}
                         className="mt-1 w-full rounded-none border border-gray-300 px-3 py-2 text-grey"
                     />
                     {type === 'password' && (