[$250] mWeb/Chrome - Inbox - Blue frame on search icon after returning from finder with device back button

[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: 9.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the staging.new.expensify.com website
2. Tap on the search icon on the top right corner
3. Write anything on the search input
4. Return to inbox using device back button
5. Verify that search icon remains the same

Expected Result:

No difference should be seen on search icon after opening finder, writing on search input and returning to inbox

Actual Result:

A blue frame is displayed around search icon after navigating to finder, writing on search input and returning to inbox using device back button

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6656631_1730902841381.Frame.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854990083710446627
• Upwork Job ID: 1854990083710446627
• Last Price Increase: 2024-11-15
• Automatic offers:
• rojiphil | Reviewer | 105007702
• nyomanjyotisa | Contributor | 105007705

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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.

[nyomanjyotisa]

Proposal

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

mWeb/Chrome - Inbox - Blue frame on search icon after returning from finder with device back button

What is the root cause of that problem?

This code applies a box-shadow to elements when they are in the focus-visible state

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

Add style.boxShadowNone to this line of style

What alternative solutions did you explore? (Optional)

Use pressableRef?.current?.blur() to blur the search button here when the user presses it. This approach prevents issues when the user wants to navigate to the search button using the Tab key

                onPress={Session.checkIfActionIsAllowed(() => {
                    pressableRef?.current?.blur();
                    Timing.start(CONST.TIMING.SEARCH_ROUTER_RENDER);
                    Performance.markStart(CONST.TIMING.SEARCH_ROUTER_RENDER);

                    openSearchRouter();
                })}

Result

mWeb.Chrome.mp4

[truph01]

Proposal

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

• Blue outline appears on the search icon after returning from Finder using the device's back button (or swipe-right action), but not when tapping the app's back button ('<') in the top left.

What is the root cause of that problem?

• In HTML, an element receives the focus-visible pseudo-class (typically displaying a visible border or outline by default, and unrelated to our custom focus-visible as defined here) when focused in a way that usually requires a visible indicator. This behavior varies depending on user interaction:

1. Keyboard Focus: If the user navigates to the element using the keyboard (like pressing the Tab key), the focus-visible class is applied to indicate the focused element.

2. Programmatic Focus with focus(): If you programmatically focus the element using JavaScript (element.focus()) and the element is focusable, the browser may add the focus-visible class based on its heuristics for showing focus indicators.

3. Not Applied on Mouse Clicks: Generally, if an element receives focus due to a mouse click, the focus-visible class is not applied, as browsers usually suppress the focus indicator in this case.

• The behavior I`ve mentioned:

Blue outline appears on the search icon after returning from Finder using the device's back button (or swipe-right action), but not when tapping the app's back button ('<') in the top left.

relates to conditions in points 1 and 3 above.

• In detail:

Device Back Button or Swipe-Right Action: When the search icon is clicked and a keyboard interaction occurs, the focus-visible class is applied, marking the element as focused. Exiting via the device’s back button or swipe-right keeps the focus-visible indicator on the search icon.

App Back Button (‘<’): If the search icon is clicked, then a keyboard action occurs, the focus-visible class is initially applied. However, when the app’s back button is pressed, the browser, recognizing this as a mouse action, suppresses the focus-visible indicator, leaving the search icon without the focus-visible class.

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

• To solve the issue, we just need to prevent search button from being focused when clicking on it:

App/src/components/Search/SearchRouter/SearchButton.tsx

Line 28 in 0f03601

<PressableWithoutFeedback

            <PressableWithoutFeedback
                onMouseDown={(e) => e.preventDefault()}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

Proposal

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

A blue frame is displayed around search icon after navigating to finder, writing on search input and returning to inbox using device back button.

What is the root cause of that problem?

We are applying the :focus-visible pseudo-class styling at the index.html level which applies to all web based platforms (Web, Desktop, Android / iOS mWeb), the pseudo-class is applied in two distinct places:

App/web/index.html

Lines 65 to 67 in 0f03601

	:focus-visible {
	outline: 0;
	box-shadow: inset 0px 0px 0px 1px #5AB0FF;

and

App/web/index.html

Lines 83 to 86 in 0f03601

	:focus[data-focusvisible-polyfill] {
	outline: 0;
	box-shadow: inset 0px 0px 0px 1px #5AB0FF;
	}

the root cause of our issue being that the pseudo-class style is applied globally to all web based platforms, including mWeb without any exclusion.

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

There's a simple and practical CSS-based solution to keep the :focus-visible pseudo-class styling only on devices with cursor pointers (Web / Desktop) and not on touch based devices (Android / iOS mWeb).

To do this we will use the widely supported feature @media: pointer with the coarse value which represents:

The primary input mechanism of the device includes a pointing device of limited accuracy. Examples include touchscreens and motion-detection sensors (like the Kinect peripheral for the Xbox.)

In order to cover both instances where we use the :focus-visible pseudo-class style, we will add the fix under this style block (cascading) such that it will apply to both of them since they are located above, like so:

/* Our first pseudo-class style */
:focus-visible {
    outline: 0;
    box-shadow: inset 0px 0px 0px 1px #5AB0FF;
}

/* ... */

/* Our second pseudo-class style */
:focus[data-focusvisible-polyfill] {
    outline: 0;
    box-shadow: inset 0px 0px 0px 1px #5AB0FF;
}
/* Disable the box-shadow for coarse (touch) pointers */ <- Added our fix right here
@media (pointer: coarse) {
    :focus-visible, :focus[data-focusvisible-polyfill] {
        box-shadow: none;
    }
}
<- End of fix

✅ This ensures the focus effect still stands on Web / Desktop but it won't show up on Android / iOS mWeb anymore, fulfilling the issue's Expected result.

Note

I think it is paramount that we keep the focus visual feedback on the search icon for Web / Desktop platforms for accessibility reasons.

Videos (before / after)

Android: mWeb

Before	After
before.mp4	after.mp4

[melvin-bot]

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

[MitchExpensify]

@rojiphil can you review the proposals here please?

[melvin-bot]

@rojiphil, @MitchExpensify Huh... This is 4 days overdue. Who can take care of this?

[rojiphil]

can you review the proposals here please?

Sorry for the delay here. Will review today.

[melvin-bot]

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

[rojiphil]

Thanks for all your proposals.

@nyomanjyotisa Adding style.boxShadowNone does not seem to be the way to go as the blue frame on search icon will not be displayed when needed (e.g. navigation using tab)

@truph01 Preventing the search button from being focused also does not seem like a good idea as keyboard access is still needed on the button.

This ensures the focus effect still stands on Web / Desktop but it won't show up on Android / iOS mWeb anymore, fulfilling the issue's Expected result.

@ikevin127 I think the expected result is to not display the blue frame on android mweb chrome when device back button is pressed. It does not look like we don’t want to show that on iOS/Android mWeb anymore. Or am I missing something here?

[ikevin127]

Expected Result:
No difference should be seen on search icon after opening finder, writing on search input and returning to inbox

@rojiphil What I understand is that we don't want to see the focus effect in our case on any mWeb platform (touch devices, narrow layout) - meaning to have consistency with Native platforms. The only place where the focus effect should be kept is Web / Desktop for accessibility reasons (because here we can navigate with keyboard and need visual feedback).

[nyomanjyotisa]

@rojiphil Have you tried my alternative solution with pressableRef?.current?.blur()? It prevents the navigation issue, blurs the search icon only when the user selects it and ensures the search icon is no longer focused when closed
This approach is also used here

New-Expensify.mp4

[MitchExpensify]

Not overdue, proposals actively being reviewed

[melvin-bot]

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

[rojiphil]

Sure. Will update today

[melvin-bot]

@rojiphil @MitchExpensify 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!

[rojiphil]

What I understand is that we don't want to see the focus effect in our case on any mWeb platform (touch devices, narrow layout) - meaning to have consistency with Native platforms. The only place where the focus effect should be kept is Web / Desktop for accessibility reasons (because here we can navigate with keyboard and need visual feedback)

I don't think so @ikevin127 as we also support blue frame on mWeb.
Here is a demonstration of blue frame usage in android chrome.

52128-blue-frame-on-chrome.mp4

[rojiphil]

Have you tried my alternative solution with pressableRef?.current?.blur()? It prevents the navigation issue, blurs the search icon only when the user selects it and ensures the search icon is no longer focused when closed
This approach is also used here

@nyomanjyotisa Sorry. I missed your alternative solution. And yeah, that would work. Thanks.

[rojiphil]

Thanks for all your proposals.
@nyomanjyotisa proposal with alternative solution and as mentioned here LGTM.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[truph01]

@rojiphil The selected proposal involves focusing and then blurring the button, which feels redundant and more like a workaround. In my proposal, we can prevent the button from being focused entirely, avoiding this issue.

Additionally, the RCA section in the selected proposal is incorrect. The logic:

App/web/index.html

Line 65 in 0f03601

:focus-visible {

does not cause the bug. Without it, the bug still appears.

cc @madmax330

[rojiphil]

The selected proposal involves focusing and then blurring the button, which feels redundant and more like a workaround. In my proposal, we can prevent the button from being focused entirely, avoiding this issue.

@truph01 Oh.. I already provided feedback for your proposal here but didn't get any response. Let me check again.

[rojiphil]

The selected proposal involves focusing and then blurring the button, which feels redundant and more like a workaround. In my proposal, we can prevent the button from being focused entirely, avoiding this issue.

@truph01 Oh.. I already provided feedback for your proposal here but didn't get any response. Let me check again.

@truph01 Preventing the button from being focused entirely will result in the following issue. Please have a look. The selected proposal though will not have that issue.

Expected Result

52128-focus-main.mp4

Your Proposal

52218-truph-proposal.mp4

Selected Proposal

52218-selected-proposal.mp4

[truph01]

@rojiphil I don't believe this is a regression caused by my proposal, as we are preserving the focus state in the LHN screen when returning from the search route screen.

But if we consider it as a bug, we can update my code change in the proposal to:

                onMouseDown={(e) => {
                    DomUtils.getActiveElement()?.blur();
                    e.preventDefault();
                }}

[rojiphil]

@truph01 Thanks for the response. But that seems more like a workaround to me. The selected proposal is better. Hope to work together with you in some other issue.

@madmax330 Let us go with @nyomanjyotisa proposal with alternative solution if it is fine with you. The proposal was already reviewed here and still LGTM. Thanks.

[truph01]

@rojiphil Thanks for your feedback. I just have one more question in case:

1. User in screen A. Using tab button to focus on any element so that the blue border is displayed in the focused component.
2. Press the search button in the top right.
3. Then navigate back.
4. Should we preserve the focused state in step 1? @madmax330

[rojiphil]

Thanks for your feedback. I just have one more question in case:

1. User in screen A. Using tab button to focus on any element so that the blue border is displayed in the focused component.
2. Press the search button in the top right.
3. Then navigate back.
4. Should we preserve the focused state in step 1? @madmax330

@truph01 Well! I think this issue is not about preserving the focused state. In fact, going this way would mean making it generic with application level implications for all screens. But if you still think this is the way to go, feel free to raise a discussion in slack and take it from there.
Anyway, I will leave it here for @madmax330 to weigh in and decide on the way ahead.

[madmax330]

I agree with @rojiphil , looks like @nyomanjyotisa's proposal is the way to go.

[melvin-bot]

📣 @rojiphil 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @nyomanjyotisa 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖