[$250] Category - Long press a category&tap outside highlights the category in mWeb & not in hybrid

[IuliiaHerets]

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: V9. 0.53-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N
Issue reported by: Applause Internet Team

Action Performed:

1. Launch site in both mweb and hybrid app
2. Tap profile icon -- Workspaces-- workspace
3. Tap category
4. Long press on a category and tap outside
5. Note the category is highlighted in mweb and not in hybrid app

Expected Result:

Long pressing on a category and tapping outside must show same behavior in mweb and hybrid app.

Actual Result:

Long pressing on a category and tapping outside highlights the category in mweb and not in hybrid app.
Issue reproduced only in redmi devices.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6643788_1729720924313.Screenrecorder-2024-10-24-03-23-11-698_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021853406887958563486
• Upwork Job ID: 1853406887958563486
• Last Price Increase: 2024-11-11

Issue Owner

Current Issue Owner: @c3024

[melvin-bot]

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

[IuliiaHerets]

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

[trjExpensify]

Issue reproduced only in redmi devices.

Given this, I'm inclined to close this issue. @Expensify/design for a quick hip check before I do.

[dubielzyk-expensify]

Yeah I can't reproduce this

[trjExpensify]

Great stuff, closing then.

[shahinyan11]

@trjExpensify @dubielzyk-expensify The problem is still reproducible on last main

Untitled.mov

[trjExpensify]

@shahinyan11 on a Redmi device only?

[shahinyan11]

@shahinyan11 on a Redmi device only?

On this simulator

[trjExpensify]

Oh hm, @dubielzyk-expensify what Android device did you test?

[dubielzyk-expensify]

Tested it on a Pixel 7

[dubielzyk-expensify]

My bad. I can actually reproduce it now. I'm still not overly convinced we should fix it, but I'll leave that decision to you @trjExpensify

[trjExpensify]

Ah okay, so yeah.. I think we should at least investigate the root cause then if it's even reproducible on a Pixel.

[melvin-bot]

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

[melvin-bot]

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

[Jaeta01]

Proposal

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

Category - Long press a category&tap outside highlights the category in mWeb & not in hybrid

What is the root cause of that problem?

In this case, we have implemented code to prevent focus during an onLongPress action on the mobile web platform (as referenced here). However, the issue is that the onFocus event is still triggered after the modal—opened by the long press action—is closed.

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

Move the prevent logic inside BaseListItem component and blur the focused item before return

1. Pass shouldIgnoreFocus as a prop to ListItem component. ( Also need to add shouldIgnoreFocus?: boolean value in ListItem type )
2. Add shouldIgnoreFocus in TableListItem component's props and pass following prop shouldIgnoreFocus={shouldIgnoreFocus} to BaseListItem
3. Add shouldIgnoreFocus in BaseListItem component's props and update this onFocus to bellow

onFocus={()=>{
    if(shouldIgnoreFocus || isDisabled) {
        pressableRef.current?.blur()
        return;
    }
    onFocus()
}}

What alternative solutions did you explore? (Optional)

[c3024]

I will check the proposal and update.

[melvin-bot]

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