Profile - Location names missing in Timezone list for Asia & America region

[jponikarchuk]

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.2.72-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2285/folder/13176687/41236639/1057610080?p=2
Email or phone of affected tester (no customers): kiatest.78+ck124251@gmail.com
Issue reported by: Applause Internal Team
Device used: Pixel 8a/Android 16
App Component: User Settings

Action Performed:

1. Launch Hybrid app on Android device
2. Create new account
3. Go to Account >> Profile >> Timezone
4. Toggle off Automatically determine your location
5. Tap Timezone field
6. Start typing "Asia" or America" (OR search for Chile and when no results displayed, then type in Asia or America)
7. Scroll down the list & observe some location names and displayed as only Asia/ or America/

Expected Result:

All location names should be displayed in timezone list for Asia & America region

Actual Result:

Location names missing in Timezone list for Asia & America region

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @dylanexpensify (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.

[mohammadjafarinejad]

Proposal

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

Location names are missing in the timezone list for the Asia and America regions.

What is the root cause of that problem?

On Android, when the available width is insufficient to display the full timezone string (e.g., "Asia/Bangkok"), the text wraps at the forward slash / character because it's treated as a valid line-break opportunity. Since the TextWithTooltip component renders with numberOfLines={1}, only the first line is visible, showing just "Asia/" or "America/" without the city name.

The root cause is:

1. optionDisplayName style includes ...whiteSpace.noWrap which works on web
2. However, in src/styles/utils/whiteSpace/index.native.ts, noWrap is an empty object {} because React Native doesn't support CSS whiteSpace property
3. Without whiteSpace: 'nowrap', Android treats / as a word-break opportunity when width is constrained
4. With numberOfLines={1}, only the first line displays

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

Solution 1

Add

listItemTitleStyles={{width: '100%'}}

here (or update RadioListItem to include this when we are using mobile)

App/src/pages/settings/Profile/TimezoneSelectPage.tsx

Line 69 in 1b8063d

<SelectionList

In TimezoneSelectPage.tsx, wrap each forward slash with zero-width word joiners (\u2060) to prevent line breaks:

App/src/pages/settings/Profile/TimezoneSelectPage.tsx

Lines 31 to 40 in 1b8063d

	const allTimezones = useInitialValue(() =>
	TIMEZONES.filter((tz: string) => !tz.startsWith('Etc/GMT')).map((text: string) => ({
	text,
	keyForList: getKey(text),
	isSelected: text === timezone.selected,
	})),
	);
	const [timezoneInputText, setTimezoneInputText] = useState('');
	const [timezoneOptions, setTimezoneOptions] = useState(allTimezones);

1. Modify the timezone display text:

   const allTimezones = useInitialValue(() =>
        TIMEZONES.filter((tz: string) => !tz.startsWith('Etc/GMT')).map((text: string) => ({
            // Replace forward slashes with non-breaking slashes to prevent text wrapping at slash characters on Android
            text: text.replaceAll('/', '\u2060/\u2060'),
            // Store the original timezone value for saving
            value: text,
            keyForList: getKey(text),
            isSelected: text === timezone.selected,
        })),
    );

2. Store the original timezone value separately for saving to the backend.
3. Update saveSelectedTimezone to use the original value instead of the modified display text.

App/src/pages/settings/Profile/TimezoneSelectPage.tsx

Lines 41 to 43 in 1b8063d

	const saveSelectedTimezone = ({text}: {text: string}) => {
	updateSelectedTimezone(text as SelectedTimezone, currentUserPersonalDetails.accountID);
	};

const saveSelectedTimezone = ({value}: {value?: string}) => {
        if (!value) {
            return;
        }
        updateSelectedTimezone(value as SelectedTimezone, currentUserPersonalDetails.accountID);
};

Also update initiallyFocusedOptionKey

What alternative solutions did you explore? (Optional)

Add ellipsizeMode="tail" to TextWithTooltip (Android)
Modify index.native.tsx:

<Text
    numberOfLines={numberOfLines}
    ellipsizeMode="tail"
>

[abbasifaizan70]

Proposal

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

When users search for timezones in the Asia or America regions, some location names are displayed as only "Asia/" or "America/" without the actual city/location name. This makes it impossible for users to identify and select the correct timezone.

What is the root cause of that problem?

The issue occurs due to text truncation in the timezone selection list. The root causes are:

1. Tooltips Disabled: In TimezoneSelectPage.tsx, shouldShowTooltips={false} is set, which prevents users from seeing the full timezone text when it's truncated.

2. Single Line Display: The RadioListItem component uses numberOfLines={1} by default (when isMultilineSupported is false), causing long timezone strings like "America/Argentina/Buenos_Aires" to be truncated.

3. No Multiline Support: The SelectionList component doesn't have isRowMultilineSupported={true}, which would allow timezone names to wrap to multiple lines.

4. Width Constraints: The text container has width constraints that cause truncation, especially on smaller screens or when timezone names are long.

When timezone strings are truncated, they get cut off at the slash character, resulting in display like "Asia/" or "America/" without the location name.

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

Enable multiline support and tooltips for the timezone selection list to ensure all timezone names are fully visible.

Code Changes

File: /App/src/pages/settings/Profile/TimezoneSelectPage.tsx

1. Enable multiline support for timezone items
2. Enable tooltips so users can see full text when truncated

// ... existing code ...

    return (
        <ScreenWrapper
            includeSafeAreaPaddingBottom={false}
            testID={TimezoneSelectPage.displayName}
        >
            <HeaderWithBackButton
                title={translate('timezonePage.timezone')}
                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
            />
            <SelectionList
                headerMessage={timezoneInputText.trim() && !timezoneOptions.length ? translate('common.noResultsFound') : ''}
                textInputLabel={translate('timezonePage.timezone')}
                textInputValue={timezoneInputText}
                onChangeText={filterShownTimezones}
                onSelectRow={saveSelectedTimezone}
                shouldSingleExecuteRowSelect
                sections={[{data: timezoneOptions, isDisabled: timezone.automatic}]}
                initiallyFocusedOptionKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
                showScrollIndicator
                shouldShowTooltips={true}
                isRowMultilineSupported={true}
                ListItem={RadioListItem}
                shouldPreventActiveCellVirtualization
            />
        </ScreenWrapper>
    );
}

Changes:

• Changed shouldShowTooltips={false} to shouldShowTooltips={true} (line 79)
• Added isRowMultilineSupported={true} (new line after shouldShowTooltips)

Explanation

1. shouldShowTooltips={true}: Enables tooltips that display the full timezone text when hovering or focusing on truncated items. This provides a fallback for users to see complete timezone names even if they're truncated.

2. isRowMultilineSupported={true}: Allows timezone text to wrap to multiple lines (up to 2 lines as configured in RadioListItem), preventing truncation for most timezone names. This ensures that longer timezone strings like "America/Argentina/Buenos_Aires" are fully visible.

Together, these changes ensure that:

• Timezone names can wrap to 2 lines, showing most names fully
• If text is still truncated (on very small screens), tooltips provide access to the full text
• Users can always see and select the correct timezone