From 3031b6d2fafa3502ce761b09e037adfa1d8a65b9 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 3 Dec 2024 16:19:35 +0800
Subject: [PATCH] fix pressing back button on validate code modal doesn't close
 the modal

---
 src/components/HeaderPageLayout.tsx           | 10 ++++--
 .../ReimbursementAccount/BankAccountStep.tsx  | 26 +++++++-------
 .../AddDelegate/ConfirmDelegatePage.tsx       |  1 +
 .../TwoFactorAuth/Steps/CodesStep.tsx         | 34 +++++++++----------
 4 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/components/HeaderPageLayout.tsx b/src/components/HeaderPageLayout.tsx
index e7f5e2de7386..1d3a290ccbff 100644
--- a/src/components/HeaderPageLayout.tsx
+++ b/src/components/HeaderPageLayout.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {ScrollViewProps, StyleProp, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -44,6 +44,8 @@ type HeaderPageLayoutProps = ChildrenProps &
 
         /** Whether or not to show the offline indicator */
         shouldShowOfflineIndicatorInWideScreen?: boolean;
+
+        keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps'];
     };
 function HeaderPageLayout({
     backgroundColor,
@@ -56,6 +58,7 @@ function HeaderPageLayout({
     headerContent,
     shouldShowOfflineIndicatorInWideScreen = false,
     testID,
+    keyboardShouldPersistTaps,
     ...rest
 }: HeaderPageLayoutProps) {
     const theme = useTheme();
@@ -98,7 +101,10 @@ function HeaderPageLayout({
                                 <View style={[shouldUseNarrowLayout ? styles.flex1 : styles.flex3, appBGColor]} />
                             </View>
                         )}
-                        <ScrollView contentContainerStyle={[safeAreaPaddingBottomStyle, style, scrollViewContainerStyles]}>
+                        <ScrollView
+                            contentContainerStyle={[safeAreaPaddingBottomStyle, style, scrollViewContainerStyles]}
+                            keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                        >
                             {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor ?? theme.appBG, windowHeight)} />}
                             <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG), headerContainerStyles]}>
                                 {headerContent}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index afa2c10bc68e..8a1c751e37ce 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -225,21 +225,21 @@ function BankAccountStep({
                                 />
                             </View>
                         </PressableWithoutFeedback>
-                        <ValidateCodeActionModal
-                            title={translate('contacts.validateAccount')}
-                            descriptionPrimary={translate('contacts.featureRequiresValidate')}
-                            descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
-                            isVisible={!!isValidateCodeActionModalVisible}
-                            hasMagicCodeBeenSent={hasMagicCodeBeenSent}
-                            validatePendingAction={loginData?.pendingFields?.validateCodeSent}
-                            sendValidateCode={() => User.requestValidateCodeAction()}
-                            handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
-                            validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
-                            clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
-                            onClose={() => toggleValidateCodeActionModal?.(false)}
-                        />
                     </View>
                 </ScrollView>
+                <ValidateCodeActionModal
+                    title={translate('contacts.validateAccount')}
+                    descriptionPrimary={translate('contacts.featureRequiresValidate')}
+                    descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
+                    isVisible={!!isValidateCodeActionModalVisible}
+                    hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                    validatePendingAction={loginData?.pendingFields?.validateCodeSent}
+                    sendValidateCode={() => User.requestValidateCodeAction()}
+                    handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
+                    validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
+                    clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
+                    onClose={() => toggleValidateCodeActionModal?.(false)}
+                />
             </View>
         </ScreenWrapper>
     );
diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
index 57d50400863e..ab30ec426fae 100644
--- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
+++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
@@ -59,6 +59,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
             testID={ConfirmDelegatePage.displayName}
             footer={submitButton}
             childrenContainerStyles={[styles.pt3, styles.gap6]}
+            keyboardShouldPersistTaps="handled"
         >
             <Text style={[styles.ph5]}>{translate('delegate.confirmCopilot')}</Text>
             <MenuItem
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 92cf4412b0c4..67b47cb8598d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -175,24 +175,24 @@ function CodesStep({backTo}: CodesStepProps) {
                         }}
                     />
                 </FixedFooter>
-                <ValidateCodeActionModal
-                    title={translate('contacts.validateAccount')}
-                    descriptionPrimary={translate('contacts.featureRequiresValidate')}
-                    descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
-                    isVisible={isValidateModalVisible}
-                    hasMagicCodeBeenSent={hasMagicCodeBeenSent}
-                    validatePendingAction={loginData?.pendingFields?.validateCodeSent}
-                    sendValidateCode={() => User.requestValidateCodeAction()}
-                    handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode, true)}
-                    validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
-                    clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
-                    onModalHide={() => {}}
-                    onClose={() => {
-                        setIsValidateModalVisible(false);
-                        TwoFactorAuthActions.quitAndNavigateBack(backTo);
-                    }}
-                />
             </ScrollView>
+            <ValidateCodeActionModal
+                title={translate('contacts.validateAccount')}
+                descriptionPrimary={translate('contacts.featureRequiresValidate')}
+                descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
+                isVisible={isValidateModalVisible}
+                hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                validatePendingAction={loginData?.pendingFields?.validateCodeSent}
+                sendValidateCode={() => User.requestValidateCodeAction()}
+                handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode, true)}
+                validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
+                clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
+                onModalHide={() => {}}
+                onClose={() => {
+                    setIsValidateModalVisible(false);
+                    TwoFactorAuthActions.quitAndNavigateBack(backTo);
+                }}
+            />
         </StepWrapper>
     );
 }