Merge pull request #28682 from tienifr/fix/28340

fix: 28340 Focus freeze on add contact method magic code on coming back from search
Expensify · Oct 11, 2023 · 0a20111 · 0a20111
2 parents afb6f1f + 62cbf62
commit 0a20111
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import {useFocusEffect} from '@react-navigation/native';
 import MagicCodeInput from '../../../../../components/MagicCodeInput';
 import * as ErrorUtils from '../../../../../libs/ErrorUtils';
 import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
@@ -77,6 +78,7 @@ function BaseValidateCodeForm(props) {
     const inputValidateCodeRef = useRef();
     const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
     const shouldDisableResendValidateCode = props.network.isOffline || props.account.isLoading;
+    const focusTimeoutRef = useRef(null);
 
     useImperativeHandle(props.innerRef, () => ({
         focus() {
@@ -87,6 +89,21 @@ function BaseValidateCodeForm(props) {
         },
     }));
 
+    useFocusEffect(
+        useCallback(() => {
+            if (!inputValidateCodeRef.current) {
+                return;
+            }
+            focusTimeoutRef.current = setTimeout(inputValidateCodeRef.current.focus, CONST.ANIMATED_TRANSITION);
+            return () => {
+                if (!focusTimeoutRef.current) {
+                    return;
+                }
+                clearTimeout(focusTimeoutRef.current);
+            };
+        }, []),
+    );
+
     useEffect(() => {
         Session.clearAccountMessages();
         if (!validateLoginError) {

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2529,6 +2529,7 @@ const styles = (theme) => ({
                   // However, it is not possible to override the background-color directly as explained in this resource: https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
                   // Therefore, the transition effect needs to be delayed.
                   transitionDelay: '99999s',
+                  transitionProperty: 'background-color',
               }
             : {}),
     },