Enable payment - RNH modal is not dismissed by clicking on the background page

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.86-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #67043
Email or phone of affected tester (no customers): applausetester+dave133@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 14.5/ Chrome
App Component: User Settings

Action Performed:

1. Login to any account
2. Go to /enable-payments
3. State
4. Click on the background page

Expected Result:

RHN is dismissed

Actual Result:

Navigates back to the previous page

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6898989_1753499060455.Screen_Recording_2025-07-26_at_6.00.38_in_the_morning.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[linhvovan29546]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Enable payment - RNH modal is not dismissed by clicking on the background page

What is the root cause of that problem?

On the Enable Payment page, the address fields use the AddressFormFields component, which use PushRowModal to display state. When click backdrop we only close modal, not the RHN

App/src/pages/EnablePayments/EnablePaymentsPage.tsx

Line 75 in 4b68aa8

return <AdditionalDetailsStep />;

App/src/components/PushRowWithModal/PushRowModal.tsx

Lines 74 to 81 in 4b68aa8

	<Modal
	onClose={handleClose}
	isVisible={isVisible}
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	onModalHide={handleClose}
	shouldUseCustomBackdrop
	shouldUseReanimatedModal
	>

App/src/components/Modal/BaseModal.tsx

Line 367 in 4b68aa8

onBackdropPress={handleBackdropPress}

What changes do you think we should make in order to solve the problem?

We can dissmiss the RHN when the user clicks the backdrop. This can be achieved by:

            onBackdropPress={Navigation.dismissModal}

Alternatively, to only enable this behavior for narrow pane modals, we can use the isInNarrowPaneModal property:

    const {isInNarrowPaneModal} = useResponsiveLayout();

...
onBackdropPress={isInNarrowPaneModal&&Navigation.dismissModal}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

1. We can considered applying a global fix in BaseModal, but since modals are used in many places throughout the app, this change might introduce regression:
   

   App/src/components/Modal/BaseModal.tsx

   Line 203 in 4b68aa8

   const handleBackdropPress = (e?: KeyboardEvent) => {

    const handleBackdropPress = (e?: KeyboardEvent) => {
        if (e?.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
            return;
        }
        if(isInNarrowPaneModal){
// Instead use isInNarrowPaneModal we can use (type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && !isSmallScreenWidth && (isInNarrowPane || isInNarrowPaneModal)
            Navigation.dismissModal();   
            return 
        }
        if (onBackdropPress) {
            onBackdropPress();
        } else {
            onClose?.();
        }
    };

2. This improves the dismissal of the modal by ensuring that we call dismissModal only after the animation has ended.

                if (isInNarrowPaneModal) {
// Instead use isInNarrowPaneModal we can use (!isSmallScreenWidth && (isInNarrowPane || isInNarrowPaneModal)
   
                    handleClose(); // or onClose if this inside BaseModal
                    InteractionManager.runAfterInteractions(() => {
                        Navigation.dismissModal();
                    });
                }

[ryntgh]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Enable payment - RNH modal is not dismissed by clicking on the background page

What is the root cause of that problem?

In PushRowModal, the Modal component uses its own onClose handler that only closes the state selector modal:

App/src/components/PushRowWithModal/PushRowModal.tsx

Lines 74 to 81 in 4b68aa8

	<Modal
	onClose={handleClose}
	isVisible={isVisible}
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	onModalHide={handleClose}
	shouldUseCustomBackdrop
	shouldUseReanimatedModal
	>

The handleClose function only manages the state selector modal's visibility and doesn't provide a way to dismiss the parent RHP when the user clicks the background expecting to close the entire enable-payments flow

What changes do you think we should make in order to solve the problem?

We can modify the PushRowModal to accept an optional onBackdropPress prop that can override the default close behavior

1. Add onBackdropPress?: () => void to the PushRowWithModalProps

2. Add onBackdropPress?: () => void to PushRowModalProps as well and create a new handleBackDropPress function

    const handleBackdropPress = () => {
        if (onBackdropPress) {
            handleClose();
            InteractionManager.runAfterInteractions(() => {
                onBackdropPress();
            });
        } else {
            handleClose();
        }
    };

3. And use backdrop handler to the Modal component here

        <Modal
            onClose={handleClose}
            isVisible={isVisible}
            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
            onModalHide={handleClose}
            shouldUseCustomBackdrop
            shouldUseReanimatedModal
            onBackdropPress={handleBackdropPress}
        >

4. Add a new prop onStateSelectorBackdropPress?: () => void; on AddressFormProps and call it here on state selector

onBackdropPress={onStateSelectorBackdropPress}

5. Then, in the AdditionalDetailsStep, pass the onStateSelectorBackdropPress to dismiss the modal here

onStateSelectorBackdropPress={() => Navigation.dismissModal()}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

Result.mp4

[joekaufmanexpensify]

This is a pretty niche bug. This flow is not used much by actual customers. Further, this only happens if you open the state field and try and close the RHP from there, which seems even less common. Let's revisit this if we get actual customers being negatively impacted by this.