[Due for payment 2025-03-05] [$250] Invoice Room - To field has visual feedback despite being not editable

[IuliiaHerets]

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: 9.1.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/3073289
Issue reported by: Applause Internal Team
Device used: Windows 10/ Chrome, Samsung Galaxy A12/Android 13
App Component: Money Requests

Action Performed:

Precondition: Enable Invoicing on a workspace. Send an Invoice to a user.

1. Go to staging.new.expensify.com
2. Go to the chat where you already sent the invoice.
3. Click the + icon > Send Invoice
4. Enter amount > Next
5. Hover over To field and click

Expected Result:

There is no visual feedback on this field as it is not editable, just like the Send From field.

Actual Result:

There is a visual feedback on this field (Cursor icon turns into finger pointing when hovering, the field turns darker when clicked or tapped)

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/3fd09f77-71ff-4d98-b151-83eeb7fb3ec1
https://github.com/user-attachments/assets/6dbdf1b2-b869-40c6-9977-e7aa209807fa

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021892688594252050748
• Upwork Job ID: 1892688594252050748
• Last Price Increase: 2025-02-20
• Automatic offers:
• mkzie2 | Contributor | 106260410

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[mkzie2]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-20 11:57:04 UTC.

Proposal

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

There is a visual feedback on this field (Cursor icon turns into finger pointing when hovering, the field turns darker when clicked or tapped)

What is the root cause of that problem?

For Send From field, uses MenuItem component, and activeOpacity is constant if interactive is false

App/src/components/MenuItem.tsx

Line 623 in 985d3f5

activeOpacity={!interactive ? 1 : variables.pressDimValue}

While we don't do that for BaseListItem so we still have the effect when the To field is clicked

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

Pass pressDimmingValue as constant if it's not interactive

pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}

App/src/components/SelectionList/BaseListItem.tsx

Line 78 in 985d3f5

<PressableWithFeedback

If we don't want to do this at all, we can add a new flag and only do this if the flag is true.

We can also update the style to show the default cursor when item.isInteractive is false

item.isInteractive === false && styles.cursorDefault

App/src/components/SelectionList/BaseListItem.tsx

Line 104 in 985d3f5

style={[

Note: We should compare item.isInteractive === false because if item.isInteractive is undefined in SelectionList that means it's interactive element by default.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

For the problem of the cursor pointer, we added getButtonStyle with isNested: true here.

We can remove the getButtonStyle here and introduce isNested prop in BaseGenericPressable with default value false. And pass isNested={true} here

App/src/components/SelectionList/BaseListItem.tsx

Line 107 in 9d8eef2

getButtonStyle(styles, true),

And here not return cursor text here if isNested is true

if ([rest.accessibilityRole, rest.role].includes(CONST.ROLE.PRESENTATION) && !isNested) {
    return styles.cursorText;
}

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

Lines 70 to 80 in 9d8eef2

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

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Krishna2323]

Proposal

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

Invoice Room - To field has visual feedback despite being not editable

What is the root cause of that problem?

• The To field uses UserListItem which at the end uses BaseListItem and BaseListItem does not handle the dimming value and cursor style when the item is not interactive.
• The From field uses MenuItem which correctly sets the activeOpacity and styles.cursorDefault when the item is not interactive.
  

  App/src/components/MenuItem.tsx

  Lines 623 to 630 in a21bc62

  	activeOpacity={!interactive ? 1 : variables.pressDimValue}
  	opacityAnimationDuration={0}
  	testID={pressableTestID}
  	style={({pressed}) =>
  	[
  	containerStyle,
  	combinedStyle,
  	!interactive && styles.cursorDefault,

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

• We should add prop pressDimmingValue={!item.isInteractive ? 1 : variables.pressDimValue} and in the style array we need to add !item.isInteractive && styles.cursorDefault at the end.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Result

[melvin-bot]

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

[melvin-bot]

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

[Christinadobrzyn]

@dukenv0307 can you please review these proposals? TY!

[mkzie2]

Updated proposal