[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [$2000] Unable to change the currency after double-clicking on the current currency

[kavimuru]

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

---

Action Performed:

1. Log in to your account.
2. Click on the FAB menu and select either the "Request Money" or "Split Bill" option.
3. Double-click on the current currency.
4. In the Currency list, select a different currency.
5. Observe that the selected currency does not change.

Expected Result:

The currency should change to the selected one.

Actual Result:

The selected currency remains unchanged after double-clicking on the current currency.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.38-3
Reproducible in staging?: y
Reproducible in production?: y
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

DOUBLE-CLICKED-Currency-not-changed.MP4

QWVO2990.mp4

Expensify/Expensify Issue URL:
Issue reported by: @tranvantoan-qn
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688821290443479

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ac5f2b1e902a7171
• Upwork Job ID: 1678505607142854656
• Last Price Increase: 2023-08-06

[melvin-bot]

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

[ginsuma]

Proposal

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

Unable to change the currency after double-clicking on the current currency

What is the root cause of that problem?

When we double click, we will navigate to currency selector page two times if the navigation time is long enough.

Because of 2nd click, activeRoute in navigateToCurrencySelectionPage function is currency selector page already.
By the logic here, we will use backTo to navigate when selecting currency => back to that page again.

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

We can debounce navigateToCurrencySelectionPage function in MoneyRequestAmountPage

this.navigateToCurrencySelectionPage = _.debounce(this.navigateToCurrencySelectionPage.bind(this), 300);

What alternative solutions did you explore? (Optional)

We can check activeRoute is not currency selector page before navigation.

if (!decodeURIComponent(activeRoute).includes('/new/currency/')) {
    Navigation.navigate(ROUTES.getMoneyRequestCurrencyRoute(this.iouType, this.reportID, this.state.selectedCurrencyCode, activeRoute));
}

[bernhardoj]

Proposal

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

Pressing the currency symbol twice will make the currency selection doesn't work.

What is the root cause of that problem?

When we navigate to currency selection, we pass backTo params and the value is from the currently active route (or path, for example,/request/new or /split/new)

App/src/pages/iou/steps/MoneyRequestAmountPage.js

Lines 410 to 411 in 60f4817

	const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, ''));
	Navigation.navigate(ROUTES.getMoneyRequestCurrencyRoute(this.iouType, this.reportID, this.state.selectedCurrencyCode, activeRoute));

When we select a currency, we will navigate back to the backTo route and append a currency params.

App/src/pages/iou/IOUCurrencySelection.js

Line 92 in 60f4817

Navigation.navigate(`${props.route.params.backTo}?currency=${option.currencyCode}`);

The currency will be updated if the currency params exist.

App/src/pages/iou/steps/MoneyRequestAmountPage.js

Lines 144 to 148 in 60f4817

	const prevCurrencyParam = lodashGet(prevProps.route.params, 'currency', '');
	const currencyParam = lodashGet(this.props.route.params, 'currency', '');
	if (currencyParam !== '' && prevCurrencyParam !== currencyParam) {
	this.setState({selectedCurrencyCode: currencyParam});
	}

When we quickly press the currency symbol multiple times, we will do the navigation action multiple times and the active route for the first and the rest action is different. Let's take request money as an example.

1. First click will get the active route which is /request/new and navigation (to currency selection) action is dispatched. This action will update the route in the navigation state. (current route now is: /request/new/currency?backTo=/request/new)
2. Second click will get the active route which is /request/new/currency?backTo=request/new, but we remove all query params so the active route is /request/new/currency. (current route now is: /request/new/currency?backTo=/request/new/currency)
3. The next multiple clicks will always have the same active route.

Notice that the backTo param is /request/new/currency, therefore, when we select a currency, it will navigate to itself with a currency param appended to it, which means the current route now will be /request/new/currency?currency=ANYTHING. Now, the backTo param is gone and when we select a currency again, it will simply navigate back.

App/src/pages/iou/IOUCurrencySelection.js

Lines 89 to 90 in 60f4817

	if (_.isEmpty(backTo) || props.navigation.getState().routes.length === 1) {
	Navigation.goBack();

Let's say we fix the above issue by disabling the button press when navigating.

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

We should prevent the user from clicking the currency symbol multiple times. In PressableWithFeedback, we already use useSingleExecution to disable the button while navigating.

App/src/components/Pressable/PressableWithFeedback.js

Lines 88 to 90 in 25f7ac1

	onPress={(e) => {
	singleExecution(() => props.onPress(e))();
	}}

Currently, currency symbols use PressableWithoutFeedback which doesn't have this logic (idk the reason the press logic is only applied to PressableWithFeedback). So, the solution is to move the press logic above from PressableWithFeedback to BaseGenericPressable, so both PressableWithFeedback and PressableWithoutFeedback will have the same logic.

However, this isn't enough. On some platforms, long-pressing a button will trigger the onPress callback. This becomes a problem because currently, when we "disable" the button/Pressable, it will just pass undefined handlers to the Pressable, for example.

App/src/components/Pressable/GenericPressable/BaseGenericPressable.js

Line 137 in 25f7ac1

onPress={!isDisabled ? onPressHandler : undefined}

So, even when we "disable" the button, the Pressable can still receive touch and "start the long press delay timer" and trigger the long press after the button is re-enabled. To fix this, we should fully disable the Pressable by disabling it through disabled props.

disabled={isDisabled}

This will set pointerEvents to none, thus disabling any interaction with the component. The downside of this is, we can't have a not-allowed cursor. This is normal, but as we want to show the not-allowed cursor when it's disabled, we can wrap the Pressable with a View and move the cursor style from Pressable to View.

App/src/components/Pressable/GenericPressable/BaseGenericPressable.js

Line 145 in 25f7ac1

getCursorStyle(shouldUseDisabledCursor, [props.accessibilityRole, props.role].includes('text')),

With these changes, we don't need isDisabled && onPress and such anymore.

I also suggested splitting the PR into 2 PRs. The first PR is to move the useSingleExecution logic to BaseGenericPressable and the second PR is to fix the long press issue.

[melvin-bot]

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

[melvin-bot]

Current assignee @maddylewis is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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