[HOLD for payment 2022-04-13] [$250] When you click on a message and then press SHIFT a blue border appears - reported by @mdneyazahmad

[mvtglobally]

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. Navigate to any chat
2. click on any message and press SHIFT

Expected Result:

Border should not appear.

Remove the behavior where shift + click makes the message appear to be tabbed in focus.

Actual Result:

Blue border appears

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.39-1
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2022-02-09.at.3.50.51.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @mdneyazahmad
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644402201151769

View all open jobs on GitHub

posted here

[MelvinBot]

Triggered auto assignment to @johncschuster (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @michelle-thompson (Design), see these Stack Overflow questions for more details.

[pecanoro]

@michelle-thompson @shawnborton tagging you both before I assign external to verify what's the desired behaviour here, we don't want that blue border at all, right?

[parasharrajat]

Note: That blue border indicates the focused item via Tab navigation. Every element on the app shows that border bcz I have added it 😅 . You can click the LHN title on the web and start tabbing to observe it...

[pecanoro]

@parasharrajat Ohh gotcha, but the behavior is a little buggy, isn't it? Like when you hover another element it does disappear only partially.

[parasharrajat]

I agree that is buggy indeed. But I would say that should be fixed for all elements in the app that have this issue. Also, this should be task under accessibility.

But IMO this issue is irrelevant to that bug.

[shawnborton]

Yeah I think from an accessibility perspective, we want the blue outline when a message is "selected" to show a visual cue that the message item is in focus - but that being said, I would think the only way to select a message is to tab through the items. So I think maybe we should just get rid of this select + click behavior. Thoughts?

[michelle-thompson]

Yup, agree with Shawn here!

[MelvinBot]

@michelle-thompson Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[pecanoro]

I am a bit confused so do we want to remove the tab functionality completely?

[shawnborton]

I don't think we want to remove the tab functionality. I'm just suggesting we remove that weird behavior where shift + click makes the message appear to be tabbed in focus.

[pecanoro]

@shawnborton Awesome, thanks! I updated the description to add that so when we export the issue, it's clear what we want to accomplish.

[jboniface]

@tgolen bump for addressing proposal

[tgolen]

Thanks for the bump! I missed this when I was OOO.

Thanks @mollfpr for clarifying that! I think it's an OK solution, but it looks like PressableWithSecondaryInteraction is used in 4 other places in the code. Should the solution then be to add onKeyDown to all 5 places, only in this 1 place, or to do it instead inside the component (so it's applied to all 5 places automatically)?

[mollfpr]

I think is better to pass onKeyDown only in this 1 place.

Currently PressableWithSecondaryInteraction is only use by ReportActionItem and AnchorForCommentsOnly. For AnchorForCommentsOnly is also rendered inside ReportActionItem so it's already covered.

But I'm up for others' input.

cc @tgolen

[tgolen]

Ah, OK. Makes sense, thank you! 🟢 to hire @mollfpr for the proposal @jboniface

[MelvinBot]

📣 @mollfpr You have been assigned to this job by @jboniface!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[jboniface]

@mollfpr have you applied to the Upwork job?

[mollfpr]

@jboniface not yet, I couldn't find the link.
Applied!

[melvin-bot]

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

• workaround to hide blue border box on ReportActionItem #8443

If no regressions arise, payment will be issued on 2022-04-13. 🎊

[jboniface]

@mdneyazahmad hey, can you apply here? you're supposed to get a reporting bonus for this

[mdneyazahmad]

@jboniface I already applied. Thank you

[jboniface]

paid everyone

[parasharrajat]

Because of this issue's PR, we are facing a new issue #12554.

Is it really important to fix this blue border behavior? I checked with chrome and Chrome by default does that. There are complex solutions to fix the new bug but I still think the solution in PR is very unstable. It can have unknown side-effects.

My suggestion is to revert this change and keep this blue border behavior.

@shawnborton #7853 (comment) Do you feel that we need to fix this issue?

cc: @rushatgabhane

[shawnborton]

I would be fine with your suggestion @parasharrajat

[s77rt]

+1 for the revert

[s77rt]

I think my proposal here #12010 (comment) would be better than a revert. It fixes the original issue and does not cause weird behaviour.

[parasharrajat]

This will be reverted as part of #12554. We have found a better solution.