From 7daa8189963c8d4e40d5ece98c9df9d72e917376 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Fri, 5 Mar 2021 00:44:27 +0100
Subject: [PATCH] Use default value instead of value

---
 src/lib/components/Login.tsx    | 17 +++++------------
 src/lib/components/Register.tsx | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Login.tsx b/src/lib/components/Login.tsx
index bf0a114e..baabac92 100644
--- a/src/lib/components/Login.tsx
+++ b/src/lib/components/Login.tsx
@@ -44,13 +44,6 @@ export const Login = memo((props: LoginProps) => {
         (setIsLoginButtonDisabled(true), true)
     );
 
-    const [ usernameInputValue, setUsernameInputValue ] = useState(login.username ?? '');
-
-    const onUsernameChange = useConstCallback(
-        (event: React.ChangeEvent<HTMLInputElement>)=> 
-            setUsernameInputValue(event.target.value)
-    );
-
     return (
         <Template
             displayInfo={social.displayInfo}
@@ -88,9 +81,8 @@ export const Login = memo((props: LoginProps) => {
                                             id="username"
                                             className={cx(kcProperties.kcInputClass)}
                                             name="username"
-                                            value={usernameInputValue}
+                                            defaultValue={login.username ?? ''}
                                             type="text"
-                                            onChange={onUsernameChange}
                                             {...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autocomplete": "off" })}
                                         />
                                     </div>
@@ -103,13 +95,14 @@ export const Login = memo((props: LoginProps) => {
                                     <div className={cx(kcProperties.kcFormGroupClass, kcProperties.kcFormSettingClass)}>
                                         <div id="kc-form-options">
                                             {
-                                                (
-                                                    realm.rememberMe &&
+                                                ( 
+                                                    realm.rememberMe && 
                                                     !usernameEditDisabled
                                                 ) &&
                                                 <div className="checkbox">
                                                     <label>
-                                                        <input tabIndex={3} id="rememberMe" name="rememberMe" type="checkbox" {...(login.rememberMe ? { "checked": true } : {})}> {t("rememberMe")}</input>
+                                                        <input tabIndex={3} id="rememberMe" name="rememberMe" type="checkbox" {...(login.rememberMe ? { "checked": true } : {})}/> 
+                                                        {t("rememberMe")}
                                                     </label>
                                                 </div>
                                             }
diff --git a/src/lib/components/Register.tsx b/src/lib/components/Register.tsx
index 03563961..3e599688 100644
--- a/src/lib/components/Register.tsx
+++ b/src/lib/components/Register.tsx
@@ -53,7 +53,7 @@ export const Register = memo((props: RegisterPageProps) => {
                         </div>
                         <div className={cx(kcProperties.kcInputWrapperClass)}>
                             <input type="text" id="firstName" className={cx(kcProperties.kcInputClass)} name="firstName"
-                                value={register.formData.firstName ?? ""}
+                                defaultValue={register.formData.firstName ?? ""}
                             />
                         </div>
                     </div>
@@ -64,7 +64,7 @@ export const Register = memo((props: RegisterPageProps) => {
                         </div>
                         <div className={cx(kcProperties.kcInputWrapperClass)}>
                             <input type="text" id="lastName" className={cx(kcProperties.kcInputClass)} name="lastName"
-                                value={register.formData.lastName ?? ""}
+                                defaultValue={register.formData.lastName ?? ""}
                             />
                         </div>
                     </div>
@@ -75,7 +75,7 @@ export const Register = memo((props: RegisterPageProps) => {
                         </div>
                         <div className={cx(kcProperties.kcInputWrapperClass)}>
                             <input type="text" id="email" className={cx(kcProperties.kcInputClass)} name="email"
-                                value={register.formData.email ?? ""} autoComplete="email"
+                                defaultValue={register.formData.email ?? ""} autoComplete="email"
                             />
                         </div>
                     </div>
@@ -89,7 +89,7 @@ export const Register = memo((props: RegisterPageProps) => {
                             </div>
                             <div className={cx(kcProperties.kcInputWrapperClass)}>
                                 <input type="text" id="username" className={cx(kcProperties.kcInputClass)} name="username"
-                                    value={register.formData.username ?? ""} autoComplete="username" />
+                                    defaultValue={register.formData.username ?? ""} autoComplete="username" />
                             </div>
                         </div >
 
@@ -139,7 +139,7 @@ export const Register = memo((props: RegisterPageProps) => {
 
                         <div id="kc-form-buttons" className={cx(kcProperties.kcFormButtonsClass)}>
                             <input className={cx(kcProperties.kcButtonClass, kcProperties.kcButtonPrimaryClass, kcProperties.kcButtonBlockClass, kcProperties.kcButtonLargeClass)} type="submit"
-                                value={tStr("doRegister")} />
+                                defaultValue={tStr("doRegister")} />
                         </div>
                     </div>
                 </form >
@@ -149,3 +149,8 @@ export const Register = memo((props: RegisterPageProps) => {
 });
 
 
+
+
+
+// JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+