From 0fa453316814dd9778a64fca10b472077340c8f6 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Sun, 2 Apr 2023 23:47:42 +0600
Subject: [PATCH] fix: uncontrolled to controlled form

---
 src/components/Login/EmailLoginForm.tsx       | 4 ++--
 src/components/Login/EmailSignupForm.tsx      | 6 +++---
 src/components/Profile/ForgotPasswordForm.tsx | 2 +-
 src/components/Profile/ResetPasswordForm.tsx  | 4 ++--
 src/components/Setting/ChangePasswordForm.tsx | 6 +++---
 src/components/Setting/UpdateProfileForm.tsx  | 8 ++++----
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Login/EmailLoginForm.tsx b/src/components/Login/EmailLoginForm.tsx
index ef418ce87..f0c9e156f 100644
--- a/src/components/Login/EmailLoginForm.tsx
+++ b/src/components/Login/EmailLoginForm.tsx
@@ -132,7 +132,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         className="block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="john@example.com"
         value={email}
-        onChange={(e) => setEmail(String((e.target as any).value))}
+        onInput={(e) => setEmail(String((e.target as any).value))}
       />
       <label htmlFor="password" className="sr-only">
         Password
@@ -146,7 +146,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Enter you password"
         value={password}
-        onChange={(e) => setPassword(String((e.target as any).value))}
+        onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
       {message && (
diff --git a/src/components/Login/EmailSignupForm.tsx b/src/components/Login/EmailSignupForm.tsx
index bc93bd977..62ac00889 100644
--- a/src/components/Login/EmailSignupForm.tsx
+++ b/src/components/Login/EmailSignupForm.tsx
@@ -65,7 +65,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         className="block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="John Doe"
         value={name}
-        onChange={(e) => setName(String((e.target as any).value))}
+        onInput={(e) => setName(String((e.target as any).value))}
       />
       <label htmlFor="email" className="sr-only">
         Email address
@@ -79,7 +79,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="john@example.com"
         value={email}
-        onChange={(e) => setEmail(String((e.target as any).value))}
+        onInput={(e) => setEmail(String((e.target as any).value))}
       />
       <label htmlFor="password" className="sr-only">
         Password
@@ -93,7 +93,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Enter you password"
         value={password}
-        onChange={(e) => setPassword(String((e.target as any).value))}
+        onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
       {error && (
diff --git a/src/components/Profile/ForgotPasswordForm.tsx b/src/components/Profile/ForgotPasswordForm.tsx
index 690c10a6c..c7a5c9293 100644
--- a/src/components/Profile/ForgotPasswordForm.tsx
+++ b/src/components/Profile/ForgotPasswordForm.tsx
@@ -83,7 +83,7 @@ export default function ForgotPasswordForm() {
         required
         placeholder="john@example.com"
         value={email}
-        onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
+        onInput={(e) => setEmail((e.target as HTMLInputElement).value)}
       />
 
       {message && (
diff --git a/src/components/Profile/ResetPasswordForm.tsx b/src/components/Profile/ResetPasswordForm.tsx
index 6b0f09b7a..272d78513 100644
--- a/src/components/Profile/ResetPasswordForm.tsx
+++ b/src/components/Profile/ResetPasswordForm.tsx
@@ -85,7 +85,7 @@ export default function ResetPasswordForm() {
         minLength={6}
         placeholder="Enter a new password"
         value={password}
-        onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
+        onInput={(e) => setPassword((e.target as HTMLInputElement).value)}
       />
 
       <label
@@ -103,7 +103,7 @@ export default function ResetPasswordForm() {
         minLength={6}
         placeholder="Confirm your new password"
         value={passwordConfirm}
-        onChange={(e) =>
+        onInput={(e) =>
           setPasswordConfirm((e.target as HTMLInputElement).value)
         }
       />
diff --git a/src/components/Setting/ChangePasswordForm.tsx b/src/components/Setting/ChangePasswordForm.tsx
index 220666346..56ea5cd49 100644
--- a/src/components/Setting/ChangePasswordForm.tsx
+++ b/src/components/Setting/ChangePasswordForm.tsx
@@ -134,7 +134,7 @@ export default function ChangePasswordForm() {
               minLength={6}
               placeholder="Current password"
               value={currentPassword}
-              onChange={(e) =>
+              onInput={(e) =>
                 setCurrentPassword((e.target as HTMLInputElement).value)
               }
             />
@@ -156,7 +156,7 @@ export default function ChangePasswordForm() {
             minLength={6}
             placeholder="New password"
             value={newPassword}
-            onChange={(e) =>
+            onInput={(e) =>
               setNewPassword((e.target as HTMLInputElement).value)
             }
           />
@@ -177,7 +177,7 @@ export default function ChangePasswordForm() {
             minLength={6}
             placeholder="New password confirm"
             value={newPasswordConfirmation}
-            onChange={(e) =>
+            onInput={(e) =>
               setNewPasswordConfirmation((e.target as HTMLInputElement).value)
             }
           />
diff --git a/src/components/Setting/UpdateProfileForm.tsx b/src/components/Setting/UpdateProfileForm.tsx
index c37fdf5e3..9ec427b56 100644
--- a/src/components/Setting/UpdateProfileForm.tsx
+++ b/src/components/Setting/UpdateProfileForm.tsx
@@ -134,7 +134,7 @@ export default function UpdateProfileForm() {
             required
             placeholder="John Doe"
             value={name}
-            onChange={(e) => setName((e.target as HTMLInputElement).value)}
+            onInput={(e) => setName((e.target as HTMLInputElement).value)}
           />
         </div>
         <div className="flex w-full flex-col">
@@ -167,7 +167,7 @@ export default function UpdateProfileForm() {
             className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://github.com/username"
             value={github}
-            onChange={(e) => setGithub((e.target as HTMLInputElement).value)}
+            onInput={(e) => setGithub((e.target as HTMLInputElement).value)}
           />
         </div>
         <div className="flex w-full flex-col">
@@ -181,7 +181,7 @@ export default function UpdateProfileForm() {
             className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://www.linkedin.com/in/username/"
             value={linkedin}
-            onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
+            onInput={(e) => setLinkedin((e.target as HTMLInputElement).value)}
           />
         </div>
 
@@ -196,7 +196,7 @@ export default function UpdateProfileForm() {
             className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://example.com"
             value={website}
-            onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
+            onInput={(e) => setWebsite((e.target as HTMLInputElement).value)}
           />
         </div>