Merge pull request #59087 from margelo/chore/remove-should-delay-focus-prop-from-native-input

chore: remove shouldDelayFocus prop from text input

Author: mountiny

src/components/MagicCodeInput.tsx

@@ -6,8 +6,8 @@ import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Browser from '@libs/Browser';
-import * as ValidationUtils from '@libs/ValidationUtils';
+import {isMobileChrome, isMobileSafari} from '@libs/Browser';
+import {isNumeric} from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
 import FormHelpMessage from './FormHelpMessage';
 import Text from './Text';
@@ -28,9 +28,6 @@ type MagicCodeInputProps = {
     /** Should the input auto focus */
     autoFocus?: boolean;
 
-    /** Whether we should wait before focusing the TextInput, useful when using transitions  */
-    shouldDelayFocus?: boolean;
-
     /** Error text to display */
     errorText?: string;
 
@@ -78,7 +75,7 @@ const decomposeString = (value: string, length: number): string[] => {
     let arr = value
         .split('')
         .slice(0, length)
-        .map((v) => (ValidationUtils.isNumeric(v) ? v : CONST.MAGIC_CODE_EMPTY_CHAR));
+        .map((v) => (isNumeric(v) ? v : CONST.MAGIC_CODE_EMPTY_CHAR));
     if (arr.length < length) {
         arr = arr.concat(Array(length - arr.length).fill(CONST.MAGIC_CODE_EMPTY_CHAR));
     }
@@ -98,7 +95,6 @@ function MagicCodeInput(
         value = '',
         name = '',
         autoFocus = true,
-        shouldDelayFocus = false,
         errorText = '',
         shouldSubmitOnComplete = true,
         onChangeText: onChangeTextProp = () => {},
@@ -179,7 +175,7 @@ function MagicCodeInput(
     const validateAndSubmit = () => {
         const numbers = decomposeString(value, maxLength);
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        if (wasSubmitted || !shouldSubmitOnComplete || numbers.filter((n) => ValidationUtils.isNumeric(n)).length !== maxLength || isOffline) {
+        if (wasSubmitted || !shouldSubmitOnComplete || numbers.filter((n) => isNumeric(n)).length !== maxLength || isOffline) {
             return;
         }
         if (!wasSubmitted) {
@@ -226,7 +222,7 @@ function MagicCodeInput(
             shouldFocusLast.current = false;
             // TapGestureHandler works differently on mobile web and native app
             // On web gesture handler doesn't block interactions with textInput below so there is no need to run `focus()` manually
-            if (!Browser.isMobileChrome() && !Browser.isMobileSafari()) {
+            if (!isMobileChrome() && !isMobileSafari()) {
                 inputRef.current?.focus();
             }
             setInputAndIndex(index);
@@ -247,7 +243,7 @@ function MagicCodeInput(
      * might happen later than the next call to onChangeText).
      */
     const onChangeText = (textValue?: string) => {
-        if (!textValue?.length || !ValidationUtils.isNumeric(textValue)) {
+        if (!textValue?.length || !isNumeric(textValue)) {
             return;
         }
 
@@ -313,7 +309,7 @@ function MagicCodeInput(
                 return;
             }
 
-            const hasInputs = numbers.filter((n) => ValidationUtils.isNumeric(n)).length !== 0;
+            const hasInputs = numbers.filter((n) => isNumeric(n)).length !== 0;
 
             // Fill the array with empty characters if there are no inputs.
             if (focusedIndex === 0 && !hasInputs) {
@@ -408,7 +404,6 @@ function MagicCodeInput(
                             value={input}
                             hideFocusedState
                             autoComplete={input.length === 0 ? autoComplete : undefined}
-                            shouldDelayFocus={input.length === 0 && shouldDelayFocus}
                             keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                             onChangeText={onChangeText}
                             onKeyPress={onKeyPress}

src/components/PDFView/PDFPasswordForm.tsx

@@ -8,8 +8,7 @@ import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Browser from '@libs/Browser';
-import shouldDelayFocus from '@libs/shouldDelayFocus';
+import {getBrowser} from '@libs/Browser';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import PDFInfoMessage from './PDFInfoMessage';
@@ -121,7 +120,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid = false, shouldShowLoadin
                  * This is a workaround to bypass Safari's autofill odd behaviour.
                  * This tricks the browser not to fill the username somewhere else and still fill the password correctly.
                  */
-                autoComplete={Browser.getBrowser() === CONST.BROWSER.SAFARI ? 'username' : 'off'}
+                autoComplete={getBrowser() === CONST.BROWSER.SAFARI ? 'username' : 'off'}
                 autoCorrect={false}
                 textContentType="password"
                 onChangeText={updatePassword}
@@ -131,7 +130,6 @@ function PDFPasswordForm({isFocused, isPasswordInvalid = false, shouldShowLoadin
                 onFocus={() => onPasswordFieldFocused?.(true)}
                 onBlur={() => onPasswordFieldFocused?.(false)}
                 autoFocus
-                shouldDelayFocus={shouldDelayFocus}
                 secureTextEntry
             />
             <Button

src/components/RoomNameInput/index.native.tsx

@@ -9,10 +9,7 @@ import {modifyRoomName} from '@libs/RoomNameInputUtils';
 import CONST from '@src/CONST';
 import type RoomNameInputProps from './types';
 
-function RoomNameInput(
-    {disabled = false, autoFocus = false, shouldDelayFocus = false, isFocused, value, onBlur, onChangeText, onInputChange, ...props}: RoomNameInputProps,
-    ref: ForwardedRef<BaseTextInputRef>,
-) {
+function RoomNameInput({disabled = false, autoFocus = false, isFocused, value, onBlur, onChangeText, onInputChange, ...props}: RoomNameInputProps, ref: ForwardedRef<BaseTextInputRef>) {
     const {translate} = useLocalize();
 
     /**
@@ -45,7 +42,6 @@ function RoomNameInput(
             value={value?.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
             onBlur={(event) => isFocused && onBlur?.(event)}
             autoFocus={isFocused && autoFocus}
-            shouldDelayFocus={shouldDelayFocus}
             autoCapitalize="none"
             onChange={setModifiedRoomName}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449

src/components/RoomNameInput/index.tsx

@@ -9,10 +9,7 @@ import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/typ
 import CONST from '@src/CONST';
 import type RoomNameInputProps from './types';
 
-function RoomNameInput(
-    {disabled = false, autoFocus = false, shouldDelayFocus = false, isFocused, value = '', onBlur, onChangeText, onInputChange, ...props}: RoomNameInputProps,
-    ref: ForwardedRef<BaseTextInputRef>,
-) {
+function RoomNameInput({disabled = false, autoFocus = false, isFocused, value = '', onBlur, onChangeText, onInputChange, ...props}: RoomNameInputProps, ref: ForwardedRef<BaseTextInputRef>) {
     const {translate} = useLocalize();
     const [selection, setSelection] = useState<Selection>({start: value.length - 1, end: value.length - 1});
 
@@ -57,7 +54,6 @@ function RoomNameInput(
             value={value?.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
             onBlur={(event) => isFocused && onBlur?.(event)}
             autoFocus={isFocused && autoFocus}
-            shouldDelayFocus={shouldDelayFocus}
             autoCapitalize="none"
             onChange={setModifiedRoomName}
             onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}

src/components/RoomNameInput/types.ts

@@ -11,7 +11,6 @@ type RoomNameInputProps = {
     inputID?: string;
     onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
     autoFocus?: boolean;
-    shouldDelayFocus?: boolean;
     isFocused: boolean;
 };
 

src/components/Search/SearchAutocompleteInput.tsx

@@ -20,7 +20,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {parseFSAttributes} from '@libs/Fullstory';
 import runOnLiveMarkdownRuntime from '@libs/runOnLiveMarkdownRuntime';
 import {getAutocompleteCategories, getAutocompleteTags, parseForLiveMarkdown} from '@libs/SearchAutocompleteUtils';
-import shouldDelayFocus from '@libs/shouldDelayFocus';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -107,23 +106,23 @@ function SearchAutocompleteInput(
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
+    const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: false});
     const currencyAutocompleteList = Object.keys(currencyList ?? {}).filter((currencyCode) => !currencyList?.[currencyCode]?.retired);
     const currencySharedValue = useSharedValue(currencyAutocompleteList);
 
-    const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
+    const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: false});
     const categoryAutocompleteList = useMemo(() => {
         return getAutocompleteCategories(allPolicyCategories, activeWorkspaceID);
     }, [activeWorkspaceID, allPolicyCategories]);
     const categorySharedValue = useSharedValue(categoryAutocompleteList);
 
-    const [allPoliciesTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
+    const [allPoliciesTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: false});
     const tagAutocompleteList = useMemo(() => {
         return getAutocompleteTags(allPoliciesTags, activeWorkspaceID);
     }, [activeWorkspaceID, allPoliciesTags]);
     const tagSharedValue = useSharedValue(tagAutocompleteList);
 
-    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST, {canBeMissing: false});
     const emailList = Object.keys(loginList ?? {});
     const emailListSharedValue = useSharedValue(emailList);
 
@@ -209,7 +208,6 @@ function SearchAutocompleteInput(
                         value={localValue}
                         onChangeText={handleChangeText}
                         autoFocus={autoFocus}
-                        shouldDelayFocus={shouldDelayFocus}
                         caretHidden={caretHidden}
                         loadingSpinnerStyle={[styles.mt0, styles.mr2]}
                         role={CONST.ROLE.PRESENTATION}

src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -46,7 +46,6 @@ function BaseTextInput(
         containerStyles,
         inputStyle,
         forceActiveLabel = false,
-        autoFocus = false,
         disableKeyboard = false,
         autoGrow = false,
         autoGrowExtraSpace = 0,
@@ -56,7 +55,6 @@ function BaseTextInput(
         maxLength = undefined,
         hint = '',
         onInputChange = () => {},
-        shouldDelayFocus = false,
         multiline = false,
         autoCorrect = true,
         prefixCharacter = '',
@@ -113,18 +111,6 @@ function BaseTextInput(
 
     useHtmlPaste(input, undefined, isMarkdownEnabled);
 
-    // AutoFocus with delay is executed manually, otherwise it's handled by the TextInput's autoFocus native prop
-    useEffect(() => {
-        if (!autoFocus || !shouldDelayFocus || !input.current) {
-            return;
-        }
-
-        const focusTimeout = setTimeout(() => input.current?.focus(), CONST.ANIMATED_TRANSITION);
-        return () => clearTimeout(focusTimeout);
-        // We only want this to run on mount
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, []);
-
     const animateLabel = useCallback(
         (translateY: number, scale: number) => {
             labelScale.set(withSpring(scale, {overshootClamping: false}));
@@ -354,7 +340,6 @@ function BaseTextInput(
                                 }}
                                 // eslint-disable-next-line
                                 {...inputProps}
-                                autoFocus={autoFocus && !shouldDelayFocus}
                                 autoCorrect={inputProps.secureTextEntry ? false : autoCorrect}
                                 placeholder={placeholderValue}
                                 placeholderTextColor={placeholderTextColor ?? theme.placeholderText}

src/components/TextInput/BaseTextInput/implementation/index.tsx

@@ -49,7 +49,6 @@ function BaseTextInput(
         containerStyles,
         inputStyle,
         forceActiveLabel = false,
-        autoFocus = false,
         disableKeyboard = false,
         autoGrow = false,
         autoGrowHeight = false,
@@ -58,7 +57,6 @@ function BaseTextInput(
         maxLength = undefined,
         hint = '',
         onInputChange = () => {},
-        shouldDelayFocus = false,
         multiline = false,
         shouldInterceptSwipe = false,
         autoCorrect = true,
@@ -120,14 +118,10 @@ function BaseTextInput(
     // AutoFocus which only works on mount:
     useEffect(() => {
         // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514
-        if (!autoFocus || !input.current) {
+        if (!inputProps.autoFocus || !input.current) {
             return;
         }
 
-        if (shouldDelayFocus) {
-            const focusTimeout = setTimeout(() => input?.current?.focus(), CONST.ANIMATED_TRANSITION);
-            return () => clearTimeout(focusTimeout);
-        }
         input.current.focus();
         // We only want this to run on mount
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

src/components/TextInput/BaseTextInput/types.ts

@@ -94,9 +94,6 @@ type CustomBaseTextInputProps = {
     /** Callback to update the value on Form when input is used in the Form component. */
     onInputChange?: (value: string) => void;
 
-    /** Whether we should wait before focusing the TextInput, useful when using transitions  */
-    shouldDelayFocus?: boolean;
-
     /** Indicate whether input is multiline */
     multiline?: boolean;
 

src/libs/shouldDelayFocus/index.native.ts

@@ -21,7 +21,7 @@ type BaseTwoFactorAuthFormProps = {
 function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwoFactorAuthFormProps, ref: ForwardedRef<BaseTwoFactorAuthFormRef>) {
     const {translate} = useLocalize();
     const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef = useRef<MagicCodeInputHandle | null>(null);
     const shouldClearData = account?.needsTwoFactorAuthSetup ?? false;
@@ -88,7 +88,6 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
             onFulfill={validateAndSubmitForm}
             errorText={formError.twoFactorAuthCode ?? getLatestErrorMessage(account)}
             ref={inputRef}
-            shouldDelayFocus
         />
     );
 }