[HOLD for payment 2023-09-06] [$1000] Pasting on Web isn't automatically focusing on composer

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open a chat in newDot Web/Desktop
2. Remove focus from composer
3. Copy some text into your clipboard (CMD+C/CTRL+C)
4. With the chat open and the composer unfocused, paste the text you have in your clipboard (CMD+V/CTRL+V)

Expected Result:

The composer should be focused and the text should be pasted into it.

Actual Result:

Nothing happens

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.55-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Recording.5943.mp4

Expensify/Expensify Issue URL:
Issue reported by: @PauloGasparSv
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691623314942259

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ed32306975a2bc2a
• Upwork Job ID: 1693708827153092608
• Last Price Increase: 2023-08-21
• Automatic offers:
• s77rt | Reviewer | 26293575
• joh42 | Contributor | 26293576

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[rayane-d]

Proposal

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

When a user tries to paste content into the chat composer without it being focused, the expected behavior is that the composer should automatically gain focus and the content should be pasted. However, currently, nothing happens.

What is the root cause of that problem?

There isn't any global event listener that listens for the paste event (CMD+V/CTRL+V) when the composer is unfocused. This means that when the composer is not in focus and the user tries to paste content, there's no mechanism in place to detect this action and subsequently focus the composer and paste the content.

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

To address this issue, we need to add a global event listener that listens for the paste event, focuses the composer when it's triggered, and pastes the content into the composer. Here's a step-by-step solution using React hooks:

• Use the useEffect hook to add a global event listener for the paste event.
• When the paste event is detected, check if the composer is focused.
• If the composer is not focused, set the focus to the composer.
• Paste the content into the composer.

Here's a code snippet that demonstrates the proposed changes in ReportActionCompose.js file:

useEffect(() => {
    const handlePaste = (e) => {
        // Check if the composer is focused
        if (textInputRef.current && !textInputRef.current.isFocused()) {
            // Focus the composer
            textInputRef.current.focus();

            // Allow some time for the focus event to complete before pasting the content
            setTimeout(() => {
                // Trigger a paste event on the composer
                if (textInputRef.current) {
                    textInputRef.current.value = e.clipboardData.getData('text');
                }
            }, 0);
        }
    };

    // Add global event listener for paste event
    document.addEventListener('paste', handlePaste);

    // Cleanup: Remove the global event listener when the component is unmounted
    return () => {
        document.removeEventListener('paste', handlePaste);
    };
}, []);

Result:

2023-08-20.19-49-34.mp4

What alternative solutions did you explore? (Optional)

[tienifr]

Proposal

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

Pasting on Web isn't automatically focusing on composer

What is the root cause of that problem?

we already have the logic to handle paste event, but we are preventing paste if the target is not textInput

In

App/src/components/Composer/index.js

Lines 275 to 277 in 03cf0b1

	if (textInput.current !== event.target) {
	return;
	}

That is not correct, because when the input is blurred, then users paste text, the event.target should not be the input. That why paste functionality does not work correctly

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

we can remove these lines

App/src/components/Composer/index.js

Lines 275 to 277 in 03cf0b1

	if (textInput.current !== event.target) {
	return;
	}

Then focus into the compose before executing insertText

Change

App/src/components/Composer/index.js

Lines 224 to 225 in 03cf0b1

	const paste = useCallback((text) => {
	try {

to

 const paste = useCallback((text) => {
        try {
            textInput.current.focus();
            document.execCommand('insertText', false, text);

Result

Screen.Recording.2023-08-21.at.14.59.14.mov

[getusha]

Proposal

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

Pasting text using Ctrl + v, will not focus the composer

What is the root cause of that problem?

Right now, we're handling key presses to make the composer focused and input the key. However, we're not yet managing the onKeyPress function to both focus the composer and input text when using the shortcut Ctrl + v/CMD + v.

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

We should focus the input if the key is KeyV with metaKey or ctrlKey pressed.
in here:

App/src/pages/home/report/ReportActionCompose.js

Lines 459 to 465 in 03cf0b1

	const focusComposerOnKeyPress = useCallback(
	(e) => {
	const isComposerVisible = checkComposerVisibility();
	if (!isComposerVisible) {
	return;
	}

\We'll include a check with a condition: e.metaKey && e.nativeEvent.code === 'KeyV'. This check will adapt based on the platform. For Windows, we'll account for e.ctrlKey being equivalent to the metaKey. Additionally, we need to avoid focusing on the main composer when editing a report action. To ensure this, we'll add !['INPUT', 'TEXTAREA'].includes(e.target.nodeName). additionally handle edge cases if any inside the condition.

        if(e.metaKey && e.nativeEvent.code === 'KeyV' && !['INPUT', 'TEXTAREA'].includes(e.target.nodeName)) {
            focus();
            return;
        }

Screen.Recording.2023-08-21.at.10.55.55.AM.mov

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Current assignee @NicMendonca is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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