Merge pull request #53435 from bernhardoj/fix/52959-inconsistent-beha…

…vior-in-validate-code-modal Fix pressing back button doesn't close the validate code modal when keyboard is shown
Expensify · Dec 9, 2024 · af78a37 · af78a37
2 parents 8c5c8a8 + ab6230d
commit af78a37
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git 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
@@ -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
@@ -60,6 +60,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
             testID={ConfirmDelegatePage.displayName}
             footer={submitButton}
             childrenContainerStyles={[styles.pt3, styles.gap6]}
+            keyboardShouldPersistTaps="handled"
         >
             <DelegateNoAccessWrapper accessDeniedVariants={[CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]}>
                 <Text style={[styles.ph5]}>{translate('delegate.confirmCopilot')}</Text>

diff --git 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>
     );
 }