[HOLD for payment 2024-03-14] [$500] Task - Pointer shows up for an archived task when hovering over the edge of the checkbox

[lanitochka17]

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.44.0
Reproducible in staging?: Y
Reproducible in production?: N
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing Pr #31674

Action Performed:

1. Open ND and log in with any account
2. Go to announce room
3. Create a task
4. Delete the workspace in whose announce room the task is just created
5. Note that the task report was archived in LHN
6. Tap task in the archived announce room
7. Hover over the edge of the checkbox carefully

Expected Result:

No pointer should show up since the task is archived and can not be checked

Actual Result:

A pointer shows up when hovering over the edge of the checkbox

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

Bug6393369_1708984778627.pointer_bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0115fb6326c37966b2
• Upwork Job ID: 1762247262944112640
• Last Price Increase: 2024-02-26
• Automatic offers:
• ntdiary | Reviewer | 0
• brandonhenry | Contributor | 0
• Krishna2323 | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0115fb6326c37966b2

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[Krishna2323]

Proposal

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

Task - Pointer shows up for an archived task when hovering over the edge of the checkbox

What is the root cause of that problem?

Cursor styles are not on the parent and the parent has a padding of 2px. PressableWithFeedback already has cursor disabled style when disabled prop is true but the cursor style is overridden by StyleUtils.getCheckboxPressableStyle(containerBorderRadius + 2) style we pass to PressableWithFeedback

App/src/components/Checkbox.tsx

Lines 89 to 111 in 297bcec

	<PressableWithFeedback
	disabled={disabled}
	onPress={firePressHandlerOnClick}
	onMouseDown={onMouseDown}
	ref={ref}
	style={[StyleUtils.getCheckboxPressableStyle(containerBorderRadius + 2), style]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
	onKeyDown={handleSpaceKey}
	role={CONST.ROLE.CHECKBOX}
	aria-checked={isChecked}
	accessibilityLabel={accessibilityLabel}
	pressDimmingValue={1}
	>
	{children ?? (
	<View
	style={[
	StyleUtils.getCheckboxContainerStyle(containerSize, containerBorderRadius),
	containerStyle,
	isChecked && styles.checkedContainer,
	hasError && styles.borderColorDanger,
	disabled && styles.cursorDisabled,
	disabled && styles.buttonOpacityDisabled,
	isChecked && styles.borderColorFocus,
	]}

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

Move cursor styles to PressableWithFeedback.

style={[StyleUtils.getCheckboxPressableStyle(containerBorderRadius + 2), style, disabled && styles.cursorDisabled]}

Result

Alternatives

1. Modify getCheckboxPressableStyle to accept disabled state and return cursorStyle based on that.

App/src/styles/utils/index.ts

Line 925 in 297bcec

function getCheckboxPressableStyle(borderRadius = 6): ViewStyle {

2. Remove ...cursor.cursorPointer returned from getCheckboxPressableStyle.
3. Pass disabledStyle={styles.cursorDisabled} style to PressableWithFeedback

[Krishna2323]

Proposal Updated

• Updated root cause & added alternatives

[brandonhenry]

Proposal

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

The issue at hand is that when hovering over the edge of a checkbox within an archived task, a pointer cursor appears, despite the task being archived and not interactive. The expectation is that no pointer should appear, indicating the task cannot be interacted with, aligning with the cursor: not-allowed style applied to the parent elements.

What is the root cause of that problem?

The root cause of this problem lies in the CSS specificity and inheritance conflict between the styles applied to the inner and outer div elements of the checkbox. The outer div has a cursor: not-allowed style, indicating it's not interactive. However, the inner div, specifically the one with aria-checked and role checkbox, retains a cursor: pointer style. This discrepancy leads to the pointer cursor appearing when the mouse is positioned perfectly over the edge of the checkbox, where the styles of the inner div override those of the outer div.

The issue is the element inside of Checkbox.tsx overriding our cursor: not-allowed

The root cause is in the BaseGenericPressable Component. We are not using the props.disabled property and instead relying on isDisabled which is not passed down from PressableWithFeedback

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

To resolve this issue, ensure consistent styling across both the inner and outer div elements of the checkbox, particularly concerning the cursor style.

This can be achieved by applying a !props.disabled && cursorStyle style to the child element within the checkbox container that is causing the problem.

https://github.com/Expensify/App/blob/main/src/components/Pressable/GenericPressable/index.tsx

[jasperhuangg]

Definitely do not need to be blocking deploy on something so minor

[melvin-bot]

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

[melvin-bot]

📣 @ntdiary 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[Krishna2323]

Just to make things more clear, here is my explaination.

On this line we pass disabled prop correctly which is enough to add disabled cursor.

App/src/components/Checkbox.tsx

Line 90 in 297bcec

disabled={disabled}

But on the line below we pass style prop to PressableWithFeedback, in the style prop we use getCheckboxPressableStyle which also returns cursorPointer, and due to this the cursor style determined by disabled prop is overridden and we always have cursorPointer on the edges (2px padding which is also returned from getCheckboxPressableStyle).

App/src/components/Checkbox.tsx

Line 94 in 297bcec

style={[StyleUtils.getCheckboxPressableStyle(containerBorderRadius + 2), style]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox

On this line the cursor style is overridden by the style we pass to PressableWithFeedback.

App/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

Lines 138 to 139 in d2a9c6f

	cursorStyle,
	StyleUtils.parseStyleFromFunction(style, state),

I hope this makes things crystal clear.

[brandonhenry]

From the look at Krishna's original proposal (and updated), looks like their fix is to do something completely different than the fix I am proposing.

I am focused on the 'disabled' prop in the PressableWithFeedback

https://github.com/Expensify/App/blob/297bcec1b2013c22a71c1065ed8d3ddf337862fd/src/components/Checkbox.tsx

That prop doesn't seem to be used at all inside of the GenericPressable component so we need to make sure we reference that prop so that it doesn't apply cursor pointer using "cursorStyles" if that prop is passed down

[Krishna2323]

@brandonhenry, pls look at the codebase :), PressableWithFeedback in the end uses BaseGenericPressable.tsx file and we do use disabled prop there.

App/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

Lines 138 to 139 in d2a9c6f

	cursorStyle,
	StyleUtils.parseStyleFromFunction(style, state),

App/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

Lines 67 to 75 in d2a9c6f

	const cursorStyle = useMemo(() => {
	if (shouldUseDisabledCursor) {
	return styles.cursorDisabled;
	}
	if ([rest.accessibilityRole, rest.role].includes(CONST.ROLE.PRESENTATION)) {
	return styles.cursorText;
	}
	return styles.cursorPointer;
	}, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role]);

App/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

Line 62 in d2a9c6f

const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]);

[brandonhenry]

I understand what you mean @Krishna2323 - we did not have same proposal, but superrrr close. Your fix is definitely the appropriate one 👍🏿

[trjExpensify]

Deployed to staging 13 hours ago, Melv.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• fix: Task - Pointer shows up for an archived task when hovering over the edge of the checkbox. #37260

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

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

• @ntdiary requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[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:

• [@ntdiary] The PR that introduced the bug has been identified. Link to the PR:
• [@ntdiary] 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:
• [@ntdiary] 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:
• [@ntdiary] Determine if we should create a regression test for this bug.
• [@ntdiary] 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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[trjExpensify]

👋 @ntdiary checklist time! :)

[ntdiary]

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:

• [@ntdiary] The PR that introduced the bug has been identified. Link to the PR: Feat/categories main page #36324
• [@ntdiary] 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/36324/files#r1526119770
• [@ntdiary] 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: No need
• [@ntdiary] Determine if we should create a regression test for this bug. No need
• [@ntdiary] 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. As shown below
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@trjExpensify, ah, time flies. 😂 BTW, I'm still waiting to switch to NewDot for the payments. 😄

[trjExpensify]

Haha, that it does! 🕐 Cool, I've asked Matt for an update on that quickly. If not, I can pay you via Upwork.

In the meantime.. I don't think it's worth having a regression test for this pointer cursor. 👍 Payment summary as follows:

$500 to @ntdiary for the C+ review
$500 to @Krishna2323 for the fix

[Krishna2323]

@trjExpensify any updates here?

[trjExpensify]

Yep, we're proceeding with Upwork for now.

@Krishna2323 - paid
@ntdiary - waiting for you to accept the offer. :)

[ntdiary]

Yep, we're proceeding with Upwork for now.

@Krishna2323 - paid @ntdiary - waiting for you to accept the offer. :)

@trjExpensify, ah, sorry, just accepted. 😂

[trjExpensify]

Perfect, paid. Closing! 👍