[HOLD for payment 2023-10-18] [$500] Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill #28064

kbecciv · 2023-09-23T14:11:27Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Click on FAB and select "Send Message"
Add two emails and create a group with the two emails
Inside the chat, click on the plus sign and select "Split Bill"
Add the desired amount and click "Next"
Hover over email (cursor is disabled)
Hover over the checkbox (cursor changes to hand icon, but remains delectable)

Expected Result:

When hovering over the checkbox in the "Paid By" section during split bill, the cursor should be disabled, just like when hovering over the associated email.

Actual Result:

While hovering over the email, the cursor is properly disabled. However, when hovering over the checkboxes, the cursor changes to a hand icon during split bill.

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.73.0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-capture.mp4

Recording.4714.mp4

Expensify/Expensify Issue URL:
Issue reported by: @tewodrosGirmaA
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695270713412089

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01e8f7be88bc37af93
Upwork Job ID: 1705585682941407232
Last Price Increase: 2023-09-30
Automatic offers:

aimane-chnaif | Reviewer | 27031408
esh-g | Contributor | 27031411
tewodrosGirmaA | Reporter | 27031412

esh-g · 2023-09-23T14:11:27Z

Proposal

Please re-state the issue

Cursor is not disabled in SelectCircle when the option is disabled.

What is the root cause of this issue?

The reason that the cursor is disabled on the rest of the row option is because we are passing the isDisabled prop to the PressableWithFeedback component wrapping the whole OptionRow.

App/src/components/OptionRow.js

Line 199 in 5aa7f6d

disabled={this.state.isDisabled}

We are not passing the isDisabled prop to the PressableWithFeedback which wraps the SelectCircle component here:

App/src/components/OptionRow.js

Lines 286 to 292 in 5aa7f6d

    
           <PressableWithFeedback 
        
               onPress={() => this.props.onSelectedStatePressed(this.props.option)} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX} 
        
               accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX} 
        
           > 
        
               <SelectCircle isChecked={this.props.isSelected} /> 
        
           </PressableWithFeedback>

What changes do you think should be made to fix this problem?

We should pass the isDisabled prop the same way we pass it to the root PressableWithFeedback of the OptionRow as mentioned in the root cause.

Optional:
We can also pass isDisabled prop to the Button element (the one which says 'split' or 'add to group' in the options) for consistency but since I don't see a case where the row with a button will be disabled, this is not required.

What other alternative options did you explore? (Optional)

c3024 · 2023-09-23T14:11:28Z

Proposal

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

The paid by row Pressable is disabled but hand cursor is shown on the selectRow even though it is unclickable

What is the root cause of that problem?

We are not disabling this Pressable

App/src/components/OptionRow.js

Lines 286 to 292 in ee023d8

    
           <PressableWithFeedback 
        
               onPress={() => this.props.onSelectedStatePressed(this.props.option)} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX} 
        
               accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX} 
        
           > 
        
               <SelectCircle isChecked={this.props.isSelected} /> 
        
           </PressableWithFeedback>

like we do here

App/src/components/OptionRow.js

Line 199 in ee023d8

disabled={this.state.isDisabled}

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

We should use the same disabling here

App/src/components/OptionRow.js

Line 288 in ee023d8

accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}

for this Pressable as well.

What alternative solutions did you explore? (Optional)

melvin-bot · 2023-09-23T14:11:31Z

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

melvin-bot · 2023-09-23T14:11:31Z

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

melvin-bot · 2023-09-23T14:11:33Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

melvin-bot · 2023-09-23T14:11:35Z

Triggered auto assignment to @tjferriss (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

melvin-bot · 2023-09-23T14:11:40Z

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

DylanDylann · 2023-09-23T18:49:43Z

Proposal

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

Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill

What is the root cause of that problem?

We are using disable props for OptionRow

App/src/components/OptionRow.js

Line 199 in 5aa7f6d

disabled={this.state.isDisabled}

But we don't do that for the checkbox

App/src/components/OptionRow.js

Lines 286 to 293 in 5aa7f6d

    
               <PressableWithFeedback 
        
                   onPress={() => this.props.onSelectedStatePressed(this.props.option)} 
        
                   accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX} 
        
                   accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX} 
        
               > 
        
                   <SelectCircle isChecked={this.props.isSelected} /> 
        
               </PressableWithFeedback> 
        
           )}

It causes the consistency

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

First, Let's see the transaction report, If we hover detail transactions, it display default cursor

and cancelled task case: https://expensify.slack.com/archives/C049HHMV9SM/p1695024078116809?thread_ts=1694080698.301029&cid=C049HHMV9SM
In this case, we also should use the default cursor instead of disabled cursor for all option row (include checkbox) if want to disable that.

To do that:

remove disable prop here

App/src/components/OptionRow.js

Line 199 in 5aa7f6d

disabled={this.state.isDisabled}
replace this style

 (!this.props.onSelectRow || this.props.isDisabled) ? styles.cursorDefault : null,

in

App/src/components/OptionRow.js

Line 208 in 5aa7f6d

    
           !this.props.onSelectRow && !this.props.isDisabled ? styles.cursorDefault : null,

and add in

App/src/components/OptionRow.js

Line 286 in 5aa7f6d

<PressableWithFeedback

What alternative solutions did you explore? (Optional)

JawadSadiq01 · 2023-09-24T14:46:33Z

Proposal

Please re-state the problem that we are trying to solve in this issue.
Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill

What is the root cause of that problem?
SelectCircle is a re-usable common component. It's only working with one prop name as isChecked. There is nothing else, that tells either its disable or clickable.

What changes do you think we should make in order to solve the problem?
You just have to add one more prop into SelectCircle that tells, either its active or disabled.

Do the followings;

1. You have to pass a disable prop with a particular name(I named that isDisabled) from OptionsRow Component(line#291).

<SelectCircle isChecked={this.props.isSelected} isDisabled={this.props.isDisabled} />

2. Apply this isDisable prop inside the SelectCircle Component

import React from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../styles/styles';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
import themeColors from '../styles/themes/default';

const propTypes = {
    /** Should we show the checkmark inside the circle */
    isChecked: PropTypes.bool,
    isDisabled: PropTypes.bool,
};

const defaultProps = {
    isChecked: false,
    isDisabled: false,
};

function SelectCircle(props) {
    return (
        <View style={[styles.selectCircle, styles.alignSelfCenter, props.isDisabled ? styles.disableSelectCircle : '']}>
            {props.isChecked && (
                <Icon
                    src={Expensicons.Checkmark}
                    fill={themeColors.iconSuccessFill}
                />
            )}
        </View>
    );
}

SelectCircle.propTypes = propTypes;
SelectCircle.defaultProps = defaultProps;
SelectCircle.displayName = 'SelectCircle';

export default SelectCircle;

3. Make another style object(I name as disabledSelectCircle) inside styles.js file

disableSelectCircle: {
        ...cursor.cursorDisabled,
},

What alternative solutions did you explore? (Optional)
NA

Video Attachment

disableCursor.mp4

tjferriss · 2023-09-25T01:14:07Z

@muttmuure it looks like MelvinBot assigned me after you. I'm going to un-assign myself.

astrohunter62 · 2023-09-27T04:28:32Z

Proposal

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

The cursor remains a hand icon when hovering over the checkbox in the 'Paid By' section during the Split bill process.

What is the root cause of that problem?

In the OptionRow component, there's a missing pass of the 'disabled' props to the SelectCircle component wrapped within PressableWithFeedback.

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

We can pass the 'disabled' props to PressableWithFeedback.

<PressableWithFeedback
    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
    accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
    accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
    disabled={this.state.isDisabled}
>
    <SelectCircle isChecked={this.props.isSelected} />
</PressableWithFeedback>

Result:

28064.chrome.webm

28064.safari.webm

melvin-bot · 2023-09-28T10:51:21Z

@muttmuure, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

melvin-bot · 2023-09-30T16:42:29Z

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

melvin-bot · 2023-10-02T10:54:31Z

@muttmuure, @aimane-chnaif Still overdue 6 days?! Let's take care of this!

melvin-bot · 2023-10-04T11:22:16Z

@muttmuure, @aimane-chnaif 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

muttmuure · 2023-10-04T13:51:18Z

@aimane-chnaif 3 proposals to review when you have time. Thank you!

aimane-chnaif · 2023-10-04T14:07:35Z

@esh-g's proposal looks good to me.
🎀 👀 🎀 C+ reviewed

aimane-chnaif · 2023-10-19T14:17:57Z

The PR that introduced the bug has been identified. Link to the PR: Simplify Global Create menu #25564
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: https://github.com/Expensify/App/pull/25564/files#r1365623813
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: N/A
Determine if we should create a regression test for this bug.
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.

No need regression test

aimane-chnaif · 2023-11-02T12:57:47Z

@lakchote can you please re-open the issue? I haven't received payment yet

tewodrosGirmaA · 2023-11-08T10:29:20Z

@lakchote can you please re-open the issue? I haven't received payment yet

muttmuure · 2023-11-08T14:37:46Z

Contracts extended

aimane-chnaif · 2023-11-08T14:39:15Z

@muttmuure there's contract already - #28064 (comment)

aimane-chnaif · 2023-11-13T13:46:00Z

This is eligible for bonus

muttmuure · 2023-11-13T13:46:45Z

Bonus sent

tewodrosGirmaA · 2023-11-13T13:55:10Z

Hello @muttmuure, I have not received payment?

tewodrosGirmaA · 2023-11-13T14:13:11Z

Hello @muttmuure, I have not received payment?

esh-g · 2023-11-13T17:44:35Z

@muttmuure I still haven't received the payment as well...

muttmuure · 2023-11-15T18:29:07Z

Oops, sorry!

muttmuure · 2023-11-15T18:29:13Z

Offers sent

tewodrosGirmaA · 2023-11-15T18:46:33Z

Offers sent

Thank you @muttmuure I accepted the offer

esh-g · 2023-11-16T13:54:37Z

Thanks, accepted the offer @muttmuure

esh-g · 2023-11-20T02:38:40Z

@muttmuure Please also make sure to check the bonus... thanks

lakchote · 2023-11-22T14:28:34Z

@muttmuure were you able to check the bonus? Thanks!

muttmuure · 2023-11-22T18:29:49Z

$750 inc Bonus paid to @esh-g
@tewodrosGirmaA also paid

kbecciv added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 23, 2023

melvin-bot bot changed the title ~~Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill~~ [$500] Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill Sep 23, 2023

melvin-bot bot assigned muttmuure Sep 23, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 23, 2023

melvin-bot bot assigned tjferriss Sep 23, 2023

melvin-bot bot assigned aimane-chnaif Sep 23, 2023

tjferriss removed their assignment Sep 25, 2023

melvin-bot bot added the Overdue label Sep 27, 2023

astrohunter62 mentioned this issue Sep 27, 2023

[$500] Group Chat - The radio button for "Paid by" user in Split bill is not disabled when hovering over it #28331

Closed

6 tasks

melvin-bot bot removed the Overdue label Oct 4, 2023

melvin-bot bot assigned lakchote Oct 4, 2023

aimane-chnaif mentioned this issue Oct 19, 2023

Simplify Global Create menu #25564

Merged

58 tasks

melvin-bot bot added the Overdue label Oct 23, 2023

lakchote closed this as completed Oct 23, 2023

melvin-bot bot removed the Overdue label Oct 23, 2023

dylanexpensify reopened this Nov 8, 2023

melvin-bot bot added the Overdue label Nov 10, 2023

melvin-bot bot removed the Overdue label Nov 13, 2023

muttmuure closed this as completed Nov 13, 2023

mountiny reopened this Nov 13, 2023

melvin-bot bot added the Overdue label Nov 22, 2023

melvin-bot bot removed the Overdue label Nov 22, 2023

muttmuure closed this as completed Nov 22, 2023

Krishna2323 mentioned this issue Jan 23, 2024

[$500] Web - Workspace - Default cursor is shown around the checkbox #34821

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-10-18] [$500] Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill #28064

[HOLD for payment 2023-10-18] [$500] Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill #28064

kbecciv commented Sep 23, 2023 •

edited by melvin-bot bot

Loading

esh-g commented Sep 23, 2023

c3024 commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

DylanDylann commented Sep 23, 2023 •

edited

Loading

JawadSadiq01 commented Sep 24, 2023 •

edited

Loading

tjferriss commented Sep 25, 2023

astrohunter62 commented Sep 27, 2023

melvin-bot bot commented Sep 28, 2023

melvin-bot bot commented Sep 30, 2023

melvin-bot bot commented Oct 2, 2023

melvin-bot bot commented Oct 4, 2023

muttmuure commented Oct 4, 2023

aimane-chnaif commented Oct 4, 2023

aimane-chnaif commented Oct 19, 2023

aimane-chnaif commented Nov 2, 2023

tewodrosGirmaA commented Nov 8, 2023

muttmuure commented Nov 8, 2023

aimane-chnaif commented Nov 8, 2023

aimane-chnaif commented Nov 13, 2023

muttmuure commented Nov 13, 2023

tewodrosGirmaA commented Nov 13, 2023

tewodrosGirmaA commented Nov 13, 2023

esh-g commented Nov 13, 2023

muttmuure commented Nov 15, 2023

muttmuure commented Nov 15, 2023

tewodrosGirmaA commented Nov 15, 2023

esh-g commented Nov 16, 2023

esh-g commented Nov 20, 2023

lakchote commented Nov 22, 2023

muttmuure commented Nov 22, 2023

[HOLD for payment 2023-10-18] [$500] Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill #28064

[HOLD for payment 2023-10-18] [$500] Web - Cursor Remains as Hand Icon on Checkbox in "Paid By" Section During Split Bill #28064

Comments

kbecciv commented Sep 23, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

esh-g commented Sep 23, 2023

Proposal

Please re-state the issue

What is the root cause of this issue?

What changes do you think should be made to fix this problem?

What other alternative options did you explore? (Optional)

c3024 commented Sep 23, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Sep 23, 2023

melvin-bot bot commented Sep 23, 2023

DylanDylann commented Sep 23, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

JawadSadiq01 commented Sep 24, 2023 • edited Loading

Proposal

tjferriss commented Sep 25, 2023

astrohunter62 commented Sep 27, 2023

Proposal

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

What is the root cause of that problem?

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

melvin-bot bot commented Sep 28, 2023

melvin-bot bot commented Sep 30, 2023

melvin-bot bot commented Oct 2, 2023

melvin-bot bot commented Oct 4, 2023

muttmuure commented Oct 4, 2023

aimane-chnaif commented Oct 4, 2023

aimane-chnaif commented Oct 19, 2023

aimane-chnaif commented Nov 2, 2023

tewodrosGirmaA commented Nov 8, 2023

muttmuure commented Nov 8, 2023

aimane-chnaif commented Nov 8, 2023

aimane-chnaif commented Nov 13, 2023

muttmuure commented Nov 13, 2023

tewodrosGirmaA commented Nov 13, 2023

tewodrosGirmaA commented Nov 13, 2023

esh-g commented Nov 13, 2023

muttmuure commented Nov 15, 2023

muttmuure commented Nov 15, 2023

tewodrosGirmaA commented Nov 15, 2023

esh-g commented Nov 16, 2023

esh-g commented Nov 20, 2023

lakchote commented Nov 22, 2023

muttmuure commented Nov 22, 2023

kbecciv commented Sep 23, 2023 •

edited by melvin-bot bot

Loading

DylanDylann commented Sep 23, 2023 •

edited

Loading

JawadSadiq01 commented Sep 24, 2023 •

edited

Loading