iOS - Multi-level Tags - The informational text is overlapping itself under the “More” dropdown

[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: 9.3.11.15
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-3934/folder/13176676/75383154/1159242921?sort=%2Bidentifier
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: iPhone 13 iOS 26.2
App Component: Workspace Settings

Action Performed:

Preconditions: User is an admin of the workspace with Tags enabled

1. Open the app
2. Navigate to workspace settings > Tags
3. Click "More" > "Import spreadsheet"
4. Click "Multi-level tags" > "Import tags"
5. Upgrade the workspace if a paywall is displayed (to a Control plan)
6. Upload a dependent multi-level tags CSV file
7. "These are independent tags" is DISABLED
8. Click "Import" and then "Got it" on the success modal

Expected Result:

The informational text is readable and fully visible without having to scroll up under the “More” dropdown

Actual Result:

The informational text is overlapping itself and not fully visible under the “More” dropdown.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7062036_1769787935524.ScreenRecording_01-30-2026_10-24-39_1.mp4

Bug7062036_1769788492569!Dependent_-Multi_Level_tags_NEW__1.csv

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @tylerkaraszewski

[melvin-bot]

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

[melvin-bot]

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

[MobileMage]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-30 16:19:35 UTC.

Proposal

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

On iOS, when a workspace has dependent multi-level tags configured, the informational text displayed beneath the "More" dropdown on the Tags settings page overlaps itself, making it unreadable. The text "Tags add more detailed ways to classify costs." and the subsequent "You are using dependent tags..." sentence render on top of each other instead of flowing naturally as separate blocks.

What is the root cause of that problem?

The root cause is that a View containing RenderHTML is nested as a child of a Text component. In React Native on iOS, placing a View inside a Text creates layout issues because the inner view does not properly participate in the text layout flow, causing content to overlap.

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 686 to 700 in 80dc863

	<Text style={[styles.textNormal, styles.colorMuted]}>
	{translate('workspace.tags.subtitle')}
	{hasDependentTags && (
	<View style={[styles.renderHTML]}>
	<RenderHTML
	html={translate(
	'workspace.tags.dependentMultiLevelTagsSubtitle',
	isQuickSettingsFlow
	? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
	: `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
	)}
	/>
	</View>
	)}
	</Text>

The dependentMultiLevelTagsSubtitle translation returns HTML wrapped in a <muted-text> tag, which is registered in the HTML engine as a block-level content model (HTMLContentModel.block).

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

Lines 66 to 69 in 80dc863

	'muted-text': HTMLElementModel.fromCustomModel({
	tagName: 'muted-text',
	mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
	contentModel: HTMLContentModel.block,

This means RenderHTML internally renders block-level views (not inline text). Placing these block-level views inside a parent <Text> component causes iOS to miscalculate layout, resulting in the overlapping text seen in the bug report. Every other usage of RenderHTML with styles.renderHTML in the codebase correctly places the View + RenderHTML as a sibling to Text elements rather than as a child of Text.

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

The fix is to restructure the headerContent in WorkspaceTagsPage.tsx so that the plain text subtitle and the RenderHTML dependent tags subtitle are siblings rather than parent-child. Instead of nesting the View with RenderHTML inside the <Text> component, we should close the <Text> component after the plain subtitle string and render the RenderHTML block as a separate sibling View. This matches how RenderHTML is used everywhere else in the codebase, for example in ShortTermsForm.tsx, EmailDeliveryFailurePage.tsx, and TravelTerms.tsx, where View + RenderHTML is always a sibling to Text, never a child.

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 686 to 700 in 80dc863

	<Text style={[styles.textNormal, styles.colorMuted]}>
	{translate('workspace.tags.subtitle')}
	{hasDependentTags && (
	<View style={[styles.renderHTML]}>
	<RenderHTML
	html={translate(
	'workspace.tags.dependentMultiLevelTagsSubtitle',
	isQuickSettingsFlow
	? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
	: `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
	)}
	/>
	</View>
	)}
	</Text>

Specifically, lines 686-700 should be changed from a single <Text> wrapping both the plain subtitle and the <View> with RenderHTML, to a fragment containing the <Text> for the subtitle followed by a separate <View> for the RenderHTML content. The outer wrapping <View> on line 677 already provides the correct padding and layout context, so the two elements will stack vertically as intended. No other files need to change.

What alternative solutions did you explore? (Optional)

N/A

[annaweber830]

Proposal

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

On iOS, after importing dependent multi-level tags from the “More” menu in Workspace Settings > Tags, the informational subtitle text under the header overlaps itself, making it partially unreadable.

What is the root cause of that problem?

In WorkspaceTagsPage, when hasDependentTags is true, we render a View (containing RenderHTML) inside a Text component:

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 675 to 701 in 450dac4

	const headerContent = (
	<>
	<View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : undefined]}>
	{!hasSyncError && isConnectionVerified && currentConnectionName ? (
	<ImportedFromAccountingSoftware
	policyID={policyID}
	currentConnectionName={currentConnectionName}
	connectedIntegration={connectedIntegration}
	translatedText={translate('workspace.tags.importedFromAccountingSoftware')}
	/>
	) : (
	<Text style={[styles.textNormal, styles.colorMuted]}>
	{translate('workspace.tags.subtitle')}
	{hasDependentTags && (
	<View style={[styles.renderHTML]}>
	<RenderHTML
	html={translate(
	'workspace.tags.dependentMultiLevelTagsSubtitle',
	isQuickSettingsFlow
	? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
	: `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
	)}
	/>
	</View>
	)}
	</Text>
	)}

<Text style={[styles.textNormal, styles.colorMuted]}>
    {translate('workspace.tags.subtitle')}
    {hasDependentTags && (
        <View style={[styles.renderHTML]}>
            <RenderHTML
                html={translate(
                    'workspace.tags.dependentMultiLevelTagsSubtitle',
                    isQuickSettingsFlow
                        ? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
                        : `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
                )}
            />
        </View>
    )}
</Text>

RenderHTML can (and here does) render block-level nodes (e.g. <muted-text> is registered as HTMLContentModel.block):

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

Lines 61 to 70 in 450dac4

	'muted-link': HTMLElementModel.fromCustomModel({
	tagName: 'muted-link',
	mixedUAStyles: {...styles.subTextFileUpload, ...styles.textSupporting},
	contentModel: HTMLContentModel.block,
	}),
	'muted-text': HTMLElementModel.fromCustomModel({
	tagName: 'muted-text',
	mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
	contentModel: HTMLContentModel.block,
	}),

On iOS, nesting block-level layout (View) within a Text causes React Native layout measurement issues, which can result in overlapping/incorrectly laid out text. This is why the informational text under the “More” dropdown appears on top of itself.

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

Update WorkspaceTagsPage so the plain subtitle Text and the dependent-tags RenderHTML block are rendered as siblings (not parent/child). This avoids putting a View inside Text, and lets iOS measure/layout both blocks correctly:

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 675 to 701 in 450dac4

	const headerContent = (
	<>
	<View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : undefined]}>
	{!hasSyncError && isConnectionVerified && currentConnectionName ? (
	<ImportedFromAccountingSoftware
	policyID={policyID}
	currentConnectionName={currentConnectionName}
	connectedIntegration={connectedIntegration}
	translatedText={translate('workspace.tags.importedFromAccountingSoftware')}
	/>
	) : (
	<Text style={[styles.textNormal, styles.colorMuted]}>
	{translate('workspace.tags.subtitle')}
	{hasDependentTags && (
	<View style={[styles.renderHTML]}>
	<RenderHTML
	html={translate(
	'workspace.tags.dependentMultiLevelTagsSubtitle',
	isQuickSettingsFlow
	? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
	: `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
	)}
	/>
	</View>
	)}
	</Text>
	)}

Current code:

<Text style={[styles.textNormal, styles.colorMuted]}>
    {translate('workspace.tags.subtitle')}
    {hasDependentTags && (
        <View style={[styles.renderHTML]}>
            <RenderHTML
                html={translate(
                    'workspace.tags.dependentMultiLevelTagsSubtitle',
                    isQuickSettingsFlow
                        ? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
                        : `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
                )}
            />
        </View>
    )}
</Text>

Updated code:

<>
    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.tags.subtitle')}</Text>
    {hasDependentTags && (
        <View style={[styles.renderHTML]}>
            <RenderHTML
                html={translate(
                    'workspace.tags.dependentMultiLevelTagsSubtitle',
                    isQuickSettingsFlow
                        ? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
                        : `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
                )}
            />
        </View>
    )}
</>

What alternative solutions did you explore? (Optional)

• Keep the nesting but attempt to force layout with styles (e.g. flex/lineHeight/margins): this is brittle and still relies on an invalid layout structure (View inside Text) that is prone to platform-specific rendering bugs.

[github-actions]

⚠️ @annaweber830 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[yatin-italy]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-30 16:48:43 UTC.

Proposal

Restate the problem this issue is trying to solve.

After importing multi-level tags on iOS and closing the success modal, the informational text under the “More” dropdown in Workspace → Tags overlaps and duplicates. The text becomes unreadable.

What is the root cause of that problem?

The code assumes it is safe to navigate away before clearing the import Onyx state. In src/components/ImportSpreadsheetConfirmModal.tsx, the ImportSpreadsheetConfirmModal component calls the close and navigation callback while ONYXKEYS.IMPORTED_SPREADSHEET is still set. This wrong assumption causes the next page to mount with stale import state, which triggers extra renders and overlapping text.

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

• Clear the imported spreadsheet Onyx state before navigation.
• Do this inside the confirm modal close flow.
• Always navigate even if the Onyx clear fails.
• Add logging for failures.

File: src/components/ImportSpreadsheetConfirmModal.tsx
Add imports near existing imports:

import {closeImportPage} from '@libs/actions/ImportSpreadsheet';
import Log from '@libs/Log';

File: src/components/ImportSpreadsheetConfirmModal.tsx
Add the safe close handler inside the component, above the return:

const handleClose = async () => {
    try {
        await closeImportPage();
    } catch (error) {
        // Log but do not block navigation
        Log.warn('[ImportSpreadsheetConfirmModal] closeImportPage failed', false, {error});
    } finally {
        // Always call the page callback to close modal and navigate
        closeImportPageAndModal();
    }
};

File: src/components/ImportSpreadsheetConfirmModal.tsx
Replace the ConfirmModal props inside the component return:

<ConfirmModal
    isVisible={isVisible}
    title={titleText}
    prompt={promptText}
    onConfirm={handleClose}
    onCancel={handleClose}
    confirmText={translate('common.buttonConfirm')}
    shouldShowCancelButton={false}
    shouldHandleNavigationBack={shouldHandleNavigationBack}
    onModalHide={onModalHide}
/>

What alternative solutions did you explore? (Optional)

• Clearing the Onyx state on page unmount was considered, but it keeps the timing race and does not guarantee state is cleared before navigation.

[PiyushChandra17]

Proposal

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

iOS - Multi-level Tags - The informational text is overlapping itself under the “More” dropdown

What is the root cause of that problem?

1. The root cause is that, We are rendering RenderHTML inside the View component here

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 686 to 700 in 58e3d08

	<Text style={[styles.textNormal, styles.colorMuted]}>
	{translate('workspace.tags.subtitle')}
	{hasDependentTags && (
	<View style={[styles.renderHTML]}>
	<RenderHTML
	html={translate(
	'workspace.tags.dependentMultiLevelTagsSubtitle',
	isQuickSettingsFlow
	? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
	: `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
	)}
	/>
	</View>
	)}
	</Text>

Now, this View is wrapped inside Text component which causes the overlapping on IOS native

2. Text component cannot contain View

3. RenderHTML uses their own internal styling, leading to layout calculation issues as in this case in IOS native

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

Split the Text component and RenderHTML into separate blocks inside one View:

<View>
    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.tags.subtitle')}</Text>

    {hasDependentTags && (
        <View style={[styles.renderHTML, styles.mt1]}>
            <RenderHTML
                html={translate(
                    'workspace.tags.dependentMultiLevelTagsSubtitle',
                    isQuickSettingsFlow
                        ? `${environmentURL}/${ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))}`
                        : `${environmentURL}/${ROUTES.WORKSPACE_TAGS_IMPORT_OPTIONS.getRoute(policyID)}`,
                )}
            />
        </View>
    )}
</View>

What alternative solutions did you explore? (Optional)

Result:

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.

[github-actions]

⚠️ @PiyushChandra17 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.