[Due for payment 2025-10-15] [$250] Chat - Composer not focused and clipboard content not pasted on CMD+V

[lanitochka17]

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: 9.2.3-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: https://test-management.browserstack.com/projects/2219752/folder/13176681/test-cases/41237002
Email or phone of affected tester (no customers): applausetester+omqq1@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: user signed in

1. Open app
2. Navigated to any chat from LHN
3. Copy to clipboard any message from the chat
4. Click on header to open chat details
5. Click outside of RHP to close chat details page
6. Deselect the composer by left-clicking on a chat message or in an empty area
7. Press CMD+V (or CTRL+V if you're on windows)

Expected Result:

When pressing CMD+V or CTRL+V, the clipboard content should be pasted into the composer regardless of focus

Actual Result:

Pressing CMD+V or CTRL+V does not paste clipboard content because the composer is not focused

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6939911_1757440979636.Screen_Recording_2025-09-09_at_20.53.29.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021970225393098707633
• Upwork Job ID: 1970225393098707633
• Last Price Increase: 2025-09-22

Issue Owner

Current Issue Owner: @c3024

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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.

[dmkt9]

Proposal

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

Pressing CMD+V or CTRL+V does not paste clipboard content because the composer is not focused

What is the root cause of that problem?

Since the handlePaste function changes but document.addEventListener('paste', handlePaste, true) is not reset—because handlePaste is not included in the dependency array of useEffect

App/src/hooks/useHtmlPaste/index.ts

Lines 167 to 177 in 9c2929e

	useEffect(() => {
	if (!isActive) {
	return;
	}
	document.addEventListener('paste', handlePaste, true);
	return () => {
	document.removeEventListener('paste', handlePaste, true);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isActive]);

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

We need to add handlePaste to the dependency array of useEffect.
If we want to avoid remounting the event listener multiple times, we can replace handlePaste with a ref and pass that to addEventListener.

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

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

2025-09-10.22-49-51.mp4

[bernhardoj]

We had the same root cause a long time ago, which I previously addressed in my proposal here.

Proposal

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

Composer is not focused when pasting after opening and closing a RHP.

What is the root cause of that problem?

We have a logic to handle the paste and focus on the text input.

App/src/components/Composer/implementation/index.tsx

Lines 137 to 155 in 8dc1074

	const isVisible = checkComposerVisibility();
	const isFocused = textInput.current?.isFocused();
	const isContenteditableDivFocused = document.activeElement?.nodeName === 'DIV' && document.activeElement?.hasAttribute('contenteditable');
	if (!(isVisible || isFocused)) {
	return true;
	}
	if (textInput.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) {
	const eventTarget = event.target as HTMLInputElement | HTMLTextAreaElement | null;
	// To make sure the composer does not capture paste events from other inputs, we check where the event originated
	// If it did originate in another input, we return early to prevent the composer from handling the paste
	const isTargetInput = eventTarget?.nodeName === CONST.ELEMENT_NAME.INPUT || eventTarget?.nodeName === CONST.ELEMENT_NAME.TEXTAREA || eventTarget?.contentEditable === 'true';
	if (isTargetInput || (!isFocused && isContenteditableDivFocused && event.clipboardData?.files.length)) {
	return true;
	}
	textInput.current?.focus();
	}

However, after opening and closing an RHP, checkComposerVisibility returns false.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 582 to 586 in 8dc1074

	const checkComposerVisibility = useCallback(() => {
	// Checking whether the screen is focused or not, helps avoid `modal.isVisible` false when popups are closed, even if the modal is opened.
	const isComposerCoveredUp = !isFocused || isEmojiPickerVisible() || isMenuVisible || !!modal?.isVisible || modal?.willAlertModalBecomeVisible;
	return !isComposerCoveredUp;
	}, [isMenuVisible, modal, isFocused]);

The root cause of that is that the paste listener when handlePaste deps changes.

App/src/components/Composer/implementation/index.tsx

Line 264 in 8dc1074

useHtmlPaste(textInput, handlePaste, isActive);

App/src/hooks/useHtmlPaste/index.ts

Lines 167 to 177 in 8dc1074

	useEffect(() => {
	if (!isActive) {
	return;
	}
	document.addEventListener('paste', handlePaste, true);
	return () => {
	document.removeEventListener('paste', handlePaste, true);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isActive]);

App/src/hooks/useHtmlPaste/index.ts

Lines 117 to 165 in 8dc1074

	const handlePaste = useCallback(
	(event: ClipboardEvent) => {
	if (!textInputRef.current) {
	return;
	}
	if (preHtmlPasteCallback?.(event)) {
	return;
	}
	const isFocused = textInputRef.current?.isFocused();
	if (!isFocused) {
	return;
	}
	event.preventDefault();
	const TEXT_HTML = 'text/html';
	// If paste contains HTML
	if (event.clipboardData?.types?.includes(TEXT_HTML)) {
	const pastedHTML = event.clipboardData.getData(TEXT_HTML);
	const domparser = new DOMParser();
	const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;
	// Exclude parsing img tags in the HTML, as fetching the image via fetch triggers a connect-src Content-Security-Policy error.
	if (embeddedImages.length > 0 && embeddedImages[0].src) {
	// If HTML has emoji, then treat this as plain text.
	if (embeddedImages[0].dataset && embeddedImages[0].dataset.stringifyType === 'emoji') {
	handlePastePlainText(event);
	return;
	}
	}
	// If HTML starts with <p dir="ltr">, it means that the text was copied from the markdown input from the native app
	// and was saved to clipboard with additional styling, so we need to treat this as plain text to avoid adding unnecessary characters.
	if (pastedHTML.startsWith('<p dir="ltr">')) {
	handlePastePlainText(event);
	return;
	}
	handlePastedHTML(pastedHTML);
	return;
	}
	handlePastePlainText(event);
	},
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	[handlePastedHTML, handlePastePlainText, preHtmlPasteCallback],
	);

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

We need to add handlePaste to the deps.

App/src/hooks/useHtmlPaste/index.ts

Lines 167 to 177 in 8dc1074

	useEffect(() => {
	if (!isActive) {
	return;
	}
	document.addEventListener('paste', handlePaste, true);
	return () => {
	document.removeEventListener('paste', handlePaste, true);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isActive]);

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

N/A

[melvin-bot]

@mallenexpensify Huh... This is 4 days overdue. Who can take care of this?

[mallenexpensify]

Unable to reproduce on desktop and Chrome/mac on Version 9.2.15-0
@bernhardoj and @dmkt9 , are you able to on the latest version?

Making weekly for now

[bernhardoj]

I'm still able to reproduce it.

w.mp4

[dmkt9]

@mallenexpensify I'm also able to reproduce this issue.