From 526a449ca51f11a1ca7886230d667d7d3ac296a0 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Sat, 11 Feb 2023 00:50:31 +0530
Subject: [PATCH] Do not focus the input on screen exit transition

---
 src/components/ScreenWrapper/index.js          | 12 +++++++++---
 src/components/ScreenWrapper/propTypes.js      |  6 +++---
 src/pages/settings/AddSecondaryLoginPage.js    |  2 +-
 src/pages/settings/PasswordPage.js             |  2 +-
 src/pages/settings/Payments/AddPayPalMePage.js |  2 +-
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index e7ba7e5d0e2e..fc5a043ac637 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -2,6 +2,7 @@ import {View} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import CONST from '../../CONST';
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
@@ -40,10 +41,15 @@ class ScreenWrapper extends React.Component {
             Navigation.setIsNavigating(true);
         });
 
-        this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => {
-            this.setState({didScreenTransitionEnd: true});
-            this.props.onTransitionEnd();
+        this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', (event) => {
             Navigation.setIsNavigating(false);
+
+            // Prevent firing the prop callback when user is exiting the page.
+            if (lodashGet(event, 'data.closing')) {
+                return;
+            }
+            this.setState({didScreenTransitionEnd: true});
+            this.props.onEntryTransitionEnd();
         });
     }
 
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 46cc9ed6315b..67e1b759ebac 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -16,8 +16,8 @@ const propTypes = {
     /** Whether to include padding top */
     includePaddingTop: PropTypes.bool,
 
-    // Called when navigated Screen's transition is finished.
-    onTransitionEnd: PropTypes.func,
+    // Called when navigated Screen's transition is finished. It does not fire when user exit the page.
+    onEntryTransitionEnd: PropTypes.func,
 
     /** The behavior to pass to the KeyboardAvoidingView, requires some trial and error depending on the layout/devices used.
      *  Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */
@@ -34,7 +34,7 @@ const defaultProps = {
     style: [],
     includeSafeAreaPaddingBottom: true,
     includePaddingTop: true,
-    onTransitionEnd: () => {},
+    onEntryTransitionEnd: () => {},
     modal: {},
     keyboardAvoidingViewBehavior: 'padding',
 };
diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index 892a75153d55..982736ea1186 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -91,7 +91,7 @@ class AddSecondaryLoginPage extends Component {
     render() {
         return (
             <ScreenWrapper
-                onTransitionEnd={() => {
+                onEntryTransitionEnd={() => {
                     if (!this.phoneNumberInputRef) {
                         return;
                     }
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 4a6f0c2f459e..dce9a5e82cc5 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -138,7 +138,7 @@ class PasswordPage extends Component {
     render() {
         const shouldShowNewPasswordPrompt = !this.state.errors.newPassword && !this.state.errors.newPasswordSameAsOld;
         return (
-            <ScreenWrapper onTransitionEnd={() => {
+            <ScreenWrapper onEntryTransitionEnd={() => {
                 if (!this.currentPasswordInputRef) {
                     return;
                 }
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index ba2b5ec99456..c800b49cd804 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -54,7 +54,7 @@ class AddPayPalMePage extends React.Component {
 
     render() {
         return (
-            <ScreenWrapper onTransitionEnd={this.focusPayPalMeInput}>
+            <ScreenWrapper onEntryTransitionEnd={this.focusPayPalMeInput}>
                 <HeaderWithCloseButton
                     title={this.props.translate('common.payPalMe')}
                     shouldShowBackButton