[HOLD for payment 2024-08-02] [HOLD for payment 2024-07-25] [$500] Web - Expense - Blue border selection on back icon RHP after hitting enter on BNP

[lanitochka17]

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: 1.4.83-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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to chat
3. Go to + > Submit expense > Manual
4. Enter amount
5. Hit Enter

Expected Result:

The back icon on RHP will not have blue border selection

Actual Result:

The back icon on RHP has blue border 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

Add any screenshot/video evidence

Bug6511961_1718284382905.enter.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018358d1ec7f51e120
• Upwork Job ID: 1801251133562170195
• Last Price Increase: 2024-06-27
• Automatic offers:
• suneox | Contributor | 102988636

Issue Owner

Current Issue Owner: @s77rt

[melvin-bot]

Triggered auto assignment to @danieldoglas (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[lanitochka17]

@danieldoglas FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[danieldoglas]

Not a deploy blocker related to web, removing the label

[melvin-bot]

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

[melvin-bot]

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

[luacmartins]

This was likely caused by #39520

[gawandeabhishek]

To address this issue, we can use the .that-element:focus { outline: none; } CSS class. This rule removes the default focus outline that appears on elements when they are focused. This can enhance the visual appearance and usability of the element, especially in cases where the default browser outline is intrusive or unnecessary.

[tsa321]

Proposal

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

Web - Expense - Blue border selection on back icon RHP after hitting enter on BNP

What is the root cause of that problem?

The SCREENS.MONEY_REQUEST.STEP_PARTICIPANTS screen isn't included in

App/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts

Line 4 in 2a641d9

const SCREENS_WITH_AUTOFOCUS: string[] = [

which will make focusTrap to focus the first element of the screen:

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Lines 52 to 55 in 2a641d9

	if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) {
	return false;
	}
	return undefined;

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

include SCREENS.MONEY_REQUEST.STEP_PARTICIPANTS in SCREENS_WITH_AUTOFOCUS.
And if we need to disable the auto focus on all money request screen we can use ...Object.values(SCREENS.MONEY_REQUEST)

Alternative solutions

We can disable the initialFocus of FocusTrap. We set false in initialFocus for all screens.

and if there is problem with other screen element is still focused and receive key event we can set onActivate property:
The code that work for me is to move the focus to other element that doesn't receive keydown event:

onActivate: () => document?.querySelector('[tabindex="0"]').focus()

This could fix that issue.

Alternative solutions (2)

We can defer the blue outline appearance so it will be shown only when it is focused after some milli seconds. By using this method we can remove the initialFocus property of FocusTrap in FocusTrapForScreen.

The code could be:
In FocusTrapForScreen we add a ref:
const screenRef = useRef(null);

then add the screenRef in children:
const childElement = React.cloneElement(children, {ref: screenRef});

then onActivate will be:

onActivate: () => {
    const firstTabElement = screenRef?.current?.querySelector('[tabindex="0"]');
    if (firstTabElement) {
        const elementBoxShadow = firstTabElement.style.boxShadow;
        firstTabElement.style.boxShadow = "none";
        setTimeout(() => {
            firstTabElement.style.boxShadow = elementBoxShadow;
        }, 300);
    }
},

then change the returned children with childElement

[s77rt]

@gawandeabhishek Please checkout the contributing guide https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.8-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• prevent initial focus trap while has a focused element. #44932

If no regressions arise, payment will be issued on 2024-07-25. 🎊

For reference, here are some details about the assignees on this issue:

• @suneox requires payment automatic offer (Contributor)
• @s77rt requires payment through NewDot Manual Requests

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @joekaufmanexpensify you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[joekaufmanexpensify]

All set to issue payment. We need to pay:

• @suneox - $250 for PR via Upwork (50% reduction because of regression)
• @s77rt - $250 for C+ via NewDot (50% reduction because of regression).

[joekaufmanexpensify]

@suneox $500 sent and contract ended!

[joekaufmanexpensify]

Upwork job closed.

[joekaufmanexpensify]

All that's left is for @s77rt to request their $500 via NewDot. Going to close this one since it's otherwise all set. Thanks everyone!

[s77rt]

@joekaufmanexpensify This should be $250 for causing a regression #45571

[JmillsExpensify]

@joekaufmanexpensify mind updating the payment summary above?

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.12-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Prevent initial focus when the screen cannot be focused. #45620

If no regressions arise, payment will be issued on 2024-08-02. 🎊

For reference, here are some details about the assignees on this issue:

• @suneox requires payment automatic offer (Contributor)
• @s77rt requires payment through NewDot Manual Requests

[joekaufmanexpensify]

Ah okay got it. I don't see that there was a post to the issue about the deploy blocker/regression previously, which is why it was not previously noted in the payment summary.

Updated payment summary to note that both parties are actually due $250 here because of the regression.

[joekaufmanexpensify]

I need to request a $250 refund from @suneox via Upwork. Getting an insufficient permissions error in upwork requesting a refund. Updating my permissions via this SO to allow processing refunds.

[suneox]

I need to request a $250 refund from @suneox via Upwork. Getting an insufficient permissions error in upwork requesting a refund. Updating my permissions via this SO to allow processing refunds.

Sure, I'm looking for the refund section on Upwork and process ASAP

[joekaufmanexpensify]

All good!I haven't requested it yet. Will let you know once I do!

[suneox]

@joekaufmanexpensify I have refunded 50%

[joekaufmanexpensify]

Ah, perfect. TY! I see it processed on my end.

[joekaufmanexpensify]

Okay, now all that's left is to process $250 payment to @s77rt. Payment summary here.

[JmillsExpensify]

$250 approved for @s77rt