[$500] Press highlight on a field in expense details overlaps with error message weirdly

[kavimuru]

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.29-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
Expensify/Expensify Issue URL:
Issue reported by: @luacmartins
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705808584924989

Action Performed:

Precondition : Have some violation rules for the expenses in the OD

1. Create an expense report
2. Open the receipt to view the details
3. enter the required fields values (in this case category and tag fields)
4. Long press the category/tag field to highlight and observe

Expected Result:

There should be no overlapping.

Actual Result:

overlaps the error message weirdly

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b61739c3e4f7859e
• Upwork Job ID: 1749662510960947200
• Last Price Increase: 2024-01-23

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Press highlight on a field in expense details overlaps with error message weirdly

What is the root cause of that problem?

In the ViolationMessages component we have -8px of margin top.

App/src/components/ViolationMessages.tsx

Line 15 in 9c552ab

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

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

We should remove margin top.

Result

Result with no negative margin:

Result with children prop and updating some stylings:

What alternative solutions did you explore? (Optional)

1. I think the best we can do here is to accept children prop inside MenuItem and use ViolationMessages component as a children.
2. Or we should use error prop in MenuItemWithTopDescription to show the error. We have already used error prop, we can use errorText to show the ViolationMessages.

[jeremy-croff]

Proposal

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

Highlighted area doesn't include the full row when there's an error message

What is the root cause of that problem?

The highlight style doesn't grow into full row when there's an error message.

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

We should update the styling to flex the highlighted area based on the content, inccluding the error message

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

Included more alternative options.

[Krishna2323]

Proposal Updated

Included results screenshots & permalink.

[dukenv0307]

Proposal

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

overlaps the error message weirdly

What is the root cause of that problem?

We have a negative margin here so the expense details overlaps the error violation message

App/src/components/ViolationMessages.tsx

Line 15 in 9c552ab

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

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

The reason for the negative margin is to decrease the space between the error and the menu description. But I think we can decrease the padding vertical of the menu description by adding wrapperStyle prop into MenuItemWithTopDescription if we can use violation transaction

Ref: #32594 (comment)

App/src/components/ViolationMessages.tsx

Line 15 in 9c552ab

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

What alternative solutions did you explore? (Optional)

We can combine the violation message with line break and pass this into MenuItemWithTopDescription or allow pass array error prop into MenuItemWithTopDescription

[dragnoir]

Proposal

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

Error message out of hover frame

What is the root cause of that problem?

Inside MoneyRequestView we are displaying the error message via ViolationMessages but the only hovered component is MenuItemWithTopDescription

App/src/components/ReportActionItem/MoneyRequestView.js

Lines 335 to 348 in 0bdbfbb

	{shouldShowCategory && (
	<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
	<MenuItemWithTopDescription
	description={translate('common.category')}
	title={transactionCategory}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
	brickRoadIndicator={hasViolations('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
	/>
	{canUseViolations && <ViolationMessages violations={getViolationsForField('category')} />}
	</OfflineWithFeedback>
	)}

So when the hover/press effect change the color of the background, the zone where the message is displayed will not be effected.

And because ViolationMessages has a negative margin that bring it more to the top, it seem that it's part of the hover zone, but it's not, it's another DIV where no hover effect applied to it.

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

The MenuItemWithTopDescription support displaying error via already existant props errorText.

App/src/components/MenuItem.tsx

Lines 589 to 596 in 0bdbfbb

	{!!errorText && (
	<FormHelpMessage
	isError
	shouldShowRedDotIndicator={false}
	message={errorText}
	style={styles.menuItemError}
	/>
	)}

App/src/components/MenuItem.tsx

Lines 134 to 138 in 0bdbfbb

	/** Error to display below the title */
	error?: string;
	/** Error to display at the bottom of the component */
	errorText?: string;

We should pass the violation message throw it and remove ViolationMessages component.

<MenuItemWithTopDescription
  description={translate('common.category')}
  // ...
  // we can use error or errorText
+ errorText="Error!" // will put violation message here mapped
/>
- {canUseViolations && <ViolationMessages  violations={getViolationsForField('category')}  />}

Picking the righ props and code perfection can be discussed throw PR.

POC:

What alternative solutions did you explore?

Edit MenuItem to that props error or errorText support non only string but an array too.

[luacmartins]

Seems like a dupe of #33527. @cead22 can you confirm if we're already fixing this?

[aimane-chnaif]

It's being fixed in #34303

[cead22]

Yeah