[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 [email protected] 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
• [x] MacOS / Chrome / Safari
• [x] 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

https://github.com/Expensify/App/assets/78819774/bb44cc50-2534-44dc-9d09-33217fbad073

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[bot]]

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

[melvin-bot[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

https://github.com/Expensify/App/assets/126839717/9c21f05e-1038-46d6-bc9a-67ed4ff3beca

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[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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[alexpensify]

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

https://github.com/Expensify/App/issues/26326#issuecomment-1705207247

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[bot]]

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

[melvin-bot[bot]]

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

[alexpensify]

@cristipaval - based on @situchan, should we keep this open for proposals or get SWM involved now?

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@alexpensify @cristipaval @situchan this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[cristipaval]

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

@situchan I'm not sure I get what you're saying here. The contributor's suggestion is to add a workaround in our code to skip the upstream issue. On the other hand, I wouldn't consider this issue a blocker and I think we can wait longer for an upstream fix.

Curious what @AndrewGable @mountiny @neil-marcellini thoughts are, they have more context about this page.

[situchan]

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

@situchan I'm not sure I get what you're saying here. The contributor's suggestion is to add a workaround in our code to skip the upstream issue. On the other hand, I wouldn't consider this issue a blocker and I think we can wait longer for an upstream fix.

yes, I meant contributor fork upstream repro and submit PR. Once the fix is deployed, we can simply bump repo version in app PR. This is general process of upstream issue fix. But as react-navigation is maintained by SWM team, it might be better for SWM agency to be contributor here.

[mountiny]

Can you bring this up in open source channel with what the problem is in the react navigation, then we can get SWM or Callstack in

[alexpensify]

@situchan - I'm catching up from being OOO. Did you start a Slack chat? If no, I can do so. Thanks for the update!

[situchan]

@alexpensify that would be great if you can create thread. Thanks

[melvin-bot[bot]]

@alexpensify, @cristipaval, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[alexpensify]

Open Source convo is here: https://expensify.slack.com/archives/C01GTK53T8Q/p1695062095527169

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@alexpensify @cristipaval @situchan this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[alexpensify]

I've bumped the Slack convo to identify if there is a viable workaround. If not, I think we close this one and it will need to be resolved in react-navigation.