[HOLD for payment 2024-04-03] [$500] Web -Workspace-Highlight for the checkbox goes out of bound on members page

[kbecciv]

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: 1.4.46.0
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by:

Action Performed:

1. Go to workspace settings page > Members
2. Mark one of the members' checkbox
3. Click on down arrow on keyboard
4. Observe the highlight on the checkbox

Expected Result:

The highlight should not go out of bounds

Actual Result:

The highlight on the checkbox goes out of bound

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6398225_1709297242623.invitemembershighlightbug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016007b30fb57512d8
• Upwork Job ID: 1763710609566830592
• Last Price Increase: 2024-03-01

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kbecciv]

@greg-schroeder 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

[Krishna2323]

Proposal

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

What is the root cause of that problem?

Here we applied selectMultipleStyle which has styles.mr3 to Checkmark icon container which is inside PressableWithFeedback which has the focus.

App/src/components/SelectionList/BaseListItem.tsx

Line 84 in 39a257d

<View style={selectMultipleStyle}>

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

Move selectMultipleStyle to PressableWithFeedback style prop.

Result

Alternative

Override margin right on view with mragin right 0 and apply styles.mr3 to PressableWithFeedback.

Alternative 2

Use Checkbox component and remove styles.mr3 from StyleUtils.getMultiselectListStyles and directly apply styles.mr3 to Checkbox.

{canSelectMultiple && (
    <Checkbox
        isChecked={item.isSelected}
        onPress={handleCheckboxPress}
        accessibilityLabel={item.text}
        style={[styles.mr3]}
        containerStyle={selectMultipleStyle}
    />
)}

Alternative 3

Remove styles.mr3 from StyleUtils.getMultiselectListStyles and directly apply styles.mr3 to PressableWithFeedback

Additional

Also, there is an issue with the Checkbox inside BaseListItem, it can be selected even if the option is disabled, we can pass disabled={isDisabled} to Checkbox or PressableWithFeedback to solve that issue also.

Result

checkbox_styles.mp4

[Krishna2323]

Proposal Update

Added alternatives

[melvin-bot]

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

[melvin-bot]

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

[greg-schroeder]

Probably a low prio #wave8 issue eh @zanyrenney?

[rayane-djouah]

same root cause with #37511, will be fixed by #37521

[rayane-djouah]

good catch @Krishna2323 on this:

Additional
Also, there is an issue with the Checkbox inside BaseListItem, it can be selected even if the option is disabled, we can pass disabled={isDisabled} to Checkbox or PressableWithFeedback to solve that issue also.

@aimane-chnaif should we include this in our PR ? or should it be handled separately ? I didn't find any open issue for this bug.

fixed by 7bc882c

[Krishna2323]

@rayane-djouah, I think that is also fixed on main.

[rayane-djouah]

@rayane-djouah, I think that is also fixed on main.

yes, fixed by 7bc882c

[greg-schroeder]

all right, so closing then!

[melvin-bot]

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

• Fixes for selection list #37521

If no regressions arise, payment will be issued on 2024-04-03. 🎊

For reference, here are some details about the assignees on this issue:

• @ishpaul777 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [@ishpaul777] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@ishpaul777] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@ishpaul777] Determine if we should create a regression test for this bug.
• [@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@greg-schroeder] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: