[$500] IOU - Blue box surrounding the currency after the currency selection

[izarutskaya]

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: v1.4.2-0
Reproducible in staging?: Y
Reproducible in production?: N
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
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

1. Navigate to staging.new.expensify.com.
2. Click FAB > Request money.
3. Click on the currency.
4. Choose any currency and hit ENTER to select.

Expected Result:

There will be no blue box surrounding the currency after the selection.

Actual Result:

There is a blue box surrounding the currency after the selection.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6286950_1700649734281.20231122_101722__1_.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a4bb2613eb2f6256
• Upwork Job ID: 1727292856284299264
• Last Price Increase: 2023-11-22

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

📣 @github-actions[bot]! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

Triggered auto assignment to @lakchote (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[izarutskaya]

Not reproducible on production

20231122_182005.mp4

[BhuvaneshPatil]

@ishpaul777 I saw you mentioned #31225 for introducing a regression, can you please confirm that again? cause it has been mentioned in the issue.

[ishpaul777]

I spoke too early (issue still present with reverting PR) thats why i deleted the comment Sorry for ping.

[BhuvaneshPatil]

okay, so the PR didn't introduce the regression, am I right?

[bernhardoj]

Proposal

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

Selecting a currency with the ENTER key highlights the currency symbol button with a blue outline.

What is the root cause of that problem?

This issue happens after the focus trap PR #27670. When we open the currency selection page, the focus trap will "save" the last focused element, the currency symbol button. When we close the currency symbol button, the focus trap will re-focus on the currency symbol button. This is the default behavior of the focus trap which is explained here.

Because we select the currency with the keyboard, the blue outline shows, and then immediately the focus is moved to the amount input by this code.

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

Lines 74 to 84 in f6ef8b8

	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => textInput.current && textInput.current.focus(), CONST.ANIMATED_TRANSITION);
	return () => {
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	}, []),
	);

In a normal case, I think the behavior is fine, but the unpleasant thing here is that the blue outline is shown for a brief moment and then disappears.

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

For the money request page, don't refocus back to the last focused element by passing shouldReturnFocusOnDeactivate to the ScreenWrapper > FocusTrapView.

focusTrapOptions={{
    returnFocusOnDeactivate: shouldReturnFocusOnDeactivate,

In MoneyRequestSelectorPage and EditRequestAmountPage,

<ScreenWrapper
    shouldReturnFocusOnDeactivate={false}

[lakchote]

The issue comes from this PR and is a regression. cc @roryabraham @kosmydel could you please fix it while considering @bernhardoj proposal above?

I've removed the Deploy Blocker since it's not that sensitive of an issue.

[bernhardoj]

Another issue with the same root cause here #31725. I guess this happens in many places, perhaps we should set shouldReturnFocusOnDeactivate to false by default?

[dukenv0307]

Proposal

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

Workspace - Blue focus is shown when changing workspace name

What is the root cause of that problem?

We added a focus trap in this PR #27670 which makes the focus after we submit a form with enter key

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

In WorkspaceInitalPage, we should add shouldDisableFocusTrap as false into ScreenWrapper. We should also add this prop to other pages which can navigate to a page that contains a form.

App/src/pages/workspace/WorkspaceInitialPage.js

Line 236 in b30b555

<ScreenWrapper

What alternative solutions did you explore? (Optional)

We can change shouldDisableFocusTrap to shouldEnableFocusTrap since almost all pages shouldn't enable focus trap
and update this condition to isEnabled={shouldEnableFocusTrap}

App/src/components/ScreenWrapper/index.js

Line 155 in b30b555

isEnabled={!shouldDisableFocusTrap}

[luacmartins]

@kosmydel can you please add this issue to your list when you work on v3 of #27670?

[lakchote]

Waiting for @kosmydel working on the fix. He's currently working on the ideal nav (link)

[kosmydel]

I think we can close this issue, as the PR was reverted. I am going to fix it when I prepare a new PR.

[lakchote]

Closing this issue as it's no longer happening since the PR was reverted. @kosmydel will create a new PR to address this issue.