Merge pull request #3719 from Expensify/Rory-FixPhoneNumberPageAutoFocus

Don't focus input until screen transition has ended
Expensify · Jun 22, 2021 · c94c24a · c94c24a
2 parents 318ffa0 + 9df65ad
commit c94c24a
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
@@ -72,6 +72,8 @@ class AddSecondaryLoginPage extends Component {
         this.formType = props.route.params.type;
         this.submitForm = this.submitForm.bind(this);
         this.validateForm = this.validateForm.bind(this);
+
+        this.phoneNumberInputRef = null;
     }
 
     componentWillUnmount() {
@@ -102,7 +104,12 @@ class AddSecondaryLoginPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper>
+            <ScreenWrapper onTransitionEnd={() => {
+                if (this.phoneNumberInputRef) {
+                    this.phoneNumberInputRef.focus();
+                }
+            }}
+            >
                 <KeyboardAvoidingView>
                     <HeaderWithCloseButton
                         title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
@@ -125,10 +132,10 @@ class AddSecondaryLoginPage extends Component {
                                     : 'profilePage.emailAddress')}
                             </Text>
                             <TextInput
+                                ref={el => this.phoneNumberInputRef = el}
                                 style={styles.textInput}
                                 value={this.state.login}
                                 onChangeText={login => this.setState({login})}
-                                autoFocus
                                 keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
                                     ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
                                 returnKeyType="done"