[HOLD for payment 2024-07-17] [$500] Web – Chat – Blue frame appears around message Reply when open context menu & use keyboard arrow

[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.6-1
Reproducible in staging?: Y
Reproducible in production?: Y
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. Go to https://staging.new.expensify.com/
2. Log in with any account.
3. Go to any chat that has a message with Reply
4. Right-click the message
5. Verify that context menu opens
6. Repeat pressing up/down arrows from keyboard

Expected Result:

Blue frame does not appear around message Reply when open context menu and use up/down arrows from keyboard

Actual Result:

Blue frame appears around message Reply when open context menu and use up/down arrows from keyboard

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6296213_1701362105821.Blue_frame.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0185e187ff67a1fd61
• Upwork Job ID: 1740328336090607616
• Last Price Increase: 2023-12-28
• Automatic offers:
• situchan | Reviewer | 102947241
• bernhardoj | Contributor | 102947244

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0157a4e915f385c168

[melvin-bot]

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

[Chetax]

@lanitochka17 Please assign it to me I can solve It

[SSRV25]

I think this one already sorted.

[melvin-bot]

📣 @SSRV25! 📣
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>

[SSRV25]

It is working good.
https://github.com/Expensify/App/assets/75600326/0dc922c3-9bcc-4701-8e5d-c3cf040a1909

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[SSRV25]

Contributor details
Your Expensify account email: sauravmdh25@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~015a4060b1006352d5

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[tienifr]

Proposal

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

Web – Chat – Blue frame appears around message Reply when open context menu & use keyboard arrow

What is the root cause of that problem?

When users right click on the thread message, we trigger onSecondaryInteraction function, that means we focus on this component and so when we press UP/DOWN key the blue color will appear (like when we press TAB key)

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

To prevent showing the blur frame we should enable withoutFocusOnSecondaryInteraction in here

We should implement focus-trap for popover component, so when users press Tab key, the first pressable component will be focused. We can use the focus-trap-react in PopoverWithoutOverlay

 <FocusTrap
        focusTrapOptions={{
            initialFocus: false
        }}
    >
...
        </FocusTrap>

Result

Screen.Recording.2024-01-03.at.16.52.55.mov

[MahmudjonToraqulov]

Proposal

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

Web – Chat – Blue frame appears around message Reply when open context menu & use keyboard arrow

What is the root cause of that problem?

There's no 'box-shadow: none'style for this component:

App/src/pages/home/report/ReportActionItemThread.js

Line 46 in 2e8de3f

<PressableWithSecondaryInteraction

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

We can simply add the style to this comeponent by adding style={[ styles.noSelect ]}

App/src/pages/home/report/ReportActionItemThread.js

Line 46 in 2e8de3f

<PressableWithSecondaryInteraction

Result

2023-12-01.15-45-26.mp4

What alternative solutions did you explore? (Optional)

N/A

[getusha]

@tienifr will your solution handle other keys like SHIFT and how will we exclude the tab key?

[tienifr]

@tienifr will your solution handle other keys like SHIFT and how will we exclude the tab key?

Thanks for your comment but I don't think we need to handle this case. After opening context menu, users can press up/down to select the option, so if they see the blur frame appears, it can cause some confusions. If they just press SHIFT, we don't handle anything, so showing the blur frame is the norm. What do you think @getusha?

[melvin-bot]

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

[tienifr]

@getusha what do you think ^?

[melvin-bot]

@getusha Still overdue 6 days?! Let's take care of this!

[getusha]

unassigned my self as i am not able to get windows device to test this, @situchan offered to take this.

[situchan]

I think the issue is that popover is not focused on right click.
i.e. when press Tab key, first focus on composer + rather than reaction icon in popover

focus.mov

[bernhardoj]

PR is ready

cc: @situchan

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

• Fix blue outline shows in Reply box when context menu is open and pressing arrow up key #44715

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

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

• @bernhardoj requires payment automatic offer (Contributor)
• @situchan requires payment automatic offer (Reviewer)

[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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[bernhardoj]

I'll request in ND once payment is due.

[melvin-bot]

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

• Fix blue outline shows in Reply box when context menu is open and pressing arrow up key #44715

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

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

• @bernhardoj requires payment automatic offer (Contributor)
• @situchan requires payment automatic offer (Reviewer)

[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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[bernhardoj]

The payment should be due tomorrow (07-17).

[bernhardoj]

Requested in ND.

[trjExpensify]

Yup, awaiting the checklist!

[situchan]

Not able to find offending PR. I think this bug existed from the beginning.
As this is accessibility issue, I don't think it's worth adding regression test.

[trjExpensify]

Alright, payment summary as follows:

• $500 to @bernhardoj for the fix (go ahead and request)
• $500 to @situchan for the C+ (paid via upwork!)

Internal note: The Upwork contract has a start date of 1st July, and Bernhard was eligible from 27th June according to this SO).

Closing!

[JmillsExpensify]

$500 approved for @bernhardoj