Message - Pressing enter over a message shows a black border around it

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

Pressing enter on a message should not add a black border around it.

Actual Result:

Pressing enter over a message shows a black border around it

Action Performed:

1. Log in to e.cash
2. Navigate to a conversation
3. Hover the cursor over a message and click it
4. Press enter

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.50-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Bug5078158_Recording__97.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

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

[isagoico]

Issue reproducible today during KI retests

[MelvinBot]

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

[deetergp]

Rather than triage and release into the general pool, I am going to keep this one and try to fix it. I am going to change the priority from Daily to Weekly though.

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests

[deetergp]

Did some digging into this today and discovered that an attribute data-focusvisible-polyfill="true" is being added to one of the divs that wraps a message in chat history. I think it's a react-native issue, something that is meant to be for touch/mobile UIs but is showing up in Web. Will do a bit more digging to see what can be done to address it.

[deetergp]

It looks like the polyfill is added by the browser and is used to indicate, when navigating a web page with a keyboard, that an element has focus. I think the right solution here is to figure out how to prevent individual messages from being able to receive focus--there's not much you can do with them when they get focus anyway.

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests.

[isagoico]

Issue reproducible during KI retests.

[isagoico]

Issue reproducible during KI retests.

[deetergp]

Letting go of this one, since I've got some bigger, time-sensitive fish to fry. There's no reason this cannot be an external issue.

[MelvinBot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

Proposal

This is a quick one. We have to disable the outline over the message item Pressable to fix it. By default, every focusable element gets outline, and Messages are wrapped inside Pressable which as focusable
To fix it in nutshell
add styles style={styles.noOutline} to https://github.com/Expensify/Expensify.cash/blob/9d77e53f89537820c6e1af177c58a6aac55c4da4/src/components/PressableWithSecondaryInteraction/index.js#L44

[isagoico]

Issue reproducible during KI retests

[MelvinBot]

Triggered auto assignment to @marcaaron (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bfitzexpensify]

Posted here on upwork. @marcaaron just a heads up @parasharrajat has posted a proposal above.

[parasharrajat]

I suggest we get going with this issue. This is a minor one.

[shubhamgrover93]

:focus-visible {
outline: none !important;
}
Try this, it may help to resolve..

[LariceG]

This attribute data-focusvisible-polyfill should be set to 'false' in order to remove the black border.

data-focusvisible-polyfill="false"

[gurwindersm]

Element Class:focus{
outline:none !important;
border:0;
}

Please refer above. You may need to assign element class before pseudo class ':focus'

[bfitzexpensify]

Bump @marcaaron, we good to move forward with Rajat's proposal?

[marcaaron]

I suggest we get going with this issue. This is a minor one.

@parasharrajat counterpoint, if it's minor then there's not really any need for urgency

Sorry for the delay here. I'm not sure this is a bug at all. Going back to @deetergp's comment here...

It looks like the polyfill is added by the browser and is used to indicate, when navigating a web page with a keyboard, that an element has focus. I think the right solution here is to figure out how to prevent individual messages from being able to receive focus--there's not much you can do with them when they get focus anyway.

I have a few questions about this behavior, but ultimately I think we can just "do nothing" here. It seems like an accessibility feature not a bug. Keyboard users will maybe desire this feedback to see what they are focused on. Removing this outline seems like a step in the wrong direction.

Thoughts, @stitesExpensify @kadiealexander ?

[isagoico]

Issue reproducible during KI retests

[stitesExpensify]

I agree, I don't think this is a problem.

[marcaaron]

Ok. gonna close then. Thanks!