[Due for payment 2026-04-17] [$250] Chat - Edited status is not selected when triple clicking a message

[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.3.51-0
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-14589/folder/13176723/41237043/1295548364
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Web
App Component: Other

Action Performed:

1. Navigate to ND
2. Open any chat with edited messages
3. Make a triple click over an edited message

Expected Result:

The edited status should be selected when triple clicking the message.

Actual Result:

Edited status is not being selected after triple clicking the edited message.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022039319194519331995
• Upwork Job ID: 2039319194519331995
• Last Price Increase: 2026-04-01

[MelvinBot]

Proposal

What is the root cause of that problem?

The (edited) label on web has display: inline-flex applied via editedLabelStyles. This CSS property creates a new formatting context — the browser treats the (edited) element as an atomic inline box rather than regular inline text. When triple-clicking to select a paragraph, the browser's paragraph-selection algorithm excludes this atomic inline-flex box from the selection range.

This only affects web because the native editedLabelStyles is empty (no display: inline-flex).

The (edited) label is rendered through two paths in TextCommentFragment.tsx:

1. HTML path (most messages): <edited> tag appended to message HTML, rendered via EditedRenderer with editedLabelStyles
2. Text path (plain text only): (edited) rendered as a Text component with editedLabelStyles

Both paths apply the same display: inline-flex style that breaks triple-click selection.

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

Change editedLabelStyles in src/styles/utils/editedLabelStyles/index.ts to use display: inline instead of display: inline-flex, and remove the alignItems: baseline (which is a flex property and has no effect on display: inline elements). Baseline alignment is the default for inline text, so the visual appearance will be preserved.

What alternative solutions did you explore? (Optional)

• Adding userSelect: 'text' to editedLabelStyles: This could help in the text rendering path where the message text explicitly gets userSelectText but the (edited) label does not. However, it wouldn't fully solve the issue because display: inline-flex still creates an atomic box that the browser may exclude from paragraph selection.
• Keeping inline-flex and using JavaScript to extend selection: Overly complex and fragile.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[KJ21-ENG]

Proposal

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

On web, triple-clicking an edited chat message does not include the (edited) status in the selected text range. From the issue video, the message body becomes selected while the (edited) label remains unselected.

What is the root cause of that problem?

The web edited label style is rendered as an inline flex container, not plain inline text.

App/src/styles/utils/editedLabelStyles/index.ts

Lines 1 to 10 in 1d43910

	// eslint-disable-next-line no-restricted-imports
	import display from '@styles/utils/display';
	// eslint-disable-next-line no-restricted-imports
	import flex from '@styles/utils/flex';
	import type EditedLabelStyles from './types';
	const editedLabelStyles: EditedLabelStyles = {
	...display.dInlineFlex,
	...flex.alignItemsBaseline,
	};

That same style is applied in both edited-label render paths:

• HTML path (<edited> tag rendered by EditedRenderer)
• Text fallback path in TextCommentFragment
  

  App/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx

  Lines 15 to 23 in 1d43910

  	<Text fontSize={variables.fontSizeSmall}>
  	<Text fontSize={variables.fontSizeSmall}> </Text>
  	<Text
  	// eslint-disable-next-line react/jsx-props-no-spreading
  	{...defaultRendererProps}
  	fontSize={variables.fontSizeSmall}
  	color={theme.textSupporting}
  	style={[styles.editedLabelStyles, isPendingDelete && styles.offlineFeedbackDeleted]}
  	>

  
  

  App/src/pages/inbox/report/comment/TextCommentFragment.tsx

  Lines 79 to 153 in 1d43910

  	const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
  	// We need to replace the space at the beginning of each line with &nbsp;
  	const escapedHtml = html.replaceAll(/(^|<br \/>)[ ]+/gm, (match: string, p1: string) => p1 + '&nbsp;'.repeat(match.length - p1.length));
  	const htmlWithDeletedTag = styleAsDeleted ? `<del>${escapedHtml}</del>` : escapedHtml;
  	let htmlContent = htmlWithDeletedTag;
  	if (containsOnlyEmojis) {
  	htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji islarge>');
  	} else if (containsEmojis) {
  	htmlContent = htmlWithDeletedTag;
  	if (!htmlContent.includes('<emoji>')) {
  	htmlContent = Parser.replace(htmlContent, {filterRules: ['emoji'], shouldEscapeText: false});
  	}
  	htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji ismedium>');
  	}
  	let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
  	if (styleAsMuted) {
  	htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
  	}
  	htmlWithTag = adjustExpensifyLinksForEnv(getHtmlWithAttachmentID(htmlWithTag, reportActionID));
  	return (
  	<RenderCommentHTML
  	containsOnlyEmojis={containsOnlyEmojis}
  	source={source}
  	html={htmlWithTag}
  	/>
  	);
  	}
  	return (
  	<Text style={[containsOnlyEmojis && styles.onlyEmojisText, styles.ltr, style]}>
  	<ZeroWidthView
  	text={text}
  	displayAsGroup={displayAsGroup}
  	/>
  	{processedTextArray.length !== 0 && !containsOnlyEmojis ? (
  	<TextWithEmojiFragment
  	message={message}
  	style={[
  	styles.ltr,
  	style,
  	styleAsDeleted ? styles.offlineFeedbackDeleted : undefined,
  	styleAsMuted ? styles.colorMuted : undefined,
  	!canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone,
  	]}
  	/>
  	) : (
  	<Text
  	style={[
  	containsOnlyEmojis ? styles.onlyEmojisText : undefined,
  	styles.ltr,
  	style,
  	styleAsDeleted ? styles.offlineFeedbackDeleted : undefined,
  	styleAsMuted ? styles.colorMuted : undefined,
  	!canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone,
  	containsOnlyCustomEmoji && styles.customEmojiFont,
  	]}
  	>
  	{convertToLTR(message ?? '')}
  	</Text>
  	)}
  	{!!fragment?.isEdited && (
  	<>
  	<Text style={[containsOnlyEmojis && styles.onlyEmojisTextLineHeight]}> </Text>
  	<Text
  	fontSize={variables.fontSizeSmall}
  	color={theme.textSupporting}
  	style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedbackDeleted, style]}
  	>
  	{translate('reportActionCompose.edited')}
  	</Text>

Because the edited token is rendered as inline-flex, browser paragraph selection behavior can treat it as a separate atomic box, so triple-click selection captures the message text but skips (edited).

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

1. Update src/styles/utils/editedLabelStyles/index.ts to use display: inline (not inline-flex) and remove the flex-only alignItems: baseline style.
2. Keep using styles.editedLabelStyles in both render paths so the fix applies consistently to HTML and text-rendered edited messages.
3. Add/adjust a web regression check that triple-click selection on an edited message includes both message text and (edited).

What alternative solutions did you explore? (Optional)

• Add explicit userSelect: text to the edited label. This can help selectability but does not address the core layout issue caused by inline-flex.
• Implement JS selection patching after triple-click. This is more complex and brittle compared with fixing the edited label display style at the source.

[JasimMalook]

Proposal
Please re-state the problem that we are trying to solve in this issue.
On web, triple-clicking an edited chat message selects the message body but skips the (edited) label. The label remains unselected even though it is part of the same paragraph.
What is the root cause of that problem?
The root cause is in src/styles/utils/editedLabelStyles/index.ts. The web edited label style uses display: inline-flex:
tsconst editedLabelStyles: EditedLabelStyles = {
...display.dInlineFlex, // display: inline-flex
...flex.alignItemsBaseline, // alignItems: baseline
};
display: inline-flex creates an atomic inline formatting context — the browser treats the element as a single indivisible box, not as part of the surrounding text flow. When the browser's triple-click paragraph selection algorithm runs, it selects inline text nodes but excludes atomic inline boxes like inline-flex elements.
This affects both render paths in TextCommentFragment.tsx:

HTML path — tag rendered via EditedRenderer with editedLabelStyles
Text path — (edited) rendered as a Text component with editedLabelStyles

This is web-only because the native editedLabelStyles is empty — no display: inline-flex on native.
What changes do you think we should make in order to solve the problem?
Two changes needed together in src/styles/utils/editedLabelStyles/index.ts:
Fix 1 — Change display: inline-flex to display: inline:
tsconst editedLabelStyles: EditedLabelStyles = {
display: 'inline',
};
display: inline makes the label part of the normal text flow, so the browser's triple-click selection includes it naturally. alignItems: baseline can be removed because it is a flex-only property and has no effect on display: inline — baseline alignment is the default for inline text anyway.
Fix 2 — Add userSelect: 'text' explicitly:
tsconst editedLabelStyles: EditedLabelStyles = {
display: 'inline',
userSelect: 'text',
};
In TextCommentFragment.tsx text path, the message text gets styles.userSelectText applied conditionally:
ts!canUseTouchScreen() || !shouldUseNarrowLayout
? styles.userSelectText
: styles.userSelectNone
But the (edited) label does NOT get this conditional — it only gets editedLabelStyles. Without explicit userSelect: 'text', even with display: inline, the label may still be unselectable if it inherits userSelect: none from a parent container.
Adding userSelect: 'text' to editedLabelStyles ensures the label is always selectable on web regardless of parent styles.
Why both fixes are needed:
Fix 1 alone — changes layout to inline but if parent has userSelect: none, label still won't be selectable.
Fix 2 alone — makes element selectable but inline-flex atomic box still excluded from triple-click paragraph selection.
Together — label is both in the text flow AND explicitly selectable.
What alternative solutions did you explore?
JavaScript selection patching after triple-click was considered — extending the selection range to include the edited label. This is fragile and complex compared to fixing the CSS at the source.
Adding userSelect: 'text' without fixing display was also considered but insufficient — the atomic box issue would remain.

Contributor details
Your Expensify account email: jasimmalook@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~014c25762fc2275193

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2026-04-01 13:06:37 UTC.

Proposal

Chat - Edited status is not selected when triple clicking a message

What is the root cause of that problem?

In plain text message rendering, the edited suffix rendered as a separate text segment from the main message text in TextCommentFragment.
Because it is separate, browser double/triple click selection stop at the message text and exclude (edited), so when user leter copy that message edited missed from selected message.

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

We should update TextCommentFragment so that for plain text rendering, (edited) is included in the same text flow as the message content where needed.
This keeps spacing correct and makes double/triple click selection and copy include (edited) consistently.

const shouldRenderEditedAsSeparateText = processedTextArray.length !== 0 && !containsOnlyEmojis;

{convertToLTR(message ?? '')}
        {!!fragment?.isEdited && (
            <>
                {' '}
                <Text
                    fontSize={variables.fontSizeSmall}
                    color={theme.textSupporting}
                    style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedbackDeleted]}
                >
                    {translate('reportActionCompose.edited')}
                </Text>
            </>
        )}
    </Text>
)}
{!!fragment?.isEdited && shouldRenderEditedAsSeparateText && (
    <>
        <Text style={[containsOnlyEmojis && styles.onlyEmojisTextLineHeight]}> </Text>
        <Text
            fontSize={variables.fontSizeSmall}
            color={theme.textSupporting}
            style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedbackDeleted, style]}
        >
            {translate('reportActionCompose.edited')}
        </Text>
    </>
)}

here

App/src/pages/inbox/report/comment/TextCommentFragment.tsx

Lines 145 to 156 in 598b3e3

	{!!fragment?.isEdited && (
	<>
	<Text style={[containsOnlyEmojis && styles.onlyEmojisTextLineHeight]}> </Text>
	<Text
	fontSize={variables.fontSizeSmall}
	color={theme.textSupporting}
	style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedbackDeleted, style]}
	>
	{translate('reportActionCompose.edited')}
	</Text>
	</>
	)}

What alternative solutions did you explore? (Optional)

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.

Results

macOS.Chrome.mp4

[github-actions]

⚠️ @samranahm 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.