Merge pull request #3839 from Expensify/cmartins-keyboard-auto-open

Auto open keyboard on Password and Payment pages
Expensify · Jul 1, 2021 · 999d374 · 999d374
2 parents de44278 + 5a1c35c
commit 999d374
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
@@ -52,6 +52,7 @@ class PasswordPage extends Component {
         };
 
         this.handleChangePassword = this.handleChangePassword.bind(this);
+        this.currentPasswordInputRef = null;
     }
 
     componentWillUnmount() {
@@ -69,7 +70,12 @@ class PasswordPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper>
+            <ScreenWrapper onTransitionEnd={() => {
+                if (this.currentPasswordInputRef) {
+                    this.currentPasswordInputRef.focus();
+                }
+            }}
+            >
                 <KeyboardAvoidingView>
                     <HeaderWithCloseButton
                         title={this.props.translate('passwordPage.changePassword')}
@@ -86,12 +92,14 @@ class PasswordPage extends Component {
                                 {`${this.props.translate('passwordPage.currentPassword')}*`}
                             </Text>
                             <TextInput
+                                ref={el => this.currentPasswordInputRef = el}
                                 secureTextEntry
                                 autoCompleteType="password"
                                 textContentType="password"
                                 style={styles.textInput}
                                 value={this.state.currentPassword}
                                 onChangeText={currentPassword => this.setState({currentPassword})}
+                                returnKeyType="done"
                             />
                         </View>
                         <View style={styles.mb6}>

diff --git a/src/pages/settings/PaymentsPage.js b/src/pages/settings/PaymentsPage.js
@@ -38,6 +38,7 @@ class PaymentsPage extends React.Component {
             payPalMeUsername: props.payPalMeUsername,
         };
         this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this);
+        this.paypalUsernameInputRef = null;
     }
 
     componentDidMount() {
@@ -62,7 +63,12 @@ class PaymentsPage extends React.Component {
 
     render() {
         return (
-            <ScreenWrapper>
+            <ScreenWrapper onTransitionEnd={() => {
+                if (this.paypalUsernameInputRef) {
+                    this.paypalUsernameInputRef.focus();
+                }
+            }}
+            >
                 <KeyboardAvoidingView>
                     <HeaderWithCloseButton
                         title={this.props.translate('common.payments')}
@@ -79,13 +85,15 @@ class PaymentsPage extends React.Component {
                                 {this.props.translate('paymentsPage.payPalMe')}
                             </Text>
                             <TextInput
+                                ref={el => this.paypalUsernameInputRef = el}
                                 autoCompleteType="off"
                                 autoCorrect={false}
                                 style={[styles.textInput]}
                                 value={this.state.payPalMeUsername}
                                 placeholder={this.props.translate('paymentsPage.yourPayPalUsername')}
                                 onChangeText={text => this.setState({payPalMeUsername: text})}
                                 editable={!this.props.payPalMeUsername}
+                                returnKeyType="done"
                             />
                         </View>
                     </View>