Adds config option to disable auto focus of fields

packages/react/src/components/authentication/AuthFlow.tsx

@@ -40,7 +40,11 @@ import ErrorPopup from '../ui/errors/ErrorPopup';
 import { FreemiumBadge } from '../ui/FreemiumBadge';
 import { LoadingSpinner } from '../ui/LoadingSpinner';
 
-export const AuthFlow: FC = () => {
+type Props = {
+  initialAutoFocus: boolean;
+};
+
+export const AuthFlow: FC<Props> = ({ initialAutoFocus }) => {
   const { isDevMode, customerSupportEmail } = useErrorHandling();
   const { currentScreen, initState } = useFlowHandler();
   const [loading, setLoading] = useState(false);
@@ -74,9 +78,19 @@ export const AuthFlow: FC = () => {
 
     switch (currentScreen.block.type) {
       case BlockTypes.LoginInit:
-        return <LoginInit block={currentScreen.block as LoginInitBlock} />;
+        return (
+          <LoginInit
+            block={currentScreen.block as LoginInitBlock}
+            initialAutoFocus={initialAutoFocus}
+          />
+        );
       case BlockTypes.SignupInit:
-        return <SignupInit block={currentScreen.block as SignupInitBlock} />;
+        return (
+          <SignupInit
+            block={currentScreen.block as SignupInitBlock}
+            initialAutoFocus={initialAutoFocus}
+          />
+        );
       case BlockTypes.EmailVerify:
         switch (currentScreen.screen) {
           case ScreenNames.EmailLinkSent:

packages/react/src/components/authentication/login-init/LoginForm.tsx

@@ -11,9 +11,16 @@ export interface LoginFormProps {
   socialLoadingInProgress: boolean | undefined;
   loading: boolean;
   setLoading: (loading: boolean) => void;
+  initialAutoFocus: boolean;
 }
 
-export const LoginForm: FC<LoginFormProps> = ({ block, loading, socialLoadingInProgress, setLoading }) => {
+export const LoginForm: FC<LoginFormProps> = ({
+  block,
+  loading,
+  socialLoadingInProgress,
+  setLoading,
+  initialAutoFocus,
+}) => {
   const { t } = useTranslation('translation', { keyPrefix: `login.login-init.login-init` });
 
   const [textField, setTextField] = useState<TextFieldWithError | null>(null);
@@ -33,10 +40,13 @@ export const LoginForm: FC<LoginFormProps> = ({ block, loading, socialLoadingInP
 
     setTextField({ value: block.data.loginIdentifier, translatedError: block.data.loginIdentifierError });
 
-    if (textFieldRef.current) {
+    if (!textFieldRef.current) {
+      return;
+    }
+    if (initialAutoFocus) {
       textFieldRef.current.focus();
-      textFieldRef.current.value = block.data.loginIdentifier ? block.data.loginIdentifier : '';
     }
+    textFieldRef.current.value = block.data.loginIdentifier ? block.data.loginIdentifier : '';
   }, [block]);
 
   const submitButtonText = useMemo(() => t('button_submit'), [t]);
@@ -73,7 +83,7 @@ export const LoginForm: FC<LoginFormProps> = ({ block, loading, socialLoadingInP
           initialCountry='US'
           initialPhoneNumber={textField?.value}
           errorMessage={textField?.translatedError}
-          autoFocus={true}
+          autoFocus={initialAutoFocus}
           onChange={setPhoneInput}
         />
       );
@@ -94,7 +104,7 @@ export const LoginForm: FC<LoginFormProps> = ({ block, loading, socialLoadingInP
           name='username'
           type='username'
           autoComplete='username webauthn'
-          autoFocus={true}
+          autoFocus={initialAutoFocus}
           {...commonProps}
         />
       );
@@ -108,7 +118,7 @@ export const LoginForm: FC<LoginFormProps> = ({ block, loading, socialLoadingInP
         name='email'
         type='email'
         autoComplete='username webauthn'
-        autoFocus={true}
+        autoFocus={initialAutoFocus}
         {...commonProps}
       />
     );

packages/react/src/screens/auth-blocks/login-init/LoginInit.tsx

@@ -8,7 +8,7 @@ import { Header, SecondaryButton, SocialLoginButtons, SubHeader, Text } from '..
 import { LastIdentifier } from '../../../components/authentication/login-init/LastIdentifier';
 import { LoginForm } from '../../../components/authentication/login-init/LoginForm';
 
-export const LoginInit = ({ block }: { block: LoginInitBlock }) => {
+export const LoginInit = ({ block, initialAutoFocus }: { block: LoginInitBlock; initialAutoFocus: boolean }) => {
   const { t } = useTranslation('translation', { keyPrefix: `login.login-init.login-init` });
   const [loading, setLoading] = useState<boolean>(false);
   const [socialLoadingInProgress, setSocialLoadingInProgress] = useState<boolean | undefined>(undefined);
@@ -105,6 +105,7 @@ export const LoginInit = ({ block }: { block: LoginInitBlock }) => {
           loading={loading}
           socialLoadingInProgress={socialLoadingInProgress}
           setLoading={setLoading}
+          initialAutoFocus={initialAutoFocus}
         />
       )}
       <SocialLoginButtons

packages/react/src/screens/auth-blocks/signup-init/SignupInit.tsx

@@ -1,8 +1,7 @@
 import type { LoginIdentifiers, SignupInitBlock } from '@corbado/shared-ui';
 import type { SocialProviderType } from '@corbado/web-core';
 import type { FormEvent, MutableRefObject } from 'react';
-import { useEffect } from 'react';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PrimaryButton } from '../../../components/ui/buttons/PrimaryButton';
@@ -14,7 +13,7 @@ import { Header } from '../../../components/ui/typography/Header';
 import { SubHeader } from '../../../components/ui/typography/SubHeader';
 import { Text } from '../../../components/ui/typography/Text';
 
-export const SignupInit = ({ block }: { block: SignupInitBlock }) => {
+export const SignupInit = ({ block, initialAutoFocus }: { block: SignupInitBlock; initialAutoFocus: boolean }) => {
   const { t } = useTranslation('translation', { keyPrefix: `signup.signup-init.signup-init` });
 
   const [loading, setLoading] = useState<boolean>(false);
@@ -82,7 +81,7 @@ export const SignupInit = ({ block }: { block: SignupInitBlock }) => {
         ref.current.value = value || '';
       }
 
-      if (!hasFocusField.current) {
+      if (!hasFocusField.current && initialAutoFocus) {
         ref.current.focus();
         hasFocusField.current = true;
       }
@@ -98,7 +97,7 @@ export const SignupInit = ({ block }: { block: SignupInitBlock }) => {
   const userName = block.data.userName;
   const email = block.data.email;
   const phone = block.data.phone;
-  const foucsPhoneField = !!(phone && !email && !userName && !fullName);
+  const foucsPhoneField = !!(phone && !email && !userName && !fullName) && initialAutoFocus;
 
   if (foucsPhoneField) {
     hasFocusField.current = true;

packages/react/src/screens/core/CorbadoAuth.tsx

@@ -6,14 +6,19 @@ import React from 'react';
 import { AuthFlow } from '../../components';
 import FlowHandlerProvider from '../../contexts/FlowHandlerProvider';
 
-const CorbadoAuth: FC<CorbadoAuthConfig> = ({ onLoggedIn, handleNavigationEvents, initialBlock }) => {
+const CorbadoAuth: FC<CorbadoAuthConfig> = ({
+  onLoggedIn,
+  handleNavigationEvents,
+  initialBlock,
+  initialAutoFocus = true,
+}) => {
   return (
     <FlowHandlerProvider
       onLoggedIn={onLoggedIn}
       handleNavigationEvents={handleNavigationEvents}
       initialBlock={initialBlock as BlockTypes}
     >
-      <AuthFlow />
+      <AuthFlow initialAutoFocus={initialAutoFocus} />
     </FlowHandlerProvider>
   );
 };

packages/react/src/screens/core/Login.tsx

@@ -6,15 +6,20 @@ import React from 'react';
 import { AuthFlow } from '../../components';
 import FlowHandlerProvider from '../../contexts/FlowHandlerProvider';
 
-const Login: FC<CorbadoLoginConfig> = ({ handleNavigationEvents, onLoggedIn, navigateToSignUp }) => {
+const Login: FC<CorbadoLoginConfig> = ({
+  handleNavigationEvents,
+  onLoggedIn,
+  navigateToSignUp,
+  initialAutoFocus = true,
+}) => {
   return (
     <FlowHandlerProvider
       handleNavigationEvents={handleNavigationEvents}
       onLoggedIn={onLoggedIn}
       onChangeFlow={navigateToSignUp}
       initialFlowType={AuthType.Login}
     >
-      <AuthFlow />
+      <AuthFlow initialAutoFocus={initialAutoFocus} />
     </FlowHandlerProvider>
   );
 };

packages/react/src/screens/core/SignUp.tsx

@@ -6,15 +6,20 @@ import React from 'react';
 import { AuthFlow } from '../../components';
 import FlowHandlerProvider from '../../contexts/FlowHandlerProvider';
 
-const SignUp: FC<CorbadoSignUpConfig> = ({ handleNavigationEvents, onSignedUp, navigateToLogin }) => {
+const SignUp: FC<CorbadoSignUpConfig> = ({
+  handleNavigationEvents,
+  onSignedUp,
+  navigateToLogin,
+  initialAutoFocus = true,
+}) => {
   return (
     <FlowHandlerProvider
       handleNavigationEvents={handleNavigationEvents}
       onLoggedIn={onSignedUp}
       onChangeFlow={navigateToLogin}
       initialFlowType={AuthType.SignUp}
     >
-      <AuthFlow />
+      <AuthFlow initialAutoFocus={initialAutoFocus} />
     </FlowHandlerProvider>
   );
 };

packages/types/src/component.ts

@@ -33,6 +33,7 @@ export interface CorbadoAuthConfig {
   onLoggedIn: () => void;
   handleNavigationEvents?: boolean;
   initialBlock?: 'signup-init' | 'login-init';
+  initialAutoFocus?: boolean;
 }
 
 /**
@@ -46,6 +47,7 @@ export interface CorbadoSignUpConfig {
   onSignedUp: () => void;
   navigateToLogin?: () => void;
   handleNavigationEvents?: boolean;
+  initialAutoFocus?: boolean;
 }
 
 /**
@@ -59,4 +61,5 @@ export interface CorbadoLoginConfig {
   onLoggedIn: () => void;
   navigateToSignUp?: () => void;
   handleNavigationEvents?: boolean;
+  initialAutoFocus?: boolean;
 }