Merge pull request #781 from eisbuk/feature/focus-login-fields

Auto focus particular fields for each login step (for all flows)
eisbuk · Jul 11, 2023 · 4d6b34c · 4d6b34c
2 parents a4ce928 + 9aab6dc
commit 4d6b34c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/client/src/react-redux-firebase-auth/ui/flows/EmailFlow.tsx b/packages/client/src/react-redux-firebase-auth/ui/flows/EmailFlow.tsx
@@ -203,15 +203,15 @@ const titleLookup = {
  */
 const fieldsLookup: AuthTextFieldLookup<EmailAuthStep> = {
   [EmailAuthStep.SignInWithEmail]: [
-    { name: "email", label: "Email", type: "email" },
+    { name: "email", label: "Email", type: "email", autoFocus: true },
   ],
   [EmailAuthStep.SignInWithEmailPassword]: [
     { name: "email", label: "Email", type: "email" },
-    { name: "password", label: "Password", type: "password" },
+    { name: "password", label: "Password", type: "password", autoFocus: true },
   ],
   [EmailAuthStep.CreateAccountEmailPassword]: [
     { name: "email", label: "Email", type: "email" },
-    { name: "password", label: "Password", type: "password" },
+    { name: "password", label: "Password", type: "password", autoFocus: true },
   ],
   [EmailAuthStep.RecoverEmailPassword]: [
     { name: "email", label: "Email", type: "email" },

diff --git a/packages/client/src/react-redux-firebase-auth/ui/flows/EmailLinkFlow.tsx b/packages/client/src/react-redux-firebase-auth/ui/flows/EmailLinkFlow.tsx
@@ -205,7 +205,9 @@ const fieldsLookup: AuthTextFieldLookup<EmailLinkAuthStep> = Object.values(
       ? {
           ...acc,
           // all auth steps except for `EmailLinkAuthStep.CheckSignInEmail` have the same (email) input field
-          [authStep]: [{ name: "email", label: "Email", type: "email" }],
+          [authStep]: [
+            { name: "email", label: "Email", type: "email", autoFocus: true },
+          ],
         }
       : acc,
   {}

diff --git a/packages/client/src/react-redux-firebase-auth/ui/flows/PhoneFlow.tsx b/packages/client/src/react-redux-firebase-auth/ui/flows/PhoneFlow.tsx
@@ -200,6 +200,7 @@ const fieldsLookup: AuthTextFieldLookup<PhoneAuthStep> = {
       label: "Phone",
       type: "tel",
       inputMode: "tel",
+      autoFocus: true,
     },
   ],
   [PhoneAuthStep.EnterSMSCode]: [
@@ -209,6 +210,7 @@ const fieldsLookup: AuthTextFieldLookup<PhoneAuthStep> = {
       label: "SMS Code",
       type: "text",
       inputMode: "numeric",
+      autoFocus: true,
     },
   ],
 };