Android & iOS - Chat - No gray focus background when option in + menu is tapped

[IuliiaHerets]

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.59-0 Reproducible in staging?: Y Reproducible in production?:Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y Email or phone of affected tester (no customers): applausetester+zm50@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

1. Launch ND or hybrid app.
2. Open any report.
3. Tap +.
4. Tap any option (or long tap to see the problem better).

Expected Result:

When the option in + menu is tapped, there will be gray focus background (mweb behavior).

Actual Result:

When the option in + menu is tapped, there is no gray focus background. Only the icon on the left turns green.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/cb896ef5-dee4-4f6b-871a-72e739ae47e9

View all open jobs on GitHub

[melvin-bot[bot]]

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

[bernhardoj]

Proposal

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

No bg color when pressing popover menu item.

What is the root cause of that problem?

In PopoverMenu, we pass a background color style to the Menuitem. https://github.com/Expensify/App/blob/81c17e8b401d7d8ea3f9e52061168df726531a24/src/components/PopoverMenu.tsx#L267-L273

If none of the conditions are satisfied, we return an undefined background color. https://github.com/Expensify/App/blob/81c17e8b401d7d8ea3f9e52061168df726531a24/src/styles/utils/index.ts#L1122-L1136

That wrapper style override the pressed style from MenuItem. https://github.com/Expensify/App/blob/81c17e8b401d7d8ea3f9e52061168df726531a24/src/components/MenuItem.tsx#L597-L599

StyleUtils.getButtonBackgroundColorStyle returns {backgroundColor: 'xxx'} and wrapperStyle contains {backgroundColor: undefined}.

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

We need to return empty style from getItemBackgroundColorStyle if none of the conditions is satisfied instead of returning undefined.

function getItemBackgroundColorStyle(...): ViewStyle {
    if (isDisabled) {
        return {backgroundColor: undefined};
    }

    if (isSelected) {
        return {backgroundColor: selectedBG};
    }

    if (isFocused) {
        return {backgroundColor: focusedBG}
    }

    return {};
}