fix: selecting/copying chat messages does not work properly by NJ-2020 · Pull Request #85306 · Expensify/App

NJ-2020 · 2026-03-15T11:44:49Z

Explanation of Change

Fix accessibilityRole for PureReportActionItem by passing undefined for web only

Fixed Issues

$ #37447 (comment)
PROPOSAL: #37447 (comment)

Tests

Verify both Chrome & Safari

Open any chat conversation (workspace, group or 1:1 DM)
Select the chat messages (or send a new one if you haven't)
Verify that: The selection is working properly
Copy the selected messages
Verify that: It returns the selected messages output

Verify that no errors appear in the JS console

Offline tests

Same as tests

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

21.mp4

Android: mWeb Chrome

22.mp4

iOS: Native

Screen.Recording.2026-04-21.at.14.09.59.mov

iOS: mWeb Safari

Screen.Recording.2026-04-21.at.14.19.26.mov

MacOS: Chrome / Safari

Screen.Recording.2026-04-21.at.11.09.31.mov

codecov · 2026-03-15T12:12:14Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/pages/inbox/report/PureReportActionItem.tsx	`78.02% <100.00%> (+0.04%)`	⬆️
... and 7 files with indirect coverage changes

melvin-bot · 2026-03-16T17:18:11Z

@eh2077 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

joekaufmanexpensify

Good for product

eh2077 · 2026-03-18T12:42:51Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

iOS: mWeb Safari

MacOS: Chrome / Safari

github-actions · 2026-03-18T18:43:29Z

⚠️ This PR is possibly changing native code and/or updating libraries, it may cause problems with HybridApp. Please check if any patch updates are required in the HybridApp repo and run an AdHoc build to verify that HybridApp will not break. Ask Contributor Plus for help if you are not sure how to handle this. ⚠️

NJ-2020 · 2026-04-28T03:46:49Z

Kindly bump @eh2077 for review. Thanks

eh2077 · 2026-04-28T12:34:32Z

thanks for the bump! Reviewing

eh2077 · 2026-04-28T12:49:37Z

Screen.Recording.2026-04-28.at.8.46.09.PM.mov

@NJ-2020 It doesn't work well

copy message is reverse order
can't select first and last message

NJ-2020 · 2026-04-29T04:21:38Z

@eh2077 As mentioned here, the current chat FlatList is already migrated to FlashList and here's open PR to fix the FlashList DOM rendering bug items. Thus, I can't apply the patch fix since it's already been migrated to FlashList, so for this PR we only the accessibilityRole bug selection. Thanks

eh2077 · 2026-04-29T04:37:33Z

Oh I see, thanks! Then I think we should hold for the other PR.

sharabai · 2026-04-30T16:09:19Z

@NJ-2020 The FlashList DOM order patch in question is specifically aimed at accessibility issues with tab navigation and screen readers.

I'm not sure it will help here, at least not by itself. My fix works by sorting immediately in case of navigation by tabbing (it catches focusIn events), so as a workaround here you could call useSyncFocus() hook on the last element of your select to force the list to do the immediate sort of it's items.

It works in a pretty hacky way. The DOM sorting is not run immediately, but delayed with setTimeouts (it's necessary because of stale hover issues otherwise).

NJ-2020 · 2026-05-04T07:41:06Z

@sharabai Thank you for informing us, I'll try to look into it soon.

NJ-2020 · 2026-05-20T07:33:35Z

Sorry for the delay

Regarding the FlashList package, we have some solutions to fix it:

Use similar solution to legend-list using useDOMOrder which will re-order the list in the DOM tree based on the index item not key

Pros: Fast
Cons: Doesn't work while scrolling

Sort the rendered items based on the item index

Pros: Work even while scrolling
Cons: It seems the owner has already tried to use this solution, but they commented it out, maybe of performance issue

Instead of updating/recycling the old item, remove the old item -> add new item at the correct position

Pros: Fast
Cons: Patch-fix only - upstream fix not sure will get merged or not, since it's updating the component logic pattern

sharabai · 2026-05-20T11:08:08Z

Pros: Work even while scrolling
Cons: It seems the owner has already tried to use this solution, but they commented it out, maybe of performance issue

@NJ-2020 hi, the FlashList patch I'm working on does exactly that.
The problem with such sorting is that it causes some visual bugs.

If you want to know if my patch is going to work for your needs, the simplest way - copy the patch file to the shopify/flash-list patch folder, run rm -rf node_modules

My approach to the visual bug problem was to limit the sorting - only do it when necessary.
The patch got merged recently. But there was a deploy blocker, so it got reverted. I'm currently working on the fix - I'll have a new PR open soon.

NJ-2020 · 2026-05-23T07:54:36Z

Oh, thank you, hopefully your next PR/patch will also resolve this issue - in the meanwhile I'll try also to look for another solution.

eh2077 · 2026-06-23T01:28:09Z

@NJ-2020 Let's update to move it forward, thx!

sharabai · 2026-06-23T11:10:30Z

@NJ-2020
Hey, friendly update from me.
The patch to sort FlashList elements was merged some time ago.
I don't think it'll help your case though.

The short summary: my patch was aimed to solve accessibility issues and it does that, but it would not help in your case. I went with the least amount of changing the behavior of the FlashList, which in turn seems to not be enough for your needs. Although, imo, if we're alright with not having any visible hover in chats, you could go with the second approach. Or, like you'd said, you'd need to diverge heavily from the current FlashList architecture (3. Instead of updating/recycling the old item, remove the old item), which would work, but it'd heavily impact the performance.

The longer version:

The reason why my patch likely won't help your case is that it works similarly to this:

Use similar solution to legend-list using useDOMOrder which will re-order the list in the DOM tree based on the index item not key
Pros: Fast
Cons: Doesn't work while scrolling

with a caveat that it does behave like this when it detects focus events:

Sort the rendered items based on the item index
Pros: Work even while scrolling
Cons: It seems the owner has already tried to use this solution, but they commented it out, maybe of performance issue

Your second proposed approach (2. Sort the rendered items) would have the bugs that I mentioned.

@NJ-2020 hi, the FlashList patch I'm working on does exactly that.
The problem with such sorting is that ithttps://github.com//pull/85825#issuecomment-4092221473

Oh, thank you, hopefully your next PR/patch will also resolve this issue - in the meanwhile I'll try also to look for another solution.

The issues I mentioned (stale hover) seem to be not resolvable without some drastic change in architecture of the FlashList itself.
But the only issue I encountered with the second approach (2. Sort the rendered items) were the stale hover issue.
So if you're OK with having no hover in chats, the instant sorting would work there.

Alternatively, you third outlined approach, "3. Instead of updating/recycling the old item, remove the old item", would work but would also tank the performance of the FlashList.

NJ-2020 · 2026-06-24T07:29:18Z

@NJ-2020 Let's update to move it forward, thx!

Okay

@NJ-2020
Hey, friendly update from me.
The patch to sort FlashList elements was merged some time ago.
...

Thanks for the info.

NJ-2020 · 2026-06-29T07:44:43Z

I will try with another approach if possible and let you know soon - in the meantime, @eh2077 Do you have any thoughts regarding this?. Thanks

NJ-2020 · 2026-07-05T07:42:13Z

Hi − the bug is no longer reproducible for me:

Brave

Screen.Recording.2026-07-05.at.13.57.58.mov

One thing I notice on Brave is where we need to explicitly select the message text when selecting multiple messages, else it wont' work.

Safari

Screen.Recording.2026-07-05.at.13.57.25.mov

cc: @eh2077

Thanks.

NJ-2020 · 2026-07-11T01:24:23Z

Bump @eh2077

Julesssss · 2026-07-14T16:38:59Z

Hmm QA is still able to reproduce, but to confirm were you testing prod env on your branch? Or real prod

NJ-2020 · 2026-07-15T01:56:28Z

Yes, as you can see from this video, the QA is able to select multiple messages when starting from text properly, not the container/div

But if you select like from the message row/similar, it won't work

One thing I notice on Brave is where we need to explicitly select the message text when selecting multiple messages, else it wont' work. - #85306 (comment)

cc: @Julesssss

NJ-2020 · 2026-07-23T00:54:15Z

Bump @eh2077

eh2077 · 2026-07-27T14:16:22Z

@NJ-2020

Yes, as you can see from this video, the QA is able to select multiple messages when starting from text properly, not the container/div

But if you select like from the message row/similar, it won't work

One thing I notice on Brave is where we need to explicitly select the message text when selecting multiple messages, else it wont' work. - #85306 (comment)

Hmm, it seems bad UX to select multiple messages in this strict way. We still can't copy messages properly.

Screen.Recording.2026-07-27.at.10.06.37.PM.mov

eh2077 · 2026-08-04T13:33:55Z

I will try with another approach if possible and let you know soon - in the meantime, @eh2077 Do you have any thoughts regarding this?. Thanks

@NJ-2020 any new finding about the solution? The instant sorting method looks promising (without performance issue) but it seems not good to sacrifice hover feature of charts.

eh2077 · 2026-08-11T13:17:29Z

@NJ-2020 gentle bump

eh2077 · 2026-08-21T12:45:49Z

@NJ-2020 bump!

NJ-2020 · 2026-08-26T09:10:04Z

Apologies for the delay

For that bug, we need to update this condition to disable the role button if it's web, i.e not limited to safari-only

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

Line 549 in 9e84742

    
           accessibilityRole={isSafari() && hasHoverSupport() ? undefined : CONST.ROLE.BUTTON}

accessibilityRole={Platform.OS === CONST.PLATFORM.WEB && hasHoverSupport() ? undefined : CONST.ROLE.BUTTON}

I'll try to post more update soon. Sorry for the inconvenience.

eh2077 · 2026-09-14T12:21:24Z

hey @NJ-2020, any updates?

fix content alignment & improvemance

6b2ebd6

melvin-bot Bot assigned NJ-2020 Mar 15, 2026

fix check error

881bd22

NJ-2020 and others added 4 commits March 16, 2026 04:53

fix: native bug & improvemance

495d176

fix

bb06be6

fix: prettier

aaf5bcc

Merge branch 'Expensify:main' into fix/regression-37447-1

e6e8657

NJ-2020 marked this pull request as ready for review March 16, 2026 17:18

NJ-2020 requested review from a team as code owners March 16, 2026 17:18

melvin-bot Bot requested review from eh2077 and joekaufmanexpensify March 16, 2026 17:18

melvin-bot Bot removed request for a team March 16, 2026 17:18

NJ-2020 mentioned this pull request Mar 16, 2026

[$750] Selecting and copy / pasting multiple messages doesn't work as expected #37447

Open

2 of 6 tasks

github-actions Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/components/FlatList/InvertedFlatList/index.tsx Outdated

github-actions Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/pages/inbox/report/PureReportActionItem.tsx Outdated

github-actions Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/pages/inbox/report/ReportActionsList.tsx Outdated

NJ-2020 added 3 commits March 17, 2026 01:19

fix: platform consistency

0628684

fix prettier

c1acd81

fix: eslint

573213a

joekaufmanexpensify previously approved these changes Mar 16, 2026

View reviewed changes

Merge branch 'main' into fix/regression-37447-1

3305b14

NJ-2020 dismissed joekaufmanexpensify’s stale review via 3305b14 March 18, 2026 18:38

re-implement Expensify#82507

b7316a8

fix crash bug

3bc0fc3

NJ-2020 and others added 3 commits April 21, 2026 10:17

Merge branch 'main' into fix/regression-37447-1

548a942

revert some changes

a36860b

revert unnecessary changes

cdeffb5

NJ-2020 changed the title ~~fix: selecting multiple messages doesn't work as expected (V2)~~ fix: selecting/copying chat messages does not work properly Apr 21, 2026

Merge branch 'main' into fix/regression-37447-1

58bad83

Conversation

NJ-2020 commented Mar 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Mar 15, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented Mar 16, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joekaufmanexpensify left a comment

Choose a reason for hiding this comment

Uh oh!

eh2077 commented Mar 18, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

github-actions Bot commented Mar 18, 2026

Uh oh!

NJ-2020 commented Apr 28, 2026

Uh oh!

eh2077 commented Apr 28, 2026

Uh oh!

eh2077 commented Apr 28, 2026

Uh oh!

NJ-2020 commented Apr 29, 2026

Uh oh!

eh2077 commented Apr 29, 2026

Uh oh!

sharabai commented Apr 30, 2026

Uh oh!

NJ-2020 commented May 4, 2026

Uh oh!

NJ-2020 commented May 20, 2026

Uh oh!

sharabai commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NJ-2020 commented May 23, 2026

Uh oh!

eh2077 commented Jun 23, 2026

Uh oh!

sharabai commented Jun 23, 2026

Uh oh!

NJ-2020 commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NJ-2020 commented Jun 29, 2026

Uh oh!

NJ-2020 commented Jul 5, 2026

Uh oh!

NJ-2020 commented Jul 11, 2026

Uh oh!

Julesssss commented Jul 14, 2026

Uh oh!

NJ-2020 commented Jul 15, 2026

Uh oh!

NJ-2020 commented Jul 23, 2026

Uh oh!

eh2077 commented Jul 27, 2026

Uh oh!

eh2077 commented Aug 4, 2026

Uh oh!

eh2077 commented Aug 11, 2026

Uh oh!

eh2077 commented Aug 21, 2026

Uh oh!

NJ-2020 commented Aug 26, 2026

Uh oh!

eh2077 commented Sep 14, 2026

NJ-2020 commented Mar 15, 2026 •

edited

Loading

codecov Bot commented Mar 15, 2026 •

edited by github-actions Bot

Loading

sharabai commented May 20, 2026 •

edited

Loading

NJ-2020 commented Jun 24, 2026 •

edited

Loading