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

@luacmartins

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

Create an expense report
Open the receipt to view the details
enter the required fields values (in this case category and tag fields)
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?

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

@JmillsExpensify

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

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

@Santhosh-Sellavel

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

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

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)

I think the best we can do here is to accept children prop inside MenuItem and use ViolationMessages component as a children.
~~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.~~

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)

Proposal Updated

Included more alternative options.

Proposal Updated

Included results screenshots & permalink.

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

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

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

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.

@cead22

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

It's being fixed in #34303

Yeah

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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?

Result

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)

Proposal Updated

Proposal Updated

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?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	{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>
	)}

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

	/** Error to display below the title */
	error?: string;

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 23, 2024

melvin-bot commented on Jan 23, 2024

melvin-bot commented on Jan 23, 2024

Krishna2323 commented on Jan 23, 2024

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?

Result

What alternative solutions did you explore? (Optional)

jeremy-croff commented on Jan 23, 2024

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)

Krishna2323 commented on Jan 23, 2024

Proposal Updated

Krishna2323 commented on Jan 23, 2024

Proposal Updated

dukenv0307 commented on Jan 23, 2024

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)

dragnoir commented on Jan 23, 2024

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?

luacmartins commented on Jan 23, 2024

aimane-chnaif commented on Jan 23, 2024

cead22 commented on Jan 23, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions