fix(wallet): autofocus first field in forms (#2898)

kadena-community · Mar 7, 2025 · 2822382 · 2822382
1 parent 05168d0
commit 2822382
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/warm-weeks-wash.md b/.changeset/warm-weeks-wash.md
@@ -0,0 +1,5 @@
+---
+'@kadena/dev-wallet': patch
+---
+
+autofocus the first field of forms
diff --git a/packages/apps/dev-wallet/src/Components/Assets/AddTokenForm.tsx b/packages/apps/dev-wallet/src/Components/Assets/AddTokenForm.tsx
@@ -157,6 +157,7 @@ export function AddTokenForm({
               <Heading variant={'h5'}>Add New Token</Heading>
               <Stack width="100%" flexDirection="column" gap="md">
                 <TextField
+                  autoFocus
                   label="SmartContract"
                   {...register('contract', { required: true })}
                 />

diff --git a/packages/apps/dev-wallet/src/Components/UnlockPrompt/UnlockPrompt.tsx b/packages/apps/dev-wallet/src/Components/UnlockPrompt/UnlockPrompt.tsx
@@ -72,6 +72,7 @@ export const UnlockPrompt: React.FC<{
           </Text>
           {showPassword && (
             <TextField
+              autoFocus
               data-testid="passwordField"
               type="password"
               {...register('password')}

diff --git a/packages/apps/dev-wallet/src/pages/create-profile/create-profile.tsx b/packages/apps/dev-wallet/src/pages/create-profile/create-profile.tsx
@@ -225,6 +225,7 @@ export function CreateProfile() {
                         <TextField
                           id="profileName"
                           type="text"
+                          autoFocus
                           defaultValue={field.value}
                           value={field.value}
                           onChange={field.onChange}
@@ -292,6 +293,7 @@ export function CreateProfile() {
                   id="password"
                   type="password"
                   label="Password"
+                  autoFocus
                   defaultValue={getValues('password')}
                   // react-hook-form uses uncontrolled elements;
                   // and because we add and remove the fields we need to add key to prevent confusion for react

diff --git a/packages/apps/dev-wallet/src/pages/networks/Components/NetworkForm.tsx b/packages/apps/dev-wallet/src/pages/networks/Components/NetworkForm.tsx
@@ -147,6 +147,7 @@ export function NetworkForm({
         <RightAsideContent>
           <Stack width="100%" flexDirection="column" gap="md">
             <TextField
+              autoFocus={!network.uuid}
               label="Network ID"
               aria-label="networkId"
               type="text"

diff --git a/packages/apps/dev-wallet/src/pages/settings/change-password/change-password.tsx b/packages/apps/dev-wallet/src/pages/settings/change-password/change-password.tsx
@@ -197,6 +197,7 @@ export function ChangePassword() {
                     id="password"
                     type="password"
                     label="Password"
+                    autoFocus
                     defaultValue={getValues('password')}
                     // react-hook-form uses uncontrolled elements;
                     // and because we add and remove the fields we need to add key to prevent confusion for react

diff --git a/packages/apps/dev-wallet/src/pages/settings/components/ProfileNameColorForm.tsx b/packages/apps/dev-wallet/src/pages/settings/components/ProfileNameColorForm.tsx
@@ -49,6 +49,7 @@ export function ProfileNameColorForm({ isOpen }: { isOpen: boolean }) {
         <RightAsideContent>
           <Stack width="100%" flexDirection="column" gap="md">
             <TextField
+              autoFocus
               label="Profile Name"
               placeholder="Enter profile name"
               defaultValue={profile?.name}

diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -247,6 +247,7 @@ export function SignatureBuilder() {
       <Stack flexDirection={'column'} gap={'md'} width="100%">
         <Heading as="h4">Paste SigData, CommandSigData, or Payload</Heading>
         <textarea
+          autoFocus
           value={input}
           className={classNames(codeArea)}
           onChange={(e) => {

diff --git a/packages/apps/dev-wallet/src/pages/unlock-profile/unlock-profile.tsx b/packages/apps/dev-wallet/src/pages/unlock-profile/unlock-profile.tsx
@@ -92,6 +92,7 @@ export function UnlockProfile({ origin }: { origin: string }) {
           <div className={passwordContainer}>
             <TextField
               id="password"
+              autoFocus
               type="password"
               placeholder="Password"
               aria-label="Password"