Merge pull request #15050 from parasharrajat/rajat/fix-button-jumps

Do not focus the input on screen exit transition
Expensify · Feb 16, 2023 · 3a39ffd · 3a39ffd
2 parents 7d7fc3d + 526a449
commit 3a39ffd
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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