Make copy/paste more friendly across New Expensify

[melvin-bot]

Problem

Copying and pasting values in New Expensify is inconsistent, and many values simply can't be copied today. Users often have to open a report or expense before they can copy/paste select details, and even then some fields aren't selectable at all. This creates unnecessary friction when people want to grab an amount, an email, or a field value to use elsewhere.

Proposed solution

Make copy/paste work reliably throughout the app. As a starting scope, add the ability to copy and paste:

• Amount / total fields — any amount or total value should be selectable and copyable.
• Emails and custom fields in the members table — member emails and custom field values should be copyable.
• Values on the reports / expenses page — details shown in report and expense list columns (e.g. report titles, column results) should be selectable/copyable without needing to drill into the report or expense first.

This is intended as a first step toward broader, consistent copy/paste support across the application.

Related

• [Due for payment 2026-07-14] [$250] System/violation messages cannot be selected or copied #84639 — System/violation messages cannot be selected or copied
• [$750] Selecting and copy / pasting multiple messages doesn't work as expected #37447 — Selecting and copy/pasting multiple messages doesn't work as expected

Screenshots/video:

A) Amount field in the expense editor. This value can't be copied unless you open the amount up directly:

2026-07-24_12-03-40.mp4

B) Names/emails on the Members page can't be copied unless you click on their name and then use click the Copy button:

2026-07-24_12-05-16.mp4

C) Values on the expenses or reports page can't be copied in-line. Example using the report ID on the reports page:

2026-07-24_12-07-42.mp4

Issue Owner

Current Issue Owner: @x-dev90

[melvin-bot]

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

[wildan-m]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-24 11:19:59 UTC.

Proposal

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

Values throughout New Expensify cannot be selected or copied. Amounts and totals, member emails and custom field values in the members table, and the column values on the reports/expenses page are all inert — a user has to drill into a report or an expense before they can copy some of these details, and several of them cannot be selected anywhere at all. We want selecting and copying these values to work the way it does on any normal web page.

What is the root cause of that problem?

Every one of these surfaces renders its values inside a row that is itself a pressable, and each of those row pressables opts its entire subtree out of text selection.

The reports/expenses row wrapper applies styles.userSelectNone:

App/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

Line 175 in 457db66

wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}

The shared table row used by the members table does the same:

App/src/components/Table/TableRow.tsx

Lines 98 to 106 in 457db66

	const tableRowPressableStyles = [
	styles.mh5,
	styles.highlightBG,
	styles.userSelectNone,
	!isFirstRow && styles.borderTop,
	isLastRow && styles.tableBottomRadius,
	item.selected && [styles.activeComponentBG, {borderColor: theme.buttonHoveredBG}],
	shouldUseNarrowTableLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
	];

And so does the transaction row inside the report view:

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

Line 230 in 457db66

wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}

userSelectNone resolves to user-select: none:

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

Lines 3 to 14 in 457db66

	const userSelect: UserSelectStyles = {
	userSelectText: {
	userSelect: 'text',
	WebkitUserSelect: 'text',
	},
	userSelectNone: {
	userSelect: 'none',
	WebkitUserSelect: 'none',
	},
	};
	export default userSelect;

user-select is an inherited property, so putting it on the row wrapper silently disables selection for every descendant — the amount, the merchant, the member email, the custom field. The value cells themselves are perfectly ordinary text (they all funnel through the same leaf component, TextWithTooltip), so nothing about the amount or the email is special; they simply inherit the row's opt-out and have no way to opt back in:

App/src/components/TextWithTooltip/index.tsx

Lines 21 to 36 in 457db66

	testID={testID}
	style={style}
	numberOfLines={numberOfLines}
	onLayout={(e) => {
	const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
	if (!shouldShowTooltip) {
	return;
	}
	if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
	setShowTooltip(true);
	return;
	}
	setShowTooltip(false);
	}}
	fsClass={forwardedFSClass}
	>

There is a second, independent blocker on top of the CSS one. The row pressables cancel the browser's default mousedown behaviour, and starting a text selection is that default behaviour, so even where the CSS would permit selection the drag never begins. On the reports/expenses row this is unconditional:

App/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

Lines 115 to 122 in 457db66

	const handleOnMouseDown = (e?: React.MouseEvent) => {
	wasEditingOnMouseDownRef.current = isEditingCell;
	// Skip preventDefault when editing so the browser naturally blurs the input (triggering save/cancel).
	if (!isEditingCell) {
	e?.preventDefault();
	}
	};

The shared table row does the same, though it already carries the shape of the answer — it inspects the mousedown target and lets the event through untouched when the press started on a text input:

App/src/components/Table/TableRow.tsx

Lines 198 to 216 in 457db66

	onMouseDown={(e) => {
	const target = e?.target;
	if (!(target instanceof HTMLElement)) {
	e.preventDefault();
	return;
	}
	if (target.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	if (target.closest('[role="switch"]') || target.closest('[role="checkbox"]')) {
	e.preventDefault();
	return;
	}
	e.preventDefault();
	}}

So the root cause is that selection is switched off at the row level, for the whole row, with no per-value exception — and the mousedown suppression that exists to keep row presses reliable also suppresses the very gesture that starts a selection.

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

Rather than turning selection back on for whole rows — which would make avatars' initials, checkbox labels and button captions selectable again and bring back the stray blue highlight the row-level opt-out was added to prevent — we should let individual value cells opt back in, and teach the row's mousedown handler to respect that.

Concretely:

1. Give TextWithTooltip an opt-in "this is a copyable value" flag. When it is set, the rendered text gets styles.userSelectText. This is the right place because TextWithTooltip is already the single leaf every one of these value cells renders through — amounts, merchants, member emails, custom fields, categories and tags all go through it. On native, the same flag maps onto React Native's own selectable behaviour so long-press-to-copy works there too.

   An explicit user-select: text on the value overrides the row's inherited none: per the CSS spec, text states outright that the element imposes no constraint on selection, whereas the default auto is what inherits an ancestor's none. So the row keeps its guard and only the values become selectable.

2. Turn the flag on for the values named in this issue: the amount/total cell shared by the expenses table and the report view, the report total cell on the reports page, the merchant/description column, and the member email and custom field cells in the members table row.

3. Narrow the mousedown suppression instead of removing it. In the three row handlers above, skip preventDefault() when the mousedown target has opted back into selection — a small helper that reads the target's computed user-select, so a cell that turned selection on is recognised without any extra bookkeeping. This is the same escape hatch TableRow already implements for text inputs. A drag that starts on an amount or an email then begins a real text selection; a click anywhere else on the row behaves exactly as it does today.

4. No extra work is needed to stop a selection drag from also opening the report. React Native Web's press responder already cancels a press once the pointer travels beyond its movement threshold, so dragging across a value selects text without navigating, while a plain click still opens the row.

The result is that a user can select an amount, an email or a custom field straight from the list and copy it with the usual keyboard shortcut, without drilling into the report or expense first — and the change is a shared mechanism, so extending it to the remaining columns and surfaces later is a one-line opt-in per cell rather than another bespoke fix.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/96948-copyable-values?expand=1

What alternative solutions did you explore? (Optional)

Remove styles.userSelectNone from the row wrappers entirely. This is the smallest possible diff, but it makes everything in the row selectable — avatar initials, checkbox labels, action button captions — and re-introduces the accidental text highlight when a user double-clicks or shift-clicks rows, which is what the opt-out was there to prevent. Opting in per value keeps that protection.

Add a hover or context-menu "Copy" button next to each value. This does not actually satisfy the request — the values still would not be selectable, partial copies (say, just the number without the currency symbol) would still be impossible, and it adds a click to every copy while cluttering rows that already carry a checkbox, an action button and a chevron.

Make the change at the Text component level, driven by a context provider. Rows could publish "my values are selectable" through context and Text could read it. This avoids touching each cell, but it flips selection on for every piece of text in the subtree indiscriminately — the same over-reach as removing the row style, only harder to trace — and it still would not solve the mousedown suppression, which has to be handled in the row handler either way.

[godzillaxbox19982014-lgtm]

Proposal

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

Make copy/paste more friendly across New Expensify

What is the root cause of that problem?

I traced this to the path that handles expense report:

• src/hooks/useSelectedTransactionsActions.ts:90 (useSearchSelectionContext): const {selectedTransactionIDs, selectedTransactions: selectedTransactionsMeta} = useSearchSelectionContext();
• src/components/Search/SearchSelectionProvider.tsx:150 (if): if (prevState.selectedReports.length === 0 && isEmptyObject(prevState.selectedTransactions) && !prevState.shouldTurnOffSelectionMode && !prevState.areAllMatchingItemsSelected) {
• src/components/Search/SearchSelectionProvider.tsx:91 (keys): totalSelectableItemsCount && totalSelectableItemsCount !== Object.keys(selectedTransactions).length ? false : prevState.areAllMatchingItemsSelected;
• src/components/Search/SearchSelectionProvider.tsx:249 (SearchSelectionProvider): return {isSelected: areAllMatchingItemsSelected || !!selectedTransactions[keyForList]?.isSelected};
• src/hooks/useSelectedTransactionsActions.ts:90 is the first concrete decision that matches expense report, and src/components/Search/SearchSelectionProvider.tsx:150 is the next matching consumer/mutation. The failing behavior is introduced at this handoff: the second path does not preserve the condition/state established by the first path for the repro case.

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

• Change the issue-matching decision at src/hooks/useSelectedTransactionsActions.ts:90 so the expense report repro state is represented before src/components/Search/SearchSelectionProvider.tsx:150 consumes it.
• Keep the patch at this first decision/consumer boundary (align optimistic/success/failure data with the selector consumed by the screen) instead of masking the downstream UI symptom.
• Keep the change inside the Reports, Expenses, IOU, Transactions surface and avoid changing payment actions, personal/deleted policies.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Add or update a regression in tests/ui/components/IOURequestStepConfirmation*.tsx for the exact issue flow: Make copy/paste more friendly across New Expensify.
2. Cover the counter-case near src/hooks/useSelectedTransactionsActions.ts:90 so valid existing expense report behavior still works.
3. Manually repeat the issue steps after the patch and confirm the visible state/action is no longer stale.

What alternative solutions did you explore? (Optional)

• I would not patch each checkbox row independently; the selected-transaction/report sets need one shared select-all decision or the header and grouped rows will drift again.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[KJ21-ENG]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-24 11:28:59 UTC.

Proposal

What is the root cause of that problem?

Copying an existing browser selection is already wired into the report transaction list through useCopySelectionHelper; the missing piece is allowing a selection to be created and retained. The values in the three examples are rendered as normal Text/TextWithTooltip content, but each value sits inside an interactive row whose ancestors deliberately disable text selection.

App/src/hooks/useCopySelectionHelper.ts

Lines 9 to 23 in 4b47658

	function copySelectionToClipboard() {
	const selection = SelectionScraper.getCurrentSelection();
	if (!selection) {
	return;
	}
	const clipboardText = getClipboardText(selection);
	if (!Clipboard.canSetHtml()) {
	Clipboard.setString(clipboardText);
	return;
	}
	Clipboard.setHtml(selection, clipboardText);
	}
	export default function useCopySelectionHelper() {
	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.COPY, copySelectionToClipboard, {captureOnInputs: false});

The shared styles define both selectable and non-selectable variants, but GenericPressable applies userSelectNone to every button-role pressable and marks that whole pressable as hidden from SelectionScraper. As a result, selecting and copying data inside an interactive MenuItem is either blocked or stripped from the copied result.

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

Lines 3 to 11 in 4b47658

	const userSelect: UserSelectStyles = {
	userSelectText: {
	userSelect: 'text',
	WebkitUserSelect: 'text',
	},
	userSelectNone: {
	userSelect: 'none',
	WebkitUserSelect: 'none',
	},

App/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx

Lines 59 to 60 in 4b47658

	const [isHovered, setIsHovered] = useState(false);
	const isRoleButton = [rest.accessibilityRole, rest.role].includes(CONST.ROLE.BUTTON);

App/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx

Lines 198 to 219 in 4b47658

	return (
	<Pressable
	hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
	onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
	ref={composedRef}
	disabled={fullDisabled || undefined}
	onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
	onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}
	onKeyDown={!isDisabled ? handleKeyDown : undefined}
	onPressIn={!isDisabled ? onPressIn : undefined}
	onPressOut={!isDisabled ? onPressOut : undefined}
	dataSet={{...(isRoleButton ? {[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true} : {}), ...(dataSet ?? {})}}
	style={(state) => [
	cursorStyle,
	StyleUtils.parseStyleFromFunction(style, state),
	isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state),
	state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state),
	(state.hovered || isHovered) && StyleUtils.parseStyleFromFunction(hoverStyle, state),
	state.pressed && StyleUtils.parseStyleFromFunction(pressStyle, state),
	isDisabled && [StyleUtils.parseStyleFromFunction(disabledStyle, state), styles.noSelect],
	isRoleButton && styles.userSelectNone,
	]}

App/src/libs/SelectionScraper/index.ts

Lines 92 to 100 in 4b47658

	// Find and remove the div housing the UnreadActionIndicator because we don't want
	// the 'New/Nuevo' text inside it being copied.
	const divsToRemove = div.querySelectorAll(`[data-${CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT}=true]`);
	if (divsToRemove && divsToRemove.length > 0) {
	for (const element of divsToRemove) {
	element.remove();
	}
	}

There are two additional row-specific blockers. Table.Row adds userSelectNone and unconditionally prevents mouse-down on normal row content; that affects the member name/email and both custom-field values rendered by WorkspaceMembersTableRow. Search rows independently do the same through BaseListItem, the report-row wrapper, and the flat/grouped transaction-row wrappers.

App/src/components/Table/TableRow.tsx

Lines 98 to 106 in 4b47658

	const tableRowPressableStyles = [
	styles.mh5,
	styles.highlightBG,
	styles.userSelectNone,
	!isFirstRow && styles.borderTop,
	isLastRow && styles.tableBottomRadius,
	item.selected && [styles.activeComponentBG, {borderColor: theme.buttonHoveredBG}],
	shouldUseNarrowTableLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
	];

App/src/components/Table/TableRow.tsx

Lines 187 to 218 in 4b47658

	<PressableWithFeedback
	accessible={accessible}
	accessibilityLabel="row"
	id={`table-row-${item.keyForList}`}
	style={tableRowPressableStyles}
	sentryLabel={sentryLabel}
	interactive={interactive}
	disabled={isDisabled}
	hoverStyle={tableRowPressableHoverStyle}
	pressDimmingValue={!interactive ? undefined : 1}
	role={interactive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
	onMouseDown={(e) => {
	const target = e?.target;
	if (!(target instanceof HTMLElement)) {
	e.preventDefault();
	return;
	}
	if (target.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	if (target.closest('[role="switch"]') || target.closest('[role="checkbox"]')) {
	e.preventDefault();
	return;
	}
	e.preventDefault();
	}}
	onPress={(event) => handleRowPress(event)}
	onLongPress={handleRowLongPress}

App/src/components/Table/TableRow.tsx

Lines 198 to 215 in 4b47658

	onMouseDown={(e) => {
	const target = e?.target;
	if (!(target instanceof HTMLElement)) {
	e.preventDefault();
	return;
	}
	if (target.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	if (target.closest('[role="switch"]') || target.closest('[role="checkbox"]')) {
	e.preventDefault();
	return;
	}
	e.preventDefault();

App/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx

Lines 57 to 68 in 4b47658

	<Table.Row
	interactive
	rowIndex={rowIndex}
	disabled={item.disabled}
	accessibilityLabel={accessibilityLabel}
	sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.MEMBERS.LIST_ROW}
	offlineWithFeedback={{
	errors: item.errors,
	pendingAction: item.pendingAction,
	onClose: item.dismissError,
	}}
	onPress={item.action}

App/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx

Lines 80 to 115 in 4b47658

	<TextWithTooltip
	shouldShowTooltip
	text={item.name}
	style={[styles.optionDisplayName, styles.pre]}
	numberOfLines={1}
	/>
	<TextWithTooltip
	shouldShowTooltip
	text={memberSubtitle}
	style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	numberOfLines={1}
	/>
	</View>
	</View>
	{!shouldUseNarrowTableLayout && shouldShowCustomField1Column && (
	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	{!!item.employeeUserID && (
	<TextWithTooltip
	shouldShowTooltip
	numberOfLines={1}
	text={item.employeeUserID}
	style={[styles.lh16, styles.optionDisplayName, styles.pre]}
	/>
	)}
	</View>
	)}
	{!shouldUseNarrowTableLayout && shouldShowCustomField2Column && (
	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	{!!item.employeePayrollID && (
	<TextWithTooltip
	shouldShowTooltip
	numberOfLines={1}
	text={item.employeePayrollID}
	style={[styles.lh16, styles.optionDisplayName, styles.pre]}

App/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx

Lines 79 to 117 in 4b47658

	<View style={[shouldUseNarrowTableLayout && styles.gap1, styles.flex1]}>
	<TextWithTooltip
	shouldShowTooltip
	text={item.name}
	style={[styles.optionDisplayName, styles.pre]}
	numberOfLines={1}
	/>
	<TextWithTooltip
	shouldShowTooltip
	text={memberSubtitle}
	style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	numberOfLines={1}
	/>
	</View>
	</View>
	{!shouldUseNarrowTableLayout && shouldShowCustomField1Column && (
	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	{!!item.employeeUserID && (
	<TextWithTooltip
	shouldShowTooltip
	numberOfLines={1}
	text={item.employeeUserID}
	style={[styles.lh16, styles.optionDisplayName, styles.pre]}
	/>
	)}
	</View>
	)}
	{!shouldUseNarrowTableLayout && shouldShowCustomField2Column && (
	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	{!!item.employeePayrollID && (
	<TextWithTooltip
	shouldShowTooltip
	numberOfLines={1}
	text={item.employeePayrollID}
	style={[styles.lh16, styles.optionDisplayName, styles.pre]}
	/>
	)}

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Lines 193 to 224 in 4b47658

	<PressableWithFeedback
	sentryLabel={CONST.SENTRY_LABEL.SELECTION_LIST.BASE_LIST_ITEM}
	{...bind}
	ref={pressableRef}
	lang={item.lang}
	accessibilityLanguage={item.lang}
	onLongPress={() => {
	onLongPressRow?.(item);
	}}
	onPress={(e) => {
	if (isMouseDownOnInput) {
	e?.stopPropagation(); // Preventing the click action
	return;
	}
	if (shouldPreventEnterKeySubmit && e && 'key' in e && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
	return;
	}
	onSelectRow(item, undefined, e);
	}}
	disabled={isDisabled && !isRowSelected}
	interactive={item.isInteractive}
	isNested
	hoverDimmingValue={1}
	pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
	hoverStyle={!shouldDisableHoverStyle ? [(!item.isDisabled || isRowSelected) && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle] : undefined}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: shouldShowBlueBorderOnFocus}}
	onMouseDown={(e) => {
	if ((e?.target as HTMLElement)?.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	e.preventDefault();
	}}

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Lines 219 to 224 in 4b47658

	onMouseDown={(e) => {
	if ((e?.target as HTMLElement)?.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	e.preventDefault();
	}}

App/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx

Lines 366 to 373 in 4b47658

	const listItemWrapperStyle = useMemo(
	() => [
	styles.flex1,
	styles.userSelectNone,
	isLargeScreenWidth ? {...styles.flexRow, ...styles.justifyContentBetween, ...styles.alignItemsCenter} : {...styles.flexColumn, ...styles.alignItemsStretch},
	],
	[styles, isLargeScreenWidth],
	);

The amount example follows the same producer-to-consumer chain: MoneyRequestView renders the amount as an interactive MenuItemWithTopDescription, which inherits the button-role suppression above. Opening the amount editor or report-details pane only moves the value to a different component with a copy affordance; it does not make the original inline value selectable.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 1195 to 1205 in 4b47658

	<OfflineWithFeedback pendingAction={getPendingFieldAction('amount') ?? (amountTitle ? getPendingFieldAction('customUnitRateID') : undefined)}>
	<MenuItemWithTopDescription
	title={amountTitle}
	shouldShowTitleIcon={shouldShowPaid}
	titleIcon={icons.Checkmark}
	description={amountDescription}
	titleStyle={styles.textHeadlineH2}
	numberOfLinesTitle={2}
	interactive={canEditAmount}
	shouldShowRightIcon={canEditAmount}
	onPress={() => {

The report transaction list has another independent suppression path: its row prevents non-editing mouse-downs, blocks selection during touch presses, marks the row as hidden from copied content, and applies userSelectNone. Commit 5a580cac4077f4854e26d0882710a2aa9e257b0a added the last guard to stop unwanted long-press selection, so this behavior is intentional interaction infrastructure rather than a clipboard-formatting defect.

5a580ca

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

Lines 165 to 171 in 4b47658

	const handleMouseDown = (e?: React.MouseEvent) => {
	wasEditingOnMouseDownRef.current = isEditingCell;
	if (!isEditingCell) {
	e?.preventDefault();
	}
	};

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

Lines 204 to 217 in 4b47658

	onMouseDown={handleMouseDown}
	onHoverIn={handleHoverIn}
	onPressIn={() => {
	wasEditingOnMouseDownRef.current = wasEditingOnMouseDownRef.current || isEditingCell;
	if (canUseTouchScreen()) {
	ControlSelection.block();
	}
	}}
	onPressOut={() => ControlSelection.unblock()}
	onLongPress={() => {
	handleLongPress(transaction.transactionID);
	}}
	disabled={isTransactionPendingDelete(transaction)}
	wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}

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

Add an explicit opt-in such as shouldAllowTextSelection to the shared pressable/list/table/menu primitives, and let selectable text descendants identify themselves to the row handlers. When enabled, the pressable should keep its button role, keyboard behavior, hover behavior, and accessibility label, but it should not add userSelectNone or mark the whole data row as hidden from SelectionScraper. Keep checkboxes, action buttons, icons, and other non-data controls individually excluded from copied content.

Thread that opt-in through Table.Row, BaseListItem, MoneyRequestReportTransactionItem, the Search transaction/group/static rows, and MenuItem. Their mouse handlers should allow a normal drag that starts on marked data text, while still preventing default for other row areas, inputs, switches, checkboxes, inline-edit controls, long-press row selection, and bulk-selection gestures. Before running the row's navigation/selection callback, ignore the activation when the browser has a non-collapsed text selection so finishing a drag does not open the row or toggle it. Expose the native Text.selectable behavior through TextWithTooltip/MenuItem, and use the existing MenuItem copyable/copyValue context-menu path for touch devices.

Enable this behavior only on the intended data-bearing consumers:

• the amount display in MoneyRequestView (with copyValue set to the formatted amount);
• WorkspaceMembersTableRow, covering name/email and both custom-field columns;
• report, flat-expense, grouped-expense, expanded-group, and static Search rows, covering titles, totals, report IDs, and other visible column results;
• report transaction rows and their line, header, breakdown, and footer amount/total outputs.

The report row already maps titles, totals, user/payroll IDs, order/deal numbers, and report IDs to data cells, so making the row selectable covers the configured columns rather than special-casing only the demonstrated report ID.

App/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowWide.tsx

Lines 141 to 230 in 4b47658

	[CONST.SEARCH.TABLE_COLUMNS.PAID_STATUS]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.PAID_STATUS)]}>
	<TextCell
	text={item.formattedPaidStatus ?? ''}
	isLargeScreenWidth
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
	<TextCell
	text={item.reportName ?? ''}
	isLargeScreenWidth
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.FROM]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
	{!!item.from && (
	<UserInfoCell
	accountID={item.from.accountID}
	avatar={item.from.avatar}
	displayName={item.formattedFrom ?? ''}
	isLargeScreenWidth
	/>
	)}
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.TO]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TO)]}>
	{!!item.to && (
	<UserInfoCell
	accountID={item.to.accountID}
	avatar={item.to.avatar}
	displayName={item.formattedTo ?? ''}
	isLargeScreenWidth
	/>
	)}
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL]: (
	<View
	style={[
	StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL, {isAmountColumnWide: item.isAmountColumnWide, shouldRemoveTotalColumnFlex: true}),
	]}
	>
	<TotalCell
	total={reimbursableSpend}
	currency={currency}
	isScanning={isScanning}
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL]: (
	<View
	style={[
	StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL, {
	isAmountColumnWide: item.isAmountColumnWide,
	shouldRemoveTotalColumnFlex: true,
	}),
	]}
	>
	<TotalCell
	total={nonReimbursableSpend}
	currency={currency}
	isScanning={isScanning}
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.TOTAL]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, {isAmountColumnWide: item.isAmountColumnWide, shouldRemoveTotalColumnFlex: true})]}>
	<TotalCell
	total={totalDisplaySpend}
	currency={currency}
	isScanning={isScanning}
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.SUBMITTER_USER_ID]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.SUBMITTER_USER_ID)]}>
	<TextCell text={submitterUserID} />
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.SUBMITTER_PAYROLL_ID]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.SUBMITTER_PAYROLL_ID)]}>
	<TextCell text={submitterPayrollID} />
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.ORDER_DEAL_NUMBERS]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORDER_DEAL_NUMBERS)]}>

The wide Search paths already centralize ordinary values and totals in TextCell and TotalCell; the narrow report renderer owns the corresponding title and amount text directly. The report transaction row has a separate editable total cell, and the report footer has its own total, so each of these must receive the same opt-in rather than assuming one shared cell covers every layout.

App/src/components/Search/SearchList/ListItem/TextCell.tsx

Lines 12 to 21 in 4b47658

	function TextCell({text = '', isLargeScreenWidth = true}: TextCellProps) {
	const styles = useThemeStyles();
	return (
	<TextWithTooltip
	text={text}
	shouldShowTooltip
	numberOfLines={isLargeScreenWidth ? 1 : 2}
	style={[isLargeScreenWidth ? styles.lineHeightLarge : styles.lh20, !isLargeScreenWidth && styles.preWrap, styles.justifyContentCenter]}
	/>

App/src/components/Search/SearchList/ListItem/TotalCell.tsx

Lines 15 to 27 in 4b47658

	function TotalCell({total, currency, isScanning = false}: TotalCellProps) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();
	const {convertToDisplayString} = useCurrencyListActions();
	const displayText = isScanning ? translate('iou.receiptStatusTitle') : convertToDisplayString(total, currency);
	return (
	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={displayText}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}
	/>
	);

App/src/components/TransactionItemRow/DataCells/TotalCell.tsx

Lines 142 to 187 in 4b47658

	const displayContent = (
	<TextWithTooltip
	shouldShowTooltip={shouldShowTooltip}
	text={amountToDisplay}
	style={[styles.optionDisplayName, styles.justifyContentCenter, styles.flexShrink1, styles.textAlignRight]}
	/>
	);
	return (
	<EditableCell
	canEdit={canEdit}
	isEditing={isEditing}
	onStartEditing={handleStartEditing}
	editIconPosition="left"
	editContent={
	<MoneyRequestAmountInput
	ref={focusOnMount}
	amount={absoluteAmount}
	currency={currency}
	disableKeyboard={false}
	isCurrencyPressable={false}
	hideFocusedState
	shouldShowBigNumberPad={false}
	shouldWrapInputInContainer={false}
	shouldApplyPaddingToContainer={false}
	shouldRefocusOnScrollViewClick
	onAmountChange={handleAmountChange}
	onFormatAmount={onFormatAmount}
	onBlur={save}
	allowFlippingAmount={!isSplitBill && allowNegative}
	isNegative={isNegative}
	toggleNegative={toggleNegative}
	clearNegative={clearNegative}
	// EditableCell is responsible for the cell's hover and focus styles (border, background).
	// Suppress MoneyRequestAmountInput's own border and background to avoid visual conflicts.
	containerStyle={[styles.editableCellInputStyle]}
	inputStyle={[styles.textAlignRight, styles.pr0]}
	touchableInputWrapperStyle={styles.editableCellInputStyle}
	scrollViewStyle={[styles.flexRow, styles.justifyContentEnd]}
	symbolTextStyle={[styles.editableCellSymbolStyle, hasSymbolSpaceInPreview && styles.pr1]}
	negativeSymbolStyle={styles.editableCellSymbolStyle}
	/>
	}
	>
	{displayContent}
	</EditableCell>

App/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowWide.tsx

Lines 149 to 216 in 4b47658

	[CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
	<TextCell
	text={item.reportName ?? ''}
	isLargeScreenWidth
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.FROM]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
	{!!item.from && (
	<UserInfoCell
	accountID={item.from.accountID}
	avatar={item.from.avatar}
	displayName={item.formattedFrom ?? ''}
	isLargeScreenWidth
	/>
	)}
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.TO]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TO)]}>
	{!!item.to && (
	<UserInfoCell
	accountID={item.to.accountID}
	avatar={item.to.avatar}
	displayName={item.formattedTo ?? ''}
	isLargeScreenWidth
	/>
	)}
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL]: (
	<View
	style={[
	StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL, {isAmountColumnWide: item.isAmountColumnWide, shouldRemoveTotalColumnFlex: true}),
	]}
	>
	<TotalCell
	total={reimbursableSpend}
	currency={currency}
	isScanning={isScanning}
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL]: (
	<View
	style={[
	StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL, {
	isAmountColumnWide: item.isAmountColumnWide,
	shouldRemoveTotalColumnFlex: true,
	}),
	]}
	>
	<TotalCell
	total={nonReimbursableSpend}
	currency={currency}
	isScanning={isScanning}
	/>
	</View>
	),
	[CONST.SEARCH.TABLE_COLUMNS.TOTAL]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, {isAmountColumnWide: item.isAmountColumnWide, shouldRemoveTotalColumnFlex: true})]}>
	<TotalCell
	total={totalDisplaySpend}
	currency={currency}
	isScanning={isScanning}
	/>

App/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowNarrow.tsx

Lines 38 to 51 in 4b47658

	<View style={[styles.flexColumn, styles.gap1, styles.flex1]}>
	<View style={[styles.flexRow, styles.gap2]}>
	<Text
	numberOfLines={2}
	style={[styles.lh20, styles.flex1]}
	>
	{item.reportName ?? ''}
	</Text>
	<Text style={[styles.lh20, styles.flexShrink0, styles.textAlignRight]}>{amountText}</Text>
	</View>
	<View style={[styles.flexRow, styles.gap2]}>
	<Text style={[styles.mutedNormalTextLabel, styles.flex1]}>{formattedDate}</Text>
	<Text style={[styles.mutedNormalTextLabel, styles.flexShrink0, styles.textAlignRight]}>{expenseCountText}</Text>
	</View>

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Lines 67 to 73 in 4b47658

	{!isEmptyTransactions && (
	<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3, textContainerStyle, shouldUseNarrowLayout && [styles.justifyContentBetween, styles.w100]]}>
	<Text style={[styles.mr3, styles.textLabelSupporting]}>{translate('common.total')}</Text>
	<Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, hasPendingAction && styles.opacitySemiTransparent]}>
	{convertToDisplayString(totalDisplaySpend, report?.currency)}
	</Text>
	</View>

The equivalent flat-expense row has its own mouse-down prevention and userSelectNone, so it must be opted in independently; grouped and static Search renderers need the same treatment to avoid behavior changing with display mode or during the static-to-live handoff.

App/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

Lines 115 to 122 in 4b47658

	const handleOnMouseDown = (e?: React.MouseEvent) => {
	wasEditingOnMouseDownRef.current = isEditingCell;
	// Skip preventDefault when editing so the browser naturally blurs the input (triggering save/cancel).
	if (!isEditingCell) {
	e?.preventDefault();
	}
	};

App/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

Lines 153 to 176 in 4b47658

	return (
	<OfflineWithFeedback pendingAction={item.pendingAction}>
	<PressableWithFeedback
	ref={pressableRef}
	onLongPress={() => onLongPressRow?.(item)}
	onPress={handleOnPress}
	disabled={isDisabled && !isSelected}
	accessibilityLabel={item.text ?? ''}
	role={!isDeletedTransaction ? getButtonRole(true) : 'none'}
	isNested
	onMouseDown={handleOnMouseDown}
	onHoverIn={handleOnHoverIn}
	hoverStyle={[!item.isDisabled && !shouldDisableHoverStyle && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
	id={item.keyForList ?? ''}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM}
	style={[
	pressableStyle,
	isFocused && StyleUtils.getItemBackgroundColorStyle(isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	isDeletedTransaction && styles.cursorDefault,
	]}
	onFocus={onFocus}
	wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
	>

Test coverage: add component tests for the selection contract on GenericPressable, TextWithTooltip, Search text/total cells, and the transaction total cell on web and native props. Add row tests proving selectable descendants do not have mouse-down cancelled and are not removed by SelectionScraper, while non-selectable row areas, inputs, checkboxes, switches, inline-edit cells, and long-press selection retain their current handling; also prove a completed text drag does not navigate or change row selection. Add UI coverage for copying the inline expense amount, workspace member email/custom field, narrow and wide Search report/expense title, column value and amount, grouped/static results, and report-list line/header/breakdown/footer totals. Manually verify web/desktop drag-to-copy, touch long-press copy, row click/keyboard activation, multi-select, inline amount editing, and identical static/live Search behavior.

What alternative solutions did you explore? (Optional)

I considered removing userSelectNone from all button-role pressables, but that would change drag, long-press, and copied-content behavior across unrelated controls. I also considered adding a visible copy button beside every cell, but that would add substantial table clutter and still leave ordinary text selection inconsistent. A scoped primitive opt-in fixes the producers of the suppression while limiting behavior changes to data-bearing rows.

[github-actions]

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

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-24 11:16:28 UTC.

Note: This isn't a duplicate — Different fix mechanism: ours opts in at the pressable/row layer via a new shouldEnableTextSelection prop that skips/drops styles.userSelectNone and adds an explicit window.getSelection() onPress guard — which is precisely the "remove userSelectNone from the rows" approach the flagged proposal explicitly rejects in favor of keeping the row guard and overriding per-leaf in TextWithTooltip with user-select: text. Different root cause too: ours pinpoints the shared BaseGenericPressable primitive (isRoleButton && styles.userSelectNone) that every button-role pressable inherits, a convergence point the flagged proposal never identifies.

Proposal

What is the root cause of that problem?

This isn't one broken field — the app systematically disables browser text selection at its two shared "row" layers, so every value rendered inside a pressable row (search/report columns, member emails and custom fields, amounts/totals shown in menu rows) inherits user-select: none and can never be selected.

The causal chain:

1. Every button-role pressable unconditionally applies userSelectNone, which cascades to all descendant text on web:

App/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx

Line 218 in 4b47658

isRoleButton && styles.userSelectNone,

2. The two shared row components add their own suppression on top. TableRow (used by WorkspaceMembersTable and all the other tables) hard-codes userSelectNone and calls preventDefault() on every mousedown — and preventing default on mousedown stops the browser from ever starting a selection, regardless of CSS:

App/src/components/Table/TableRow.tsx

Lines 98 to 106 in 4b47658

	const tableRowPressableStyles = [
	styles.mh5,
	styles.highlightBG,
	styles.userSelectNone,
	!isFirstRow && styles.borderTop,
	isLastRow && styles.tableBottomRadius,
	item.selected && [styles.activeComponentBG, {borderColor: theme.buttonHoveredBG}],
	shouldUseNarrowTableLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
	];

App/src/components/Table/TableRow.tsx

Lines 198 to 216 in 4b47658

	onMouseDown={(e) => {
	const target = e?.target;
	if (!(target instanceof HTMLElement)) {
	e.preventDefault();
	return;
	}
	if (target.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	if (target.closest('[role="switch"]') || target.closest('[role="checkbox"]')) {
	e.preventDefault();
	return;
	}
	e.preventDefault();
	}}

3. BaseListItem (every SelectionList row, including the Reports/Expenses search results) does the same mousedown preventDefault():

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Lines 219 to 224 in 4b47658

	onMouseDown={(e) => {
	if ((e?.target as HTMLElement)?.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	e.preventDefault();
	}}

Chat messages are the one place that copy works, because they explicitly opt in with the existing userSelectText style and aren't inside a button-role pressable:

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

Line 126 in 4b47658

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

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

Fix it at the three shared convergence points so any screen can opt in, then opt in the surfaces named in the issue:

1. Add a shouldEnableTextSelection prop to GenericPressable that skips the isRoleButton && styles.userSelectNone style in the style callback in BaseGenericPressable.
2. In TableRow and BaseListItem, when text selection is enabled for the row: drop styles.userSelectNone, and in onMouseDown only call preventDefault() when the mousedown target isn't selectable text (this keeps the current focus-preserving behavior for icons/checkboxes). Also guard the row's onPress so drag-selecting doesn't activate the row, using the same check SelectionScraper already uses:

if (window.getSelection()?.toString()) {
    return; // user was selecting text, not clicking the row
}

3. Opt in the requested surfaces by turning the flag on for search result rows and members-table rows, and applying the existing styles.userSelectText (plus selectable on native) to the value texts — e.g. the amount cell rendered via TextWithTooltip here:

App/src/components/Search/SearchList/ListItem/TotalCell.tsx

Lines 20 to 27 in 4b47658

	return (
	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={displayText}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}
	/>
	);

and the email / custom-field cells in WorkspaceMembersTable, and amount/total display fields in report views. This mirrors the pattern chat messages already use, so behavior stays consistent (and touch devices can keep selection off, as chat does).

What alternative solutions did you explore? (Optional)

Adding explicit copy affordances instead (hover/long-press "Copy" using the existing CopyTextToClipboard component) per field. It avoids touching the pressable layers, but requires per-field work forever and doesn't achieve the issue's goal of selection working "reliably throughout the app", so it's better as a complement (e.g. for touch devices) than the primary fix.

[dilshodmackbook-sketch]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-24 11:17:58 UTC.

Proposal

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

Values throughout New Expensify can't be selected or copied. Amounts and totals, member emails and custom field values in the members table, and the column values on the reports/expenses page are all inert — a user has to drill into a report or expense before some of these can be copied, and several can't be selected anywhere at all. We want selecting and copying these values to work the way it does on any ordinary web page.

What is the root cause of that problem?

Text selection is switched off at the row level, for the whole row, and there's no per-value way to opt back in. Two independent blockers stack on top of each other.

1. user-select: none on the row wrapper, which every descendant inherits.

The shared table row that backs the members table, categories, tags and the rest of the workspace lists applies styles.userSelectNone:

App/src/components/Table/TableRow.tsx

Lines 98 to 106 in a4b6ddf

	const tableRowPressableStyles = [
	styles.mh5,
	styles.highlightBG,
	styles.userSelectNone,
	!isFirstRow && styles.borderTop,
	isLastRow && styles.tableBottomRadius,
	item.selected && [styles.activeComponentBG, {borderColor: theme.buttonHoveredBG}],
	shouldUseNarrowTableLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
	];

The reports/expenses row wrapper does the same:

App/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

Line 175 in a4b6ddf

wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}

And so does the transaction row inside the report view:

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

Line 230 in a4b6ddf

wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}

userSelectNone resolves to user-select: none:

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

Lines 3 to 14 in a4b6ddf

	const userSelect: UserSelectStyles = {
	userSelectText: {
	userSelect: 'text',
	WebkitUserSelect: 'text',
	},
	userSelectNone: {
	userSelect: 'none',
	WebkitUserSelect: 'none',
	},
	};
	export default userSelect;

user-select is an inherited property, so putting it on the row silently disables selection for every descendant — the amount, the merchant, the member email, the custom field. Those value cells are perfectly ordinary text (they all funnel through the same leaf, TextWithTooltip), so nothing about them is special; they simply inherit the row's opt-out and have no way to opt back in:

App/src/components/TextWithTooltip/index.tsx

Lines 12 to 41 in a4b6ddf

	function TextWithTooltip({testID, text, shouldShowTooltip, style, numberOfLines = 1, forwardedFSClass}: TextWithTooltipProps) {
	const [showTooltip, setShowTooltip] = useState(false);
	return (
	<Tooltip
	shouldRender={showTooltip}
	text={text}
	>
	<Text
	testID={testID}
	style={style}
	numberOfLines={numberOfLines}
	onLayout={(e) => {
	const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
	if (!shouldShowTooltip) {
	return;
	}
	if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
	setShowTooltip(true);
	return;
	}
	setShowTooltip(false);
	}}
	fsClass={forwardedFSClass}
	>
	{text}
	</Text>
	</Tooltip>
	);
	}

2. The row's mousedown handler calls preventDefault(), and starting a text selection is that default behavior.

So even where the CSS would permit selection, the drag never begins. On the reports/expenses row and the report-view row this fires whenever the row isn't being edited:

App/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

Lines 115 to 122 in a4b6ddf

	const handleOnMouseDown = (e?: React.MouseEvent) => {
	wasEditingOnMouseDownRef.current = isEditingCell;
	// Skip preventDefault when editing so the browser naturally blurs the input (triggering save/cancel).
	if (!isEditingCell) {
	e?.preventDefault();
	}
	};

The shared table row already carries the shape of the answer — it inspects the mousedown target and lets the event through untouched when the press started on a text input:

App/src/components/Table/TableRow.tsx

Lines 198 to 216 in a4b6ddf

	onMouseDown={(e) => {
	const target = e?.target;
	if (!(target instanceof HTMLElement)) {
	e.preventDefault();
	return;
	}
	if (target.tagName === CONST.ELEMENT_NAME.INPUT) {
	return;
	}
	if (target.closest('[role="switch"]') || target.closest('[role="checkbox"]')) {
	e.preventDefault();
	return;
	}
	e.preventDefault();
	}}

So selection is off for the whole row with no per-value exception, and the mousedown suppression that keeps row presses reliable also suppresses the very gesture that starts a selection.

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

Rather than turning selection back on for whole rows — which would make avatar initials, checkbox labels and button captions selectable again and bring back the stray blue highlight the row-level opt-out was added to prevent — we let individual value cells opt back in, and teach the row's mousedown handler to respect that. The row keeps its guard.

1. Give TextWithTooltip an opt-in "copyable value" flag. When set, the rendered Text gets styles.userSelectText and a data attribute so the row handler can recognise it. This is the right place because TextWithTooltip is the single leaf every one of these cells renders through — amounts, merchants, member emails, custom fields, categories and tags all go through it. On native the same flag maps onto React Native's selectable, so long-press-to-copy works there too.

An explicit user-select: text on the value overrides the row's inherited none: per the CSS spec, text imposes no constraint on selection, whereas the default auto is what inherits an ancestor's none. The row keeps userSelectNone; only the values become selectable.

2. Turn the flag on for the values named in this issue: the amount/total cell shared by the expenses table and the report view, and the member email and custom-field cells in the members table row.

3. Narrow the mousedown suppression instead of removing it. In the three handlers above, skip preventDefault() when the mousedown target is inside a marked value element — exactly the escape hatch TableRow already implements for text inputs:

if (target.tagName === CONST.ELEMENT_NAME.INPUT || target.closest('[data-selectable-value="true"]')) {
    return; // let the browser start a native text selection
}

A drag that starts on an amount or an email then begins a real text selection; a click anywhere else on the row behaves exactly as today.

4. Nothing extra is needed to stop a selection drag from also opening the report. React Native Web's press responder cancels a press once the pointer travels beyond its movement threshold, so dragging across a value selects text without navigating, while a plain click still opens the row.

The result: a user can select an amount, an email or a custom field straight from the list and copy it with the usual shortcut, without drilling into the report or expense first — and because it's a shared mechanism, extending it to the remaining columns later is a one-line opt-in per cell.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Render an expenses/reports row and simulate mousedown + drag across the amount cell; assert window.getSelection() is non-empty and that the row's press/navigation handler was not called.
2. A plain click (mousedown + mouseup at the same point) on the amount cell still fires the row press handler (navigation preserved).
3. Assert the amount, member-email and custom-field cells resolve to user-select: text while the row wrapper keeps user-select: none, and that a sibling non-value cell (e.g. avatar initials) stays non-selectable.
4. Native: the value Text receives selectable.

What alternative solutions did you explore? (Optional)

Remove styles.userSelectNone from the row wrappers entirely. Smallest possible diff, but it makes everything in the row selectable — avatar initials, checkbox labels, action-button captions — and re-introduces the accidental highlight when a user double-clicks or shift-clicks rows, which is what the opt-out was there to prevent. Opting in per value keeps that protection.

Stop mousedown propagation from the value cell (reusing the existing shouldStopMouseDownPropagation idiom the row's own checkbox uses,

App/src/components/SelectionButton.tsx

Lines 168 to 172 in a4b6ddf

	onMouseDown={(e) => {
	if (shouldStopMouseDownPropagation) {
	e.stopPropagation();
	}
	onMouseDown?.(e);

) instead of editing the row handlers. Rejected because stopping propagation also prevents the row from becoming the press responder, so a plain click on the value would no longer open the report — skipping only preventDefault() preserves click-to-open while still allowing the selection drag.

Add a hover or context-menu "Copy" button next to each value. Doesn't actually make the values selectable — partial copies (just the number without the currency symbol) stay impossible, it adds a click to every copy, and it clutters rows that already carry a checkbox, an action button and a chevron.

Drive selection from the Text component via a context provider. Rows could publish "my values are selectable" through context and Text could read it, but that flips selection on for every text node in the subtree indiscriminately — the same over-reach as removing the row style, only harder to trace — and it still wouldn't address the mousedown suppression, which has to be handled in the row handler either way.