[AU] Chat - Only a single word is copied when using "Copy to clipboard" on a sentence

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.72-0 Reproducible in staging?: Yes Reproducible in production?: Yes If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5312619 Issue reported by: Applause Internal Team

Action Performed:

Precondition: Log out

1. Navigate to https://staging.new.expensify.com/r/2091104345528462
2. Hover over a sentence with multiple words
3. Right click on a word
4. Click on "Copy to clipboard"
5. Paste is somewhere

Expected Result:

The full sentence should be copied.

Actual Result:

Only a single word is copied when using "Copy to clipboard" on a sentence.

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/24fd759e-7289-4fc6-81f3-0dcb3ca36d63

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @CortneyOfstad (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[QichenZhu]

Edited by proposal-police: This proposal was edited at 2023-11-01T12:00:00Z.

Proposal

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

In Safari, Copy to clipboard copies only one word instead of the whole message.

What is the root cause of that problem?

The app checks if the selection is empty. If so, it copies the entire message. Otherwise, it copies only the selected text.

https://github.com/Expensify/App/blob/9d418f5dfb471859677df5d364abc9e72daec1c4/src/pages/home/report/ContextMenu/ContextMenuActions.tsx#L386

However, the word under the cursor is automatically selected after right-clicking in Safari and Chrome on MacOS.

In Safari, the timing is: mousedown event -> word selection -> contextmenu event.

In Chrome, the timing is: mousedown event -> contextmenu event -> word selection.

The app accesses the selection in contextmenu event handler. In Safari, the word is already selected by the time the handler runs, but in Chrome, it’s not.

https://github.com/Expensify/App/blob/1db6abb66106b1a855321f907408357fbcc8f78c/src/components/PressableWithSecondaryInteraction/index.tsx#L86

More info: https://stackoverflow.com/a/71979616.

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

Call onSecondaryInteraction() in mousedown event handler instead of contextmenu event handler.

const executeSecondaryInteractionOnMouseDown = (event: MouseEvent) => {
    if (!onSecondaryInteraction || event.button !== 2) {
        return;
    }

    onSecondaryInteraction(event);

    if (withoutFocusOnSecondaryInteraction) {
        element.blur();
    }
};

const preventDefaultOnContextMenu = (event: MouseEvent) => {
    if (!onSecondaryInteraction) {
        return;
    }

    event.stopPropagation();
    if (preventDefaultContextMenu) {
        event.preventDefault();
    }
};

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

This is related to the behavior of a specifc browser, so automated tests are unlikely to help. Consider adding more manual testing effort on desktop Safari if it’s worth it.

What alternative solutions did you explore? (Optional)

[CortneyOfstad]

This is not a bug. If you click on a single word to copy, it's only going to copy that single word. If you want the entire sentence to be copied, you need to highlight the entire sentence and then copy.

This is working by design, so closing.

[QichenZhu]

@CortneyOfstad I think the problem is the mismatch between visual cues and the actual result. For example, in Slack and Discord, when right-clicking a word, it’s highlighted with a blue background, so the user expects the word to be copied.

In our app, however, right-clicking a word highlights the entire message with a grey background, so the user expects the entire message to be copied.

There's also inconsistency between platforms: in Safari, only the word is copied, while in Chrome and native apps, the entire message is copied.