feat: hook autofocus first input

components/Account/ChangePassword.tsx

@@ -83,7 +83,7 @@ export default function ChangePassword ({ toggleChangePassword }: IProps): React
       {success !== '' && <div className={style.success_message}>{success}</div> }
       <form onSubmit={(e) => { void handleSubmit(onSubmit)(e) }} method='post'>
         <label htmlFor='oldPassword'>Old password</label>
-        <input {...register('oldPassword')} type='password' id='oldPassword' name='oldPassword' required />
+        <input {...register('oldPassword')} type='password' id='oldPassword' name='oldPassword' required autoFocus/>
 
         <label htmlFor='newPassword'>New password</label>
         <input {...register('newPassword')} type='password' id='newPassword' name='newPassword' required />

components/Organization/UpdateOrganization.tsx

@@ -53,6 +53,7 @@ const UpdateOrganization = ({ user, setError, setOrg, setOrgEdit }: IProps): JSX
         placeholder="Enter the new name for your organization."
         required
         className={style.text_input}
+        autoFocus
       />
         <button className={style.add_btn} onClick={() => (false)}>
           Update

components/Paybutton/EditButtonForm.tsx

@@ -78,7 +78,7 @@ export default function EditButtonForm ({ paybutton, refreshPaybutton }: IProps)
             <div className={style.form_ctn}>
               <form onSubmit={(e) => { void handleSubmit(onSubmit)(e) }} method='post'>
                 <label htmlFor='name'>Name*</label>
-                <input {...register('name')} type='text' id='name' name='name' placeholder={paybutton.name} value={name} onChange={(e) => { setValue('name', e.target.value); setName(e.target.value) }} />
+                <input {...register('name')} type='text' id='name' name='name' placeholder={paybutton.name} value={name} onChange={(e) => { setValue('name', e.target.value); setName(e.target.value) }} autoFocus/>
                 <label className={style.labelMargin} htmlFor='addresses'>
                   Addresses*
                 </label>

components/Paybutton/PaybuttonForm.tsx

@@ -62,7 +62,7 @@ export default function PaybuttonForm ({ onSubmit, paybuttons, wallets, error }:
                 method="post"
               >
                 <label htmlFor='name'>Name*</label>
-                <input {...register('name')} type='text' id='name' name='name' placeholder="The unique name of your button" required />
+                <input {...register('name')} type='text' id='name' name='name' placeholder="The unique name of your button" required autoFocus/>
                 <label htmlFor='wallet'>Wallet*</label>
                 <select {...register('walletId')} required>
                   {walletOptions.map((w) =>

components/Wallet/EditWalletForm.tsx

@@ -93,6 +93,7 @@ export default function EditWalletForm ({ wallet, userAddresses, refreshWalletLi
                     id='name'
                     name='name'
                     placeholder={wallet.name}
+                    autoFocus
                   />
                   <h4>Addresses</h4>
                   <div className={style.buttonlist_ctn}>

components/Wallet/WalletForm.tsx

@@ -83,6 +83,7 @@ export default function WalletForm ({ userAddresses, refreshWalletList, userId,
                     type='text'
                     id='name'
                     name='name'
+                    autoFocus
                   />
 
                   <h4>Select Buttons</h4>