From c0ea5a58178dcd4d0bda30d836b7542f0d6f142f Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Wed, 17 Aug 2022 09:21:03 +0800
Subject: [PATCH 1/2] Make sure we unsubscribe the pressOnEnter handler for the
 login form when we render the password form

---
 src/components/FormAlertWithSubmitButton.js |  6 ++++-
 src/pages/signin/LoginForm.js               | 26 +++++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 93895ad15b07..6b68ae15a29e 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -31,6 +31,9 @@ const propTypes = {
 
     /** Submit function */
     onSubmit: PropTypes.func.isRequired,
+
+    /** Whether or not to pressOnEnter */
+    pressOnEnter: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -40,6 +43,7 @@ const defaultProps = {
     containerStyles: [],
     isLoading: false,
     onFixTheErrorsPressed: () => {},
+    pressOnEnter: true,
 };
 
 const FormAlertWithSubmitButton = props => (
@@ -60,7 +64,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter
+                pressOnEnter={props.pressOnEnter}
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 04ce5c7cc04f..b94d2286c7db 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -181,16 +181,22 @@ class LoginForm extends React.Component {
                         {this.props.account.success}
                     </Text>
                 )}
-                <View style={[styles.mt5]}>
-                    <FormAlertWithSubmitButton
-                        buttonText={this.props.translate('common.continue')}
-                        isLoading={this.props.account.isLoading}
-                        onSubmit={this.validateAndSubmitForm}
-                        message={error}
-                        isAlertVisible={!_.isEmpty(error)}
-                        containerStyles={[styles.mh0]}
-                    />
-                </View>
+                { // We need to unmount the submit button when the component is not visible so that the Enter button
+                  // key handler gets unsubscribed and does not conflict with the Password Form
+                    this.props.isVisible && (
+                        <View style={[styles.mt5]}>
+                            <FormAlertWithSubmitButton
+                                buttonText={this.props.translate('common.continue')}
+                                isLoading={this.props.account.isLoading}
+                                onSubmit={this.validateAndSubmitForm}
+                                message={error}
+                                isAlertVisible={!_.isEmpty(error)}
+                                containerStyles={[styles.mh0]}
+                                pressOnEnter={this.props.isVisible}
+                            />
+                        </View>
+                    )
+                }
                 <OfflineIndicator containerStyles={[styles.mv1]} />
             </>
         );

From c6aac38a9d65f1adc53799aca0586241f7a47634 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Wed, 17 Aug 2022 09:51:33 +0800
Subject: [PATCH 2/2] Remove pressOnEnter prop

---
 src/components/FormAlertWithSubmitButton.js | 6 +-----
 src/pages/signin/LoginForm.js               | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 6b68ae15a29e..93895ad15b07 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -31,9 +31,6 @@ const propTypes = {
 
     /** Submit function */
     onSubmit: PropTypes.func.isRequired,
-
-    /** Whether or not to pressOnEnter */
-    pressOnEnter: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -43,7 +40,6 @@ const defaultProps = {
     containerStyles: [],
     isLoading: false,
     onFixTheErrorsPressed: () => {},
-    pressOnEnter: true,
 };
 
 const FormAlertWithSubmitButton = props => (
@@ -64,7 +60,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter={props.pressOnEnter}
+                pressOnEnter
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index b94d2286c7db..f80488fb3f4a 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -192,7 +192,6 @@ class LoginForm extends React.Component {
                                 message={error}
                                 isAlertVisible={!_.isEmpty(error)}
                                 containerStyles={[styles.mh0]}
-                                pressOnEnter={this.props.isVisible}
                             />
                         </View>
                     )