diff --git a/src/components/SubStepForms/RegistrationNumberStep.tsx b/src/components/SubStepForms/RegistrationNumberStep.tsx index 1105d7e2da9b..84397e448858 100644 --- a/src/components/SubStepForms/RegistrationNumberStep.tsx +++ b/src/components/SubStepForms/RegistrationNumberStep.tsx @@ -2,12 +2,11 @@ import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import type {FormInputErrors, FormOnyxKeys, FormOnyxValues} from '@components/Form/types'; import Icon from '@components/Icon'; -import type {AnimatedTextInputRef} from '@components/RNTextInput'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import TextLink from '@components/TextLink'; -import useDelayedAutoFocus from '@hooks/useDelayedAutoFocus'; +import useAutoFocusInput from '@hooks/useAutoFocusInput'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import type {SubPageProps} from '@hooks/useSubPage/types'; @@ -20,7 +19,7 @@ import CONST from '@src/CONST'; import type {Country} from '@src/CONST'; import type {OnyxFormValuesMapping} from '@src/ONYXKEYS'; -import React, {useRef} from 'react'; +import React from 'react'; import {View} from 'react-native'; type RegistrationNumberStepProps = SubPageProps & { @@ -49,8 +48,7 @@ function RegistrationNumberStepImpl({formID, onSubmit, inputID, defaultValue, is const styles = useThemeStyles(); const theme = useTheme(); const icons = useMemoizedLazyExpensifyIcons(['QuestionMark']); - const internalInputRef = useRef(null); - useDelayedAutoFocus(internalInputRef, shouldDelayAutoFocus); + const {inputCallbackRef} = useAutoFocusInput(); const helpLink = CONST.REGISTRATION_NUMBER_HELP_URL[country as keyof typeof CONST.REGISTRATION_NUMBER_HELP_URL] ?? CONST.REGISTRATION_NUMBER_HELP_URL.EU; @@ -84,7 +82,7 @@ function RegistrationNumberStepImpl({formID, onSubmit, inputID, defaultValue, is defaultValue={defaultValue} shouldSaveDraft={!isEditing} autoFocus={!shouldDelayAutoFocus} - ref={internalInputRef} + ref={shouldDelayAutoFocus ? inputCallbackRef : undefined} forwardedFSClass={CONST.FULLSTORY.CLASS.MASK} /> diff --git a/src/components/SubStepForms/SingleFieldStep.tsx b/src/components/SubStepForms/SingleFieldStep.tsx index 11ebeb59f7de..1cc53dacdce7 100644 --- a/src/components/SubStepForms/SingleFieldStep.tsx +++ b/src/components/SubStepForms/SingleFieldStep.tsx @@ -2,11 +2,10 @@ import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import PatriotActLink from '@components/PatriotActLink'; -import type {AnimatedTextInputRef} from '@components/RNTextInput'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; -import useDelayedAutoFocus from '@hooks/useDelayedAutoFocus'; +import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import type {SubPageProps} from '@hooks/useSubPage/types'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -20,7 +19,7 @@ import type {OnyxFormValuesMapping} from '@src/ONYXKEYS'; import type {InputModeOptions} from 'react-native'; -import React, {useRef} from 'react'; +import React from 'react'; import {View} from 'react-native'; type SingleFieldStepProps = SubPageProps & @@ -87,8 +86,7 @@ function SingleFieldStep({ }: SingleFieldStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const internalInputRef = useRef(null); - useDelayedAutoFocus(internalInputRef, shouldDelayAutoFocus); + const {inputCallbackRef} = useAutoFocusInput(); return ( ({ disabled={disabled} placeholder={placeholder} autoFocus={!shouldDelayAutoFocus} - ref={internalInputRef} + ref={shouldDelayAutoFocus ? inputCallbackRef : undefined} forwardedFSClass={forwardedFSClass} /> diff --git a/src/hooks/useDelayedAutoFocus.ts b/src/hooks/useDelayedAutoFocus.ts deleted file mode 100644 index b355605bc015..000000000000 --- a/src/hooks/useDelayedAutoFocus.ts +++ /dev/null @@ -1,35 +0,0 @@ -import CONST from '@src/CONST'; - -import type {RefObject} from 'react'; - -import {useFocusEffect} from '@react-navigation/native'; -import {useCallback, useRef} from 'react'; - -import useIsInLandscapeMode from './useIsInLandscapeMode'; - -function useDelayedAutoFocus(ref: RefObject<{focus: () => void} | null>, shouldDelayAutoFocus: boolean) { - const focusTimeoutRef = useRef(null); - const isInLandscapeMode = useIsInLandscapeMode(); - - useFocusEffect( - useCallback(() => { - if (!shouldDelayAutoFocus || isInLandscapeMode) { - return undefined; - } - - focusTimeoutRef.current = setTimeout(() => { - ref.current?.focus(); - }, CONST.ANIMATED_TRANSITION); - - return () => { - const timeout = focusTimeoutRef.current; - if (timeout) { - clearTimeout(timeout); - focusTimeoutRef.current = null; - } - }; - }, [shouldDelayAutoFocus, ref, isInLandscapeMode]), - ); -} - -export default useDelayedAutoFocus;