[$500] Address– Address is cut off on Personal details page when add Address line 2

[lanitochka17]

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.26-1
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to Home address page
2. Search for a UK address, e.g 158 Torquay Rd, Paignton, Devon
3. Select the suggested address under UK
4. Verify the fields get populated accordingly
5. Save the new address
6. Navigate back to Addresses page
7. Add value (ggggggggggggggggggggggggggggf) into Address line 2 and hit Save button

Expected Result:

Address field on Personal details page should not be cut-off

Actual Result:

Address is cut off on Personal details page when add Address line 2

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

Bug6345675_1705518638855.az_recorder_20240117_173740.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0164e2537cc6e5df1e
• Upwork Job ID: 1747725563329376256
• Last Price Increase: 2024-01-24

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

Proposal

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

Address is cut off on Personal details page when add Address line 2.

What is the root cause of that problem?

Note: this is an Android specific issue, not reproducing on other platforms.

This happens when address line 2 is a long string without spaces, since the MenuItemWithTopDescription's component numberOfLinesTitle is 1 by default.

App/src/components/MenuItem.tsx

Lines 302 to 304 in 4b7b8f2

	const combinedTitleTextStyle = StyleUtils.combineStyles(
	[
	styles.flexShrink1,

styles.flexShrink1 on MenuItem by default causes the text container to not take full width.

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

Change MenuItemWithTopDescription's address component numberOfLinesTitle to 2.

Screenshot

What alternative solutions did you explore? (Optional)

Alternatively if we really wanna keep it on 1 line we can add titleStyle={styles.flex1} only to the address field of MenuItemWithTopDescription component.

Screenshot (alternative)

[aswin-s]

Proposal

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

Address field in personal details page not taking available width

What is the root cause of that problem?

The issue is similar to #25561. The MenuItem component has a flexShrink1 which causes the Address field to not take up the entire available width.

App/src/components/MenuItem.tsx

Line 304 in 4b7b8f2

styles.flexShrink1,

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

Adding flex:1 to MenuItem globally is known to cause regressions in other parts of the app. Instead fix is similar to what is done for the DOB filed in #25593 and for TaskPage in #22777. Add titleStyle={[styles.flex1]} to privatePersonalDetails.address field in PersonalDetailsInitialsPage

App/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js

Lines 93 to 98 in 4b7b8f2

	<MenuItemWithTopDescription
	title={PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails)}
	description={props.translate('privatePersonalDetails.address')}
	shouldShowRightIcon
	onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
	/>

<MenuItemWithTopDescription
    title={PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails)}
    description={props.translate('privatePersonalDetails.address')}
    shouldShowRightIcon
    // Add title style
    titleStyle={[styles.flex1]}
    onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
/>

Result

Before	After

What alternative solutions did you explore? (Optional)

None

[ikevin127]

Updated proposal

• added more details to the RCA and also added alternative solution w/ screenshot

[tienifr]

Proposal

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

Address is cut off on Personal details page when add Address line 2

What is the root cause of that problem?

The MenuItem title has flexShrink1 here so it's not able to take the full available width, causing the text to be cut on some platforms. This has caused at least 3 different issues so far:

• [HOLD for payment 2023-09-04] [mWeb Safari] Date is trimmed on small devices when creating manual requetst #25561
• [HOLD for payment 2023-07-12] [HOLD for payment 2023-07-10] [$1000] Date is not being displayed correctly when single digit day is entered #21404
• This one

And I'd guess many more to come in the future if we don't fix it properly.

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

In previous issues with the same root cause, we fix it case by case by adding the titleStyle of styles.flex1 to the individual MenuItem that has issue. This is why it's keep happening and generating more issues since it's only a case by case fix.

We could add flex: 1 to the MenuItem title style itself to fix it globally, but this causes this regression. It's because sometimes the title is rendered with an icon on the right here, if the MenuItem has flex: 1, it will occupy the full width and push the title icon to the far right, which is not correct as per design.

So I'd propose to make a global fix without the regression:

• Create a hasTitleIcon boolean before this line

const hasTitleIcon = shouldShowTitleIcon && titleIcon;

(Notice it's the same condition as here, we should use the hasTitleIcon there for DRY)

• If hasTitleIcon is true, that means there's a title icon displaying on the right and we should use flexShrink1 here, otherwise use flex1

hasTitleIcon ? styles.flexShrink1 : styles.flex1

This will make sure to fix this issue once and for all, and no regression.

What alternative solutions did you explore? (Optional)

NA