[$250] Chat - Plus/FAB icon menu can't be opened by pressing Enter on keyboard

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.63-7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #40425

Action Performed:

1. Launch new Expensify
2. Open any chat and click on the text box for a new message
3. Press SHIFT+TAB on the keyboard to highlight the Plus icon
4. On the Desktop app press ENTER on the keyboard

Expected Result:

The Plus icon on chats can be highlighted and pressed using just the keyboard and TAB or SHIFT+TAB

Actual Result:

The Plus icon on chats can be highlighted on Desktop or Chrome but when pressing ENTER the menu appears and is immediately dismissed. On Safari using the keyboard and TAB or SHIFT+TAB does not get the plus icon highlighted
It's the same on the main FAB icon

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

Bug6455110_1713544744910.Recording__827.mp4

Bug6455110_1713544744922.Recording__828.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f7e1c8f66a91018d
• Upwork Job ID: 1782806823766507520
• Last Price Increase: 2024-04-24

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@sakluger 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

[dragnoir]

Proposal

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

Plus/FAB icon menu can't be opened by pressing Enter on keyboard

What is the root cause of that problem?

When the buttons are activated by pressing the 'Enter' key on the keyboard, the onPress event is triggered twice. This results in the action being executed twice—first opening and then immediately closing. This is why we observe a blurred effect and the menu appears briefly before hiding.

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

As we do here #40642
and here #39924

We should prevent the second keyboard action here

if (event.key  ===  'Enter'  ||  event.keyCode  ===  ' ') {
  return;
}

POC:

20240422_112322.mp4

[melvin-bot]

@sakluger Whoops! This issue is 2 days overdue. Let's get this updated quick!

[sakluger]

Asked Rory in Slack about the expected behavior here: https://expensify.slack.com/archives/C01GTK53T8Q/p1713811802815369

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[sakluger]

It sounds like this same issue has already been fixed several times (ex. #40642 and
#39924). Let's make sure that whatever solution we go with is a global solution.

Accordingly, I'm going to increase the bounty back to $250.

[melvin-bot]

Upwork job price has been updated to $250

[dragnoir]

Proposal

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

Plus/FAB icon menu can't be opened by pressing Enter on keyboard

What is the root cause of that problem?

I's a bug withing react-native-web package version 0.19.9

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

Update react-native-web package to version 0.19.11 and all the problems with keyboad enter key souble actions will be solved.

20240424_121834.mp4

[roryabraham]

@dragnoir, thanks for your latest proposal but @bernhardoj proposed the same thing just yesterday over here, after preparing the upstream PR and getting it merged. So I'm going to just put this on HOLD for #33502 for now and let @bernhardoj finish upgrading react-native-web.

[sakluger]

@miljakljajic assigning you to help watch this issue while I'm OOO through May 31. I'll take back over if it's still open when I return.

All that needs to be done for now is to check on the hold issue #33502 weekly to see if it's made any movement.

[sakluger]

Removed @miljakljajic since I'm back.

The PR linked to the hold issue is merged and on Staging. @roryabraham does that mean that we can start working on this one now, or should we wait until it's on prod?

[dragnoir]

@sakluger After the PR is merged, the issue is half solved. The keyboard enter key opens the Plus icon when highlighted but does not close it when highlighted. Do we need to update our proposals?

[melvin-bot]

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

• Update rn-web to 0.19.12 #40960

If no regressions arise, payment will be issued on 2024-06-11. 🎊

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

• @thesahindia requires payment through NewDot Manual Requests

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

• [@thesahindia] The PR that introduced the bug has been identified. Link to the PR:
• [@thesahindia] 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:
• [@thesahindia] 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:
• [@thesahindia] Determine if we should create a regression test for this bug.
• [@thesahindia] 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.
• [@sakluger] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[sakluger]

@dragnoir good catch. Any idea why updating RN fixed open behavior but did not fix the close behavior?

As for payment, no payment is due for the linked PR because payment is being handled in another linked issue.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @thesahindia owed $250 via NewDot

BugZero Checklist (@sakluger)

• 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/ab/applicants/1782806823766507520/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[sakluger]

Removed the payment information since no work was done specifically for this GH issue.

Waiting to find out what's going on with the behavior around closing the menu.

[sakluger]

@dragnoir friendly bump - do you know why the close behavior wasn't fixed by updating RN?

[bernhardoj]

@sakluger hi, I don't think it's possible to highlight the FAB anymore to close it. Please see the video below. The TAB-bing focus is trapped within the FAB menu (it's the behavior for all popover/modal)

Screen.Recording.2024-06-15.at.09.54.46.mov

[melvin-bot]

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

[sakluger]

Hey @bernhardoj, good point - thanks for pointing that out! We can close this issue out now.

Since the linked PR was paid out on another issue, no payment is due here. For any questions, please bring it up in Slack. Thanks!