[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 contributors@expensify.com 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-d]

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