[$250] System/violation messages cannot be selected or copied

[m-natarajan]

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.34-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Submit a report with a violation
2. View the violation message displayed on the report
3. Attempt to click and drag the mouse to select the text, or double-click a word to highlight it

Expected Result:

Users should be able to select the text in system/violation messages
Standard text selection behavior should work (click + drag, double-click to select word, etc.)
Users should be able to copy the message text

Actual Result:

The message text cannot be selected or highlighted.
Users are unable to copy the content of the system message.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Recording.2497.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @thesahindia

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022031119289878700840
• Upwork Job ID: 2031119289878700840
• Last Price Increase: 2026-03-16

[melvin-bot]

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

[MelvinBot]

Proposal

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

System/violation messages on reports cannot be selected or copied on web (Chrome/Safari). Standard text selection behavior (click + drag, double-click) does not work on these messages, while regular chat messages are selectable.

What is the root cause of that problem?

There are two related issues preventing text selection on system/violation messages:

1. ReportActionItemBasicMessage lacks explicit userSelectText styling

System and violation messages (e.g., DISMISSED_VIOLATION, RESOLVED_DUPLICATES, and many other system action types) are rendered via ReportActionItemBasicMessage. This component renders a plain <Text> with only chatItemMessage and colorMuted styles — it does not apply styles.userSelectText.

In contrast, regular chat messages go through TextCommentFragment, which explicitly applies styles.userSelectText on desktop web (non-touch devices):

!canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone

Similarly, HTML-rendered comments receive userSelectText via BaseHTMLEngineProvider's defaultViewProps.

Since ReportActionItemBasicMessage never applies any userSelect style, the text relies on CSS inheritance from parent containers, which on web may default to user-select: none (React Native Web's View components do not inherently set user-select: text).

2. ReportActionItemMessageWithExplain explicitly disables selection

Some system messages (modified expense notifications, auto-submitted messages) go through ReportActionItemMessageWithExplain, which passes isSelectable={false} to RenderHTML, actively disabling text selection for these messages even on desktop web.

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

Fix 1: In ReportActionItemBasicMessage, add styles.userSelectText (conditionally for non-touch/non-narrow layouts, mirroring the pattern from TextCommentFragment) to both the <Text> and <TextWithEmojiFragment> style arrays. Use the same condition: !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone.

Fix 2: In ReportActionItemMessageWithExplain, change isSelectable={false} to conditionally allow selection on desktop web (non-touch/non-narrow), or remove the isSelectable={false} prop entirely so it defaults to true (which is the default in the RenderHTML component).

What alternative solutions did you explore? (Optional)

An alternative would be to apply userSelectText at the PressableWithSecondaryInteraction wrapper level for all report actions on desktop web. However, this is a broader change with more potential side effects. The targeted approach of adding userSelectText to ReportActionItemBasicMessage and fixing ReportActionItemMessageWithExplain is more surgical and follows the established pattern already used by TextCommentFragment.

---

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 - @thesahindia (External)

[melvin-bot]

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

[MugheesMb]

melvin proposal seems to be the perfect.

[ProjectNOVACo]

Proposal

Root Cause:
Two components disable text selection for system/violation messages on desktop web:

1. ReportActionItemBasicMessage in src/components/ReportActionItemBasicMessage.tsx does not apply userSelectText styling, so system messages rendered through it cannot be highlighted or copied on desktop web.

2. ReportActionItemMessageWithExplain in src/components/ReportActionItemMessageWithExplain.tsx explicitly passes isSelectable={false} to its child RenderHTML component, which forces user-select: none on violation explanation text.

The correct pattern already exists in TextCommentFragment, which conditionally applies styles.userSelectText for desktop web and styles.userSelectNone for touch devices.

Solution:

1. In ReportActionItemBasicMessage.tsx, add conditional userSelectText styling matching the TextCommentFragment pattern:

// src/components/ReportActionItemBasicMessage.tsx
+ import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+ import useResponsiveLayout from '@hooks/useResponsiveLayout';

// In the component render:
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
+ const selectableStyle = !canUseTouchScreen() || !shouldUseNarrowLayout
+     ? styles.userSelectText
+     : styles.userSelectNone;
// Apply selectableStyle to the message container

2. In ReportActionItemMessageWithExplain.tsx, remove the hardcoded isSelectable={false} or make it conditional based on platform:

// src/components/ReportActionItemMessageWithExplain.tsx
- isSelectable={false}
+ isSelectable={!canUseTouchScreen() || !shouldUseNarrowLayout}

Impact:

• Follows the established selection pattern already used by TextCommentFragment
• Desktop web users can select/copy system and violation text
• Touch device behavior unchanged (no accidental text selection during scrolling)
• Two-file change with minimal risk

[melvin-bot]

📣 @ProjectNOVACo! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>