[$250] Safari - Error message text is not selectable

[mitarachim]

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: v9.3.54-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: #86271
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Mac 15.4.1 Safari
App Component: Chat Report View

Action Performed:

1. Go to https://staging.new.expensify.com
2. Open any chat
3. Go to account > Troubleshoot
4. Turn on "Simulate failing network requests"
5. Send a message in the chat
6. Error will appear
7. Select an error message

Expected Result:

Error message text ("Unexpected error posting the comment. Please try again later.") is selectable with click and drag. Blue selection highlight appears correctly.

Actual Result:

Error message text is not selectable in Safari

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7124369_1775620455094.Recording__1972.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @iwiznia

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022041785352032178173
• Upwork Job ID: 2041785352032178173
• Last Price Increase: 2026-05-13

[MelvinBot]

Proposal

What is the root cause of that problem?

Safari does not allow child user-select: text to override an ancestor's user-select: none (unlike Chrome/Firefox which do). The entire report action item is wrapped in a PressableWithSecondaryInteraction with accessibilityRole="button" (PureReportActionItem.tsx:2122), which causes BaseGenericPressable to unconditionally apply userSelectNone (BaseGenericPressable.tsx:195). The error text rendered by DotIndicatorMessage correctly sets userSelectText on the <Text> element (DotIndicatorMessage.tsx:110), but Safari ignores this child override when an ancestor has user-select: none.

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

In PureReportActionItem, the error row rendered by OfflineWithFeedback (via ErrorMessageRow → MessagesRow → DotIndicatorMessage) should be moved outside the PressableWithSecondaryInteraction wrapper so it's no longer a descendant of the element with user-select: none. This avoids the Safari inheritance issue entirely without changing the broad GenericPressable behavior.

What alternative solutions did you explore? (Optional)

1. Remove userSelectNone from BaseGenericPressable when isRoleButton — Too broad an impact; would affect all button-role pressables across the app.
2. Add a Safari-specific CSS workaround (e.g., wrapping the error in an element that creates a new stacking context for user-select) — Fragile and browser-specific; restructuring the DOM is cleaner.

Supporting evidence

• BaseGenericPressable.tsx:195: isRoleButton && styles.userSelectNone applies user-select: none + -webkit-user-select: none to the pressable container
• BaseGenericPressable.tsx:52: isRoleButton is true when accessibilityRole or role is CONST.ROLE.BUTTON
• PureReportActionItem.tsx:2122: Sets accessibilityRole={CONST.ROLE.BUTTON} on the PressableWithSecondaryInteraction
• DotIndicatorMessage.tsx:110: Sets styles.userSelectText on error text, which Chrome/Firefox respect but Safari does not when an ancestor has user-select: none
• styles/utils/userSelect/index.ts:8-11: userSelectNone includes both userSelect: 'none' and WebkitUserSelect: 'none'

Possibly related: #84639 — System/violation messages also cannot be selected or copied, likely the same root cause.

---

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.

[MobileMage]

Proposal

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

Error message text rendered by DotIndicatorMessage (e.g. "Unexpected error posting the comment") is not text-selectable in Safari on macOS, even though it should be.

What is the root cause of that problem?

The guard in DotIndicatorMessage that decides whether to apply userSelectText or userSelectNone is:

const isTextSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout;

On a MacBook with a Touch Bar or running macOS 13+, navigator.maxTouchPoints is reported as 5 by Safari (it was added by Apple to enable compatibility with pointer-events specs for Pencil/touch on iPad). This causes canUseTouchScreen() to return true, so isTextSelectable becomes false || !shouldUseNarrowLayout. On a wide layout that evaluates to true, but the check itself is fragile and unreliable for desktop-class browsers.

The deeper problem is that canUseTouchScreen() is being used as a proxy for "is this a pointer-only (desktop) environment where text selection makes sense", but it is not reliable for that purpose — especially in Safari where maxTouchPoints > 0 on any modern Mac.

App/src/components/DotIndicatorMessage.tsx

Line 89 in d1dbbcb

const isTextSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout;

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

The error text in DotIndicatorMessage should always be selectable on web (non-native) platforms. The canUseTouchScreen guard exists to suppress accidental text selection on actual mobile touch UIs, but on web the correct signal is whether the user has a fine pointer (mouse/trackpad), not whether the device reports any touch capability.

The fix is to replace the canUseTouchScreen() condition with a hasHoverSupport() check (which tests (hover: hover) and (pointer: fine)), which is already available in the same DeviceCapabilities module and correctly returns false on touch-only devices and true on desktop browsers — including Safari on macOS:

App/src/components/DotIndicatorMessage.tsx

Lines 89 to 110 in d1dbbcb

	const isTextSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout;
	const renderMessage = (message: string | ReceiptError | ReactElement, index: number) => {
	if (isReceiptError(message)) {
	return (
	<View style={[styles.renderHTML, styles.flexRow]}>
	<RenderHTML
	html={translate('iou.error.receiptFailureMessage')}
	onLinkPress={(_evt, href) => handleLinkPress(href)}
	/>
	</View>
	);
	}
	const displayMessage = isTranslationKeyError(message) ? translate(message.translationKey) : message;
	const formattedMessage = typeof displayMessage === 'string' ? Str.htmlDecode(displayMessage) : displayMessage;
	return (
	<Text
	// eslint-disable-next-line react/no-array-index-key
	key={index}
	style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles, isTextSelectable ? styles.userSelectText : styles.userSelectNone]}

-import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {hasHoverSupport} from '@libs/DeviceCapabilities';

-    const isTextSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout;
+    const isTextSelectable = hasHoverSupport();

hasHoverSupport() returns true when the primary pointing device can hover (i.e. a real mouse/trackpad), which is the correct signal for whether drag-to-select text should be enabled. The shouldUseNarrowLayout guard is unnecessary here because narrow layout on a desktop still has a pointer, and it was only adding confusion alongside the broken canUseTouchScreen check.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[KJ21-ENG]

Proposal

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

On Safari, users should be able to click and drag to select the inline error text shown under failed chat actions (for example, “Unexpected error posting the comment…”), but selection does not work.

What is the root cause of that problem?

The report action row is wrapped in PressableWithSecondaryInteraction with accessibilityRole={button}. In BaseGenericPressable, button-role pressables always apply styles.userSelectNone, which includes WebkitUserSelect: 'none'.

App/src/pages/inbox/report/PureReportActionItem.tsx

Lines 2033 to 2053 in 1d43910

	<PressableWithSecondaryInteraction
	ref={popoverAnchorRef}
	onPress={() => {
	if (draftMessage === undefined) {
	onPress?.();
	}
	if (!Keyboard.isVisible()) {
	return;
	}
	Keyboard.dismiss();
	}}
	style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
	onPressIn={() => shouldUseNarrowLayout && canUseTouchScreen() && ControlSelection.block()}
	onPressOut={() => ControlSelection.unblock()}
	onSecondaryInteraction={showPopover}
	preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
	withoutFocusOnSecondaryInteraction
	accessibilityLabel={accessibilityLabel}
	accessibilityHint={translate('accessibilityHints.chatMessage')}
	accessibilityRole={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.REPORT.PURE_REPORT_ACTION_ITEM}

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

Lines 51 to 52 in 1d43910

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

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

Lines 194 to 196 in 1d43910

	isDisabled && [StyleUtils.parseStyleFromFunction(disabledStyle, state), styles.noSelect],
	isRoleButton && styles.userSelectNone,
	]}

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

Lines 8 to 10 in 1d43910

	userSelectNone: {
	userSelect: 'none',
	WebkitUserSelect: 'none',

The error message is rendered as descendant text in DotIndicatorMessage, so Safari inherits the ancestor -webkit-user-select: none behavior for that content, which blocks drag selection.

App/src/components/DotIndicatorMessage.tsx

Lines 102 to 110 in 1d43910

	<Text
	// eslint-disable-next-line react/no-array-index-key
	key={index}
	style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
	accessibilityRole={isErrorMessage ? CONST.ROLE.ALERT : undefined}
	accessibilityLiveRegion={isErrorMessage ? 'assertive' : undefined}
	>
	{formattedMessage}
	</Text>

I could not decode the attached MP4 in this unattended environment, so I am not claiming frame-by-frame visual verification.

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

1. Keep the action row pressable behavior intact, but render the error message row outside the button-role pressable wrapper so it is no longer under userSelectNone.
2. Alternatively (if we want a smaller structural change), allow BaseGenericPressable to skip userSelectNone for this specific report-action case via an explicit prop, and enable text selection only for the error text subtree.
3. Verify Safari selection for error text with “Simulate failing network requests” enabled, and confirm no regression to context-menu/press interactions on the action row.

What alternative solutions did you explore? (Optional)

I considered changing selection heuristics in DotIndicatorMessage (for example, device capability checks), but the current code path here is dominated by the ancestor button-role userSelectNone, so fixing the container behavior is more direct and less brittle.

[marufsharifi]

🚨 Edited by proposal-police: This proposal was edited at 2026-04-20 07:56:44 UTC.

Proposal

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

On Safari, users cannot select the inline error text shown under a failed chat action. That error text should be selectable with drag, double-click, and triple-click so it can be copied.

What is the root cause of that problem?

The error row is rendered inside the same button-like wrapper as the chat message row.

PureReportActionItem.tsx renders the full report action inside PressableWithSecondaryInteraction with accessibilityRole={CONST.ROLE.BUTTON}, and it passes the action errors into OfflineWithFeedback from inside that same pressable subtree.

App/src/pages/inbox/report/PureReportActionItem.tsx

Lines 2100 to 2170 in 01644db

	return (
	<View>
	{shouldShowCreatedAction && createdActionContent}
	<PressableWithSecondaryInteraction
	ref={popoverAnchorRef}
	onPress={() => {
	if (draftMessage === undefined) {
	onPress?.();
	}
	if (!Keyboard.isVisible()) {
	return;
	}
	Keyboard.dismiss();
	}}
	style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
	onPressIn={() => shouldUseNarrowLayout && canUseTouchScreen() && ControlSelection.block()}
	onPressOut={() => ControlSelection.unblock()}
	onSecondaryInteraction={showPopover}
	preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
	withoutFocusOnSecondaryInteraction
	accessibilityLabel={accessibilityLabel}
	accessibilityHint={translate('accessibilityHints.chatMessage')}
	accessibilityRole={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.REPORT.PURE_REPORT_ACTION_ITEM}
	>
	<Hoverable
	shouldHandleScroll
	isDisabled={draftMessage !== undefined}
	shouldFreezeCapture={isPaymentMethodPopoverActive}
	onHoverIn={() => {
	setIsReportActionActive(false);
	}}
	onHoverOut={() => {
	setIsReportActionActive(!!isReportActionLinked);
	}}
	>
	{(hovered) => (
	<View style={highlightedBackgroundColorIfNeeded}>
	{shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
	{shouldDisplayContextMenuValue && (
	<MiniReportActionContextMenu
	reportID={reportID}
	reportActionID={action.reportActionID}
	anchor={popoverAnchorRef}
	originalReportID={originalReportID}
	isArchivedRoom={isArchivedRoom}
	displayAsGroup={displayAsGroup}
	disabledActions={disabledActions}
	isVisible={hovered && draftMessage === undefined && !hasErrors}
	isThreadReportParentAction={isThreadReportParentAction}
	draftMessage={draftMessage}
	isChronosReport={isChronosReport}
	checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
	setIsEmojiPickerActive={setIsEmojiPickerActive}
	/>
	)}
	<View
	style={StyleUtils.getReportActionItemStyle(
	hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined || isPaymentMethodPopoverActive,
	draftMessage === undefined && !!onPress,
	)}
	>
	<OfflineWithFeedback
	onClose={onClose}
	dismissError={dismissError}
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	pendingAction={
	draftMessage !== undefined ? undefined : (action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined))
	}
	shouldHideOnDelete={!isDeletedParentAction}
	errors={(linkedTransactionRouteError ?? !isOnSearch) ? getLatestErrorMessageField(action as OnyxDataWithErrors) : {}}

OfflineWithFeedback.tsx then renders ErrorMessageRow as part of its own output, so the error text stays inside the button wrapper instead of being rendered outside it.

App/src/components/OfflineWithFeedback.tsx

Lines 141 to 168 in 01644db

	return (
	<View style={style}>
	{shouldShowErrorMessages && shouldDisplayErrorAbove && (
	<ErrorMessageRow
	errors={errors}
	errorRowStyles={errorRowStyles}
	onDismiss={onDismiss}
	errorRowTextStyles={errorRowTextStyles}
	dismissError={dismissError}
	/>
	)}
	{hasChildren && !hideChildren && (
	<View
	style={[needsOpacity ? styles.offlineFeedbackPending : styles.offlineFeedbackDefault, contentContainerStyle]}
	needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOpacity && needsOffscreenAlphaCompositing : undefined}
	>
	<CustomStylesForChildrenProvider style={needsStrikeThrough ? [styles.offlineFeedbackDeleted, styles.userSelectNone] : null}>{children}</CustomStylesForChildrenProvider>
	</View>
	)}
	{shouldShowErrorMessages && !shouldDisplayErrorAbove && (
	<ErrorMessageRow
	errors={errors}
	errorRowStyles={errorRowStyles}
	errorRowTextStyles={errorRowTextStyles}
	onDismiss={onDismiss}
	dismissError={dismissError}
	/>
	)}

On Safari, text inside that button subtree is not selectable because it is still a descendant of the non-selectable pressable container. So the bug is not in the error text itself; the bug is that the error row is mounted in the wrong part of the tree.

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

We should keep the existing message row structure intact, but stop OfflineWithFeedback from rendering its built-in error row inside the pressable subtree. Then we should render the same ErrorMessageRow as a sibling below PressableWithSecondaryInteraction.

This is different from the broader "move the error row outside the pressable" proposals because we do not need to move OfflineWithFeedback itself or restructure the full report-action layout. We can keep the existing wrapper hierarchy and only redirect the error-row render path.

The current report action code is here:

App/src/pages/inbox/report/PureReportActionItem.tsx

Lines 2100 to 2208 in 01644db

	return (
	<View>
	{shouldShowCreatedAction && createdActionContent}
	<PressableWithSecondaryInteraction
	ref={popoverAnchorRef}
	onPress={() => {
	if (draftMessage === undefined) {
	onPress?.();
	}
	if (!Keyboard.isVisible()) {
	return;
	}
	Keyboard.dismiss();
	}}
	style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
	onPressIn={() => shouldUseNarrowLayout && canUseTouchScreen() && ControlSelection.block()}
	onPressOut={() => ControlSelection.unblock()}
	onSecondaryInteraction={showPopover}
	preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
	withoutFocusOnSecondaryInteraction
	accessibilityLabel={accessibilityLabel}
	accessibilityHint={translate('accessibilityHints.chatMessage')}
	accessibilityRole={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.REPORT.PURE_REPORT_ACTION_ITEM}
	>
	<Hoverable
	shouldHandleScroll
	isDisabled={draftMessage !== undefined}
	shouldFreezeCapture={isPaymentMethodPopoverActive}
	onHoverIn={() => {
	setIsReportActionActive(false);
	}}
	onHoverOut={() => {
	setIsReportActionActive(!!isReportActionLinked);
	}}
	>
	{(hovered) => (
	<View style={highlightedBackgroundColorIfNeeded}>
	{shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
	{shouldDisplayContextMenuValue && (
	<MiniReportActionContextMenu
	reportID={reportID}
	reportActionID={action.reportActionID}
	anchor={popoverAnchorRef}
	originalReportID={originalReportID}
	isArchivedRoom={isArchivedRoom}
	displayAsGroup={displayAsGroup}
	disabledActions={disabledActions}
	isVisible={hovered && draftMessage === undefined && !hasErrors}
	isThreadReportParentAction={isThreadReportParentAction}
	draftMessage={draftMessage}
	isChronosReport={isChronosReport}
	checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
	setIsEmojiPickerActive={setIsEmojiPickerActive}
	/>
	)}
	<View
	style={StyleUtils.getReportActionItemStyle(
	hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined || isPaymentMethodPopoverActive,
	draftMessage === undefined && !!onPress,
	)}
	>
	<OfflineWithFeedback
	onClose={onClose}
	dismissError={dismissError}
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	pendingAction={
	draftMessage !== undefined ? undefined : (action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined))
	}
	shouldHideOnDelete={!isDeletedParentAction}
	errors={(linkedTransactionRouteError ?? !isOnSearch) ? getLatestErrorMessageField(action as OnyxDataWithErrors) : {}}
	errorRowStyles={[styles.ml10, styles.mr2]}
	needsOffscreenAlphaCompositing={isMoneyRequestAction(action)}
	shouldDisableStrikeThrough
	>
	{renderSearchHeader(
	<>
	{isWhisper && (
	<View style={[styles.flexRow, styles.pl5, styles.pt2, styles.pr3]}>
	<View style={[styles.pl6, styles.mr3]}>
	<Icon
	fill={theme.icon}
	src={expensifyIcons.Eye}
	small
	/>
	</View>
	<Text style={[styles.chatItemMessageHeaderTimestamp]}>
	{translate('reportActionContextMenu.onlyVisible')}
	&nbsp;
	</Text>
	<DisplayNames
	fullTitle={getWhisperDisplayNames(translate, formatPhoneNumber, whisperedTo) ?? ''}
	displayNamesWithTooltips={displayNamesWithTooltips}
	tooltipEnabled
	numberOfLines={1}
	textStyles={[styles.chatItemMessageHeaderTimestamp, styles.flex1]}
	shouldUseFullTitle={isWhisperOnlyVisibleByUser}
	/>
	</View>
	)}
	{renderReportActionItem(!!hovered || !!isReportActionLinked, isWhisper, hasErrors)}
	</>,
	)}
	</OfflineWithFeedback>
	</View>
	</View>
	)}
	</Hoverable>
	<View style={styles.reportActionSystemMessageContainer}>

We should replace it with the following targeted changes in PureReportActionItem.tsx.

diff --git a/src/pages/inbox/report/PureReportActionItem.tsx b/src/pages/inbox/report/PureReportActionItem.tsx
@@
 import Button from '@components/Button';
 import DisplayNames from '@components/DisplayNames';
+import ErrorMessageRow from '@components/ErrorMessageRow';
 import Hoverable from '@components/Hoverable';
@@
     const formattedTimestamp = datetimeToCalendarTime(action.created, false);
     const plainMessage = getReportActionText(action);
     const accessibilityLabel = `${displayName}, ${formattedTimestamp}, ${plainMessage}`;
+    const reportActionErrors = (linkedTransactionRouteError ?? !isOnSearch) ? getLatestErrorMessageField(action as OnyxDataWithErrors) : {};
@@
-                                    errors={(linkedTransactionRouteError ?? !isOnSearch) ? getLatestErrorMessageField(action as OnyxDataWithErrors) : {}}
+                                    errors={reportActionErrors}
+                                    shouldShowErrorMessages={false}
                                     errorRowStyles={[styles.ml10, styles.mr2]}
                                     needsOffscreenAlphaCompositing={isMoneyRequestAction(action)}
                                     shouldDisableStrikeThrough
@@
             </PressableWithSecondaryInteraction>
+            <ErrorMessageRow
+                errors={reportActionErrors}
+                errorRowStyles={[styles.ml10, styles.mr2]}
+                onDismiss={onClose}
+                dismissError={dismissError}
+            />
         </View>
     );
 }

What this change does:

• reportActionErrors computes the error object once and reuses it.
• shouldShowErrorMessages={false} prevents OfflineWithFeedback from rendering the error row inside the pressable subtree.
• The sibling ErrorMessageRow reuses the same errors, styling, and dismiss callbacks, but renders outside the button wrapper, which makes the text selectable in Safari.

This is the smallest working structural fix because it only changes where the existing error row is rendered. It does not change shared pressable behavior, accessibility roles, or the main report-action content tree.

Video demo of the fix:

error-select-fix.mov

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

None

What alternative solutions did you explore? (Optional)

Alternative:

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

We should keep the existing render structure and button semantics, and use the existing errorRowTextStyles path to apply a Safari-only text-selection override to this exact error row.

OfflineWithFeedback.tsx already accepts errorRowTextStyles and passes it through ErrorMessageRow -> MessagesRow -> DotIndicatorMessage, so we do not need to move the DOM or change shared pressable behavior.

App/src/components/OfflineWithFeedback.tsx

Lines 50 to 54 in 9317075

	/** Additional style object for the error row */
	errorRowStyles?: StyleProp<ViewStyle>;
	/** Additional style object for the error row text */
	errorRowTextStyles?: StyleProp<TextStyle>;

App/src/components/OfflineWithFeedback.tsx

Lines 160 to 167 in 9317075

	{shouldShowErrorMessages && !shouldDisplayErrorAbove && (
	<ErrorMessageRow
	errors={errors}
	errorRowStyles={errorRowStyles}
	errorRowTextStyles={errorRowTextStyles}
	onDismiss={onDismiss}
	dismissError={dismissError}
	/>

App/src/components/ErrorMessageRow.tsx

Lines 33 to 41 in 9317075

	return hasErrorMessages ? (
	<MessagesRow
	messages={errorMessages}
	type="error"
	onDismiss={onDismiss}
	containerStyles={errorRowStyles}
	errorTextStyles={errorRowTextStyles}
	dismissError={dismissError}
	/>

App/src/components/MessagesRow.tsx

Lines 51 to 59 in 9317075

	return (
	<View style={[styles.flexRow, styles.alignItemsCenter, containerStyles]}>
	<DotIndicatorMessage
	dismissError={dismissError}
	style={styles.flex1}
	textStyles={errorTextStyles}
	messages={messages}
	type={type}
	/>

The current report-action code is here:

App/src/pages/inbox/report/PureReportActionItem.tsx

Lines 1685 to 1697 in 9317075

	<OfflineWithFeedback
	onClose={onClose}
	dismissError={dismissError}
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	pendingAction={
	draftMessage !== undefined ? undefined : (action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined))
	}
	shouldHideOnDelete={!isDeletedParentAction}
	errors={(linkedTransactionRouteError ?? !isOnSearch) ? getLatestErrorMessageField(action as OnyxDataWithErrors) : {}}
	errorRowStyles={[styles.ml10, styles.mr2]}
	needsOffscreenAlphaCompositing={isMoneyRequestAction(action)}
	shouldDisableStrikeThrough
	>

We should make these minimal changes:

diff --git a/src/styles/utils/userSelect/types.ts b/src/styles/utils/userSelect/types.ts
@@
-type UserSelectStyles = Record<'userSelectText' | 'userSelectNone', Pick<TextStyle, 'userSelect' | 'WebkitUserSelect'>>;
+type UserSelectStyles = Record<'userSelectText' | 'userSelectNone' | 'userSelectAll', Pick<TextStyle, 'userSelect' | 'WebkitUserSelect'>>;

This adds a dedicated style token for the Safari workaround.

diff --git a/src/styles/utils/userSelect/index.ts b/src/styles/utils/userSelect/index.ts
@@
     userSelectText: {
         userSelect: 'text',
         WebkitUserSelect: 'text',
     },
+    userSelectAll: {
+        userSelect: 'text',
+        WebkitUserSelect: 'all',
+    },
     userSelectNone: {
         userSelect: 'none',
         WebkitUserSelect: 'none',
     },

This keeps normal behavior unchanged and adds the Safari-specific WebkitUserSelect: 'all' override in one place.

diff --git a/src/pages/inbox/report/PureReportActionItem.tsx b/src/pages/inbox/report/PureReportActionItem.tsx
@@
+import {isSafari} from '@libs/Browser';
@@
+    const safariErrorRowTextStyles = isSafari() ? styles.userSelectAll : undefined;
@@
                                     errors={(linkedTransactionRouteError ?? !isOnSearch) ? getLatestErrorMessageField(action as OnyxDataWithErrors) : {}}
+                                    errorRowTextStyles={safariErrorRowTextStyles}
                                     errorRowStyles={[styles.ml10, styles.mr2]}

This scopes the workaround to the exact failing row on Safari only. It is stronger than the other approaches here because:

• it does not move the error row outside the button context
• it does not change the role
• it does not touch shared pressable behavior
• it uses an existing styling hook that is already threaded through this render path

[github-actions]

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