fix: 26505 Losing focus on the amount input field when switching between apps

src/components/TextInput/BaseTextInput.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useState, useRef, useEffect, useCallback} from 'react';
-import {Animated, View, AppState, Keyboard, StyleSheet} from 'react-native';
+import {Animated, View, StyleSheet} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import RNTextInput from '../RNTextInput';
 import TextInputLabel from './TextInputLabel';
@@ -38,24 +38,6 @@ function BaseTextInput(props) {
     const input = useRef(null);
     const isLabelActive = useRef(initialActiveLabel);
 
-    useEffect(() => {
-        if (!props.disableKeyboard) {
-            return;
-        }
-
-        const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
-            if (!nextAppState.match(/inactive|background/)) {
-                return;
-            }
-
-            Keyboard.dismiss();
-        });
-
-        return () => {
-            appStateSubscription.remove();
-        };
-    }, [props.disableKeyboard]);
-
     // AutoFocus which only works on mount:
     useEffect(() => {
         // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514

src/components/TextInput/index.native.js

@@ -1,19 +1,40 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useEffect} from 'react';
+import {AppState, Keyboard} from 'react-native';
 import styles from '../../styles/styles';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
 
-const TextInput = forwardRef((props, ref) => (
-    <BaseTextInput
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        // Setting autoCompleteType to new-password throws an error on Android/iOS, so fall back to password in that case
-        // eslint-disable-next-line react/jsx-props-no-multi-spaces
-        autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType}
-        innerRef={ref}
-        inputStyle={[styles.baseTextInput, ...props.inputStyle]}
-    />
-));
+const TextInput = forwardRef((props, ref) => {
+    useEffect(() => {
+        if (!props.disableKeyboard) {
+            return;
+        }
+
+        const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
+            if (!nextAppState.match(/inactive|background/)) {
+                return;
+            }
+
+            Keyboard.dismiss();
+        });
+
+        return () => {
+            appStateSubscription.remove();
+        };
+    }, [props.disableKeyboard]);
+
+    return (
+        <BaseTextInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            // Setting autoCompleteType to new-password throws an error on Android/iOS, so fall back to password in that case
+            // eslint-disable-next-line react/jsx-props-no-multi-spaces
+            autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType}
+            innerRef={ref}
+            inputStyle={[styles.baseTextInput, ...props.inputStyle]}
+        />
+    );
+});
 
 TextInput.propTypes = baseTextInputPropTypes.propTypes;
 TextInput.defaultProps = baseTextInputPropTypes.defaultProps;