[HOLD for payment 2024-12-11] [$100] mWeb - Profile - Device back button leads to profile and not to calendar when in years tab

[IuliiaHerets]

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: 9.0.60-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Open the staging.new.expensify.com website.
2. Tap on "Settings" on the bottom of the screen.
3. Tap on "Profile"
4. Scroll down to "Date of Birth" and open the tab.
5. Tap on the year, to open the years list.
6. Use device´s back button to return to calendar.
7. Verify you land on the calendar tab again.

Expected Result:

When opening the years list when setting date of birth and using device´s back button, the user should be redirected to the calendar tab again.

Actual Result:

When opening the years list when setting date of birth and using device´s back button, the user lands on the profile tab again and not on the calendar.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6662042_1731379100343.DOB.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021858415095578104254
• Upwork Job ID: 1858415095578104254
• Last Price Increase: 2024-11-18

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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.

[jacobkim9881]

Edited by proposal-police: This proposal was edited at 2024-11-19 17:57:19 UTC.

Proposal

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

On Android mWeb, device back button on Year Picker Modal on Calendar leads to Profile page not Calendar.

What is the root cause of that problem?

Navigation history doesn't have modal usually. For example RHP is opened by Navigation.navigate(ROUTES.XXX.getRoute(...)).

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Line 121 in ac6b16e

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(action, iouType, transactionID, reportID, pageIndex, currency, Navigation.getActiveRoute()));

But modal is just opened which is placed as a component <YearPickerModal>

App/src/components/DatePicker/CalendarPicker/index.tsx

Lines 262 to 268 in ac6b16e

	<YearPickerModal
	isVisible={isYearPickerVisible}
	years={years}
	currentYear={currentYearView}
	onYearChange={onYearSelected}
	onClose={() => setIsYearPickerVisible(false)}
	/>

So when year is cliked and then <YearPickerModal> is visible not navigating modal page.

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

We can solve this issue by giving the button navigating back method.

App/src/components/Modal/index.tsx

Lines 23 to 29 in 4d9be4e

	const hideModal = () => {
	setStatusBarColor(previousStatusBarColor);
	onModalHide();
	if ((window.history.state as WindowState)?.shouldGoBack) {
	window.history.back();
	}
	};

On the code above already, window.history.back() function is activated when it gets achieve a condition already when modal gets hidden. The flag for the condition is written by popstate event which activate when some event occurrs (like back button is clicked).

App/src/components/Modal/index.tsx

Lines 50 to 53 in 4d9be4e

	if (shouldHandleNavigationBack) {
	window.history.pushState({shouldGoBack: true}, '', null);
	window.addEventListener('popstate', handlePopStateRef.current);
	}

We can let the state shouldGoBack true to this component.

App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Lines 49 to 56 in 4d9be4e

	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={() => onClose?.()}
	onModalHide={onClose}
	hideModalContentWhileAnimating
	useNativeDriver
	>

Like this:

        <Modal
            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
            isVisible={isVisible}
            onClose={() => onClose?.()}
            onModalHide={onClose}
            hideModalContentWhileAnimating
/////////////// add this line
            shouldHandleNavigationBack={Browser.isMobileChrome()} 
///////////////
            useNativeDriver
        >

When entering Year Picker Modal shouldHandleNavigationBack is true on Chrome browser -> When clicking device back button resistered handlePopStateRef on popstate event is activated and state shouldGoBack gets true -> As shouldGoBack is true window.history.back() is activated on hideModal

What alternative solutions did you explore? (Optional)

N/A

[VictoriaExpensify]

Hmm I agree this isn't perfect but it seems like a pretty low priority to me. I'm going to reduce the bounty on this to $100

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021858415095578104254

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hungvu193 (External)