[HOLD for payment 2023-10-20] [$500] Setting - Menu Item can not click but still show pointer cursor

@namhihi237

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:

Setting => Share code
Click "Copy URL to clipboard"
Observe the copied message appear, hover over it and see can not click but the pointer cursor appear

Expected Result:

It should be the default cursor

Actual Result:

Pointer cursor appear

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.75-3

Reproducible in staging?: Yes

Reproducible in production?: Yes

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.Recording.2023-09-29.at.18.00.33.mov

Screen.Recording.2023-09-29.at.18.00.14.1.mov

Recording.117.mp4

Expensify/Expensify Issue URL:

Issue reported by: @namhihi237

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695985262272999

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0173c232e99dc92430
Upwork Job ID: 1708571281166315520
Last Price Increase: 2023-10-01
Automatic offers:

namhihi237 | Contributor | 27046639
namhihi237 | Reporter | 27046641

Issue Owner

Current Issue Owner: @mallenexpensify

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

@mallenexpensify

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

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

@thesahindia

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

Proposal

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

Pointer cursor stay after copy

What is the root cause of that problem?

We don't pass interactive param

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

Add interactive={isThrottledButtonActive} for this component

App/src/components/ContextMenuItem.js

Lines 92 to 103 in 00933e1

    
           <MenuItem 
        
               title={itemText} 
        
               icon={itemIcon} 
        
               onPress={triggerPressAndUpdateSuccess} 
        
               wrapperStyle={styles.pr9} 
        
               success={!isThrottledButtonActive} 
        
               description={description} 
        
               descriptionTextStyle={styles.breakAll} 
        
               style={getContextMenuItemStyles(windowWidth)} 
        
               isAnonymousAction={isAnonymousAction} 
        
               focused={isFocused} 
        
           />

Screen.Recording.2023-10-01.at.22.19.44.mov

What alternative solutions did you explore? (Optional)

We can create ability use interactive param for ContextMenuItem and pass this param in ShareCodePage
To avoid affecting ContextMenuItem elsewhere

Proposal

My proposal adds first on slack.

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

Menu Item can not click but still show pointer cursor. We should update the default cursor.

What is the root cause of that problem?

In the application, we have some places that after clicking, it will switch to an unclickable state, such as some copy buttons (copy message, copy 2FA code, copy URL,...) and mark as unread.
We are using ContextMenuItem and PressableWithDelayToggle here to display them but there is no logic to disable interactively or show the default cursor during non-clickable time.

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

We should add logic to show the default cursor when the menu item is not clickable.

At ContextMenuItem we already have isThrottledButtonActive state to check the state, so we just need to add isThrottledButtonActive prop here.

interactive={isThrottledButtonActive}

For BaseMiniContextMenuItem we add style here

style={({hovered, pressed}) => [
       // other styles
	props.isDelayButtonStateComplete && styles.cursorDefault
]}

At PressableWithDelayToggle we have isActive to check the status so we add style here

style={[styles.flexRow, ...props.styles, !isActive && styles.cursorDefault]}

What alternative solutions did you explore? (Optional)

N/A

My proposal for fixing the issue it's
-Add the pseudo-class :disabled to buttons CSS, so if the button is disabled(Can't be clicked) the cursor will be default.

@aromeral98

📣 @aromeral98! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

@mallenexpensify

@mallenexpensify, @neil-marcellini, @namhihi237, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

@thesahindia

Bump @thesahindia

@namhihi237

Issue reporter: @namhihi237 paid $50 via Upwork
Contributor: @namhihi237 paid $750 via Upwork, inc. urgency bonus
Contributor+: @thesahindia due $750 via NewDot, inc. urgency bonus

@thesahindia plz complete the BZ checklist. Thx

There were multiple instances of this issue and their isn't one specific PR that is responsible for them so we should just skip the checklist. We can add a test case for all the buttons.

Hover over any button
Verify the cursor is pointer
Click on the button
Verify the cursor changes to default during the non clickable state

@mallenexpensify

@mallenexpensify, @neil-marcellini, @namhihi237, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

@thesahindia

Thanks @thesahindia , closing! Regression test GH is here

@thesahindia

$750 payment approved for @thesahindia based on this summary.

Navigation Menu

Repository navigation

[HOLD for payment 2023-10-20] [$500] Setting - Menu Item can not click but still show pointer cursor #28565

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

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)

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)

39 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<MenuItem
	title={itemText}
	icon={itemIcon}
	onPress={triggerPressAndUpdateSuccess}
	wrapperStyle={styles.pr9}
	success={!isThrottledButtonActive}
	description={description}
	descriptionTextStyle={styles.breakAll}
	style={getContextMenuItemStyles(windowWidth)}
	isAnonymousAction={isAnonymousAction}
	focused={isFocused}
	/>

[HOLD for payment 2023-10-20] [$500] Setting - Menu Item can not click but still show pointer cursor #28565

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Oct 1, 2023

melvin-bot commented on Oct 1, 2023

melvin-bot commented on Oct 1, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Oct 1, 2023

ZhenjaHorbach commented on Oct 1, 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)

namhihi237 commented on Oct 2, 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)

aromeral98 commented on Oct 2, 2023

melvin-bot commented on Oct 2, 2023

39 remaining items

melvin-bot commented on Oct 23, 2023

neil-marcellini commented on Oct 23, 2023

mallenexpensify commented on Oct 26, 2023

thesahindia commented on Oct 28, 2023

melvin-bot commented on Oct 30, 2023

mallenexpensify commented on Oct 30, 2023

JmillsExpensify commented on Oct 31, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions