Split Bill - Incorrect back button functionality doesn't allow to cancel Split Bill in the group

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Login to NewDot
2. Create a group with 2+ people
3. Use the FAB button to create a split within this new group
4. Input amount and click next
5. Try to exit Split Bill flow by clicking back buttons

Expected Result:

User can exit Split Bill flow

Actual Result:

User is blocked within Split Bill flow

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.27.4

Reproducible in staging?: yes

**Reproducible in production?:**yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6092560_video_29__1_.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[moezh]

Proposal

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

The problem we are aiming to address in this issue is that when users attempt to exit the split bill flow from the money request confirm page by clicking the back button, they find themselves unable to leave the split bill flow.

What is the root cause of that problem?

The root cause of this issue lies in the code within MoneyRequestModal.js. Specifically, the following code:

const navigateBack = isEditingAmountAfterConfirm ? () => navigateToStep(moneyRequestStepIndex) : navigateToPreviousStep;

prevents users from exiting the split bill flow if they click the back button multiple times from the confirm page.

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

To resolve this problem, I recommend making the following changes in MoneyRequestModal.js:

if (currentStepIndex === _.indexOf(steps, Steps.MoneyRequestConfirm)) {
   Navigation.dismissModal();
}

By including this code snippet within the navigateToPreviousStep function, we enable users to successfully exit the split bill flow from the confirm page by clicking the back button.

What alternative solutions did you explore? (Optional)

None

Screen.Recording.2023-06-14.at.2.06.08.PM.mov

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[ahmedGaber93]

Proposal

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

Split Bill - Incorrect back button functionality doesn't allow to cancel Split Bill in the group

What is the root cause of that problem?

Here in navigateToPreviousStep

App/src/pages/iou/MoneyRequestModal.js

Lines 207 to 219 in 20f6ae7

	const navigateToPreviousStep = useCallback(() => {
	if (currentStepIndex === 0) {
	Navigation.dismissModal();
	return;
	}
	if (currentStepIndex <= 0 && previousStepIndex < 0) {
	return;
	}
	setPreviousStepIndex(currentStepIndex);
	setCurrentStepIndex(currentStepIndex - 1);
	}, [currentStepIndex, previousStepIndex]);

we call

  setPreviousStepIndex(currentStepIndex); 
  setCurrentStepIndex(currentStepIndex - 1); 

so if we in step 1 and user click back, the result will be current = 0; prev = 1 (note prev is larger than current);

  previousStepIndex = 1; 
  setCurrentStepIndex = 0; 

This is cause infinite loop, the result should be current = 0; prev = -1;

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

The navigateToPreviousStep should be:
if click back when step = 0; close modal;
if click back when step = 1; currentStep = 0; and prevStep = -1;
if click back when step = 2; currentStep = 1; and prevStep = 0;
so the fix should be

  setPreviousStepIndex(currentStepIndex);
  setPreviousStepIndex(currentStepIndex - 2);  // <<<<<<<<<<<<<<<<<<<<<
  setCurrentStepIndex(currentStepIndex - 1); 

result close.

Screen.Recording.2023-06-14.at.3.30.06.PM.mov

result go back then close.

Screen.Recording.2023-06-14.at.3.30.21.PM.mov

result edit amount then go back then close.

Screen.Recording.2023-06-14.at.3.32.46.PM.mov

What alternative solutions did you explore? (Optional)

[bernhardoj]

We are refactoring money request page here and it's a dupe of #17637

[melvin-bot]

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

[johncschuster]

@bernhardoj Thanks for calling out that this is a duplicate! I didn't think to use the keywords, "infinite loop" to locate a previously created issue.

Would you say we can close this issue then?

[bernhardoj]

Yes, I think we can close this one

[johncschuster]

Thanks! Doing it.