[HOLD for payment 2024-02-07] [$500] Request money - Tabs disappear when navigating with Tab key

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

---

Action Performed:

1. Go to staging.new.expensify,com
2. Go to + > Request money
3. Navigate to the buttons in Request money modal using Tab key on the keyboard

Expected Result:

The tabs do not disappear

Actual Result:

The tabs disappear

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

Bug6183081_20230829_223053.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0163bcce77597627a1
• Upwork Job ID: 1699156588272672768
• Last Price Increase: 2023-09-26

[melvin-bot]

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

[s-alves10]

Proposal

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

In request money page, tabs disappear when pressing tab key

What is the root cause of that problem?

When tab key is pressed, the focus is moved to the next focusable element. We have several focusable elements in the money request page, such as amount input in amount page, Choose file button in scan page, etc. When focus is moved, the whole tab navigator elements moves to the page.

This is the root cause.

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

We can disable the tab key event in the money request page. We have already addKeyDownPressListner function defined here

Add the following code in MoneyRequestSelectorPage

    useEffect(() => {
        const handler = (event) => {
            if (event.code !== CONST.KEYBOARD_SHORTCUTS.TAB.shortcutKey) {
                return;
            }
            event.preventDefault();
            event.stopPropagation();
        };
        addKeyDownPressListner(handler);

        return () => removeKeyDownPressListner(handler);
    }, []);

This can fix the issue

Result

26326.mp4

What alternative solutions did you explore? (Optional)

We can add tabIndex: -1 style to all focusable elements, but I don't think this is a good choice because there are so many focusable elements

[bernhardoj]

This is a bug in react-navigation

[melvin-bot]

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

[alexpensify]

@cristipaval - Can you confirm if we need to put this one on hold or we should close based on @bernhardoj's feedback that this is an RN issue? Thanks!

[cristipaval]

yes it seems that the linked RN issue is relevant to our issue. But I am curious what a C+ would say about skipping the issue with the proposal that we have.

[alexpensify]

@cristipaval - are you suggesting assigning C+ to review or start a convo in that Slack room for a larger discussion?

[cristipaval]

I'm suggesting assigning a C+ to keep the conversation here.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@situchan - please review @cristipaval's thoughts here:

#26326 (comment)

Let's figure out if this proposal will fix the issue or if we need to hold off until the RN issue is resolved. Thanks!

[alexpensify]

@situchan any update here?

[situchan]

Agree this is upstream issue.
We can let contributor fix in upstream or SWM agency fix the issue.

[melvin-bot]

@alexpensify, @cristipaval, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[s-alves10]

@situchan

PR is ready for review #35154

[alexpensify]

Awesome, it looks like this one is moving forward!

[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 1.4.33-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: disable tab key event in Money Request page #35154

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

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

• @teneeto does not require payment (Contractor)
• @situchan requires payment (Needs manual offer from BZ)
• @s-alves10 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @teneeto is from an agency-contributor and not due payment
• C+: @situchan paid $500 via Upwork (LINK)
• Contributor: @s-alves10 paid $500 via Upwork (LINK)

BugZero Checklist (@alexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/jobs/~011b29abee01f46be4)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

---

Context:

#26326 (comment)

[melvin-bot]

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

[alexpensify]

Ok, I have to change the Upwork URL. Here's the new one: https://www.upwork.com/jobs/~011b29abee01f46be4

[alexpensify]

@situchan and @s-alves10 - please accept the job offer in Upwork and I can complete the process. Thanks!

[alexpensify]

Status Update:

• @situchan has been paid in Upwork
• Waiting for @s-alves10 to accept the offer in Upwork

I'll check later to see if I can complete the process and close this GH.

[alexpensify]

Checking in again, still waiting for @s-alves10 to accept the offer in Upwork.

I'll check later to see if I can complete the process and close this GH.

[s-alves10]

@alexpensify I'm sorry. I accepted the offer

[alexpensify]

It's all good and we are all set here. Everyone has been paid via Upwork. I'm closing this GH and the job is closed in Upwork too.