[Due for payment 2025-11-17] [$250] Compose box loses focus when switching tabs, breaking keyboard shortcuts on return

[m-natarajan]

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.29-5
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
Expensify/Expensify Issue URL:
Issue reported by: @cead22
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Open a chat in NewDot
2. Type some text in the compose box
3. Switch to another browser tab
4. Switch back to the NewDot tab
5. Try pressing:
   CMD + A (select all text)
   CMD + LEFT or OPTION + LEFT (move cursor)

Expected Result:

Focus should return seamlessly to the compose box after switching tabs, Keyboard shortcuts should work immediately without needing to click in the box.

Actual Result:

Typing works automatically when returning, but the compose box isn’t truly focused, Keyboard shortcuts like CMD + A and cursor movement commands do not respond until the user manually clicks inside the compose box.

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

Recording.1754.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021977812992564239872
• Upwork Job ID: 1977812992564239872
• Last Price Increase: 2025-10-13

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[ShridharGoel]

Proposal

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

When a user switches away from the NewDot browser tab and then comes back, typing into the compose box works, but the browser focus never returns to the input. Because the textarea is not really focused, shortcuts such as ⌘A, ⌘←, or ⌥← fail until the user clicks inside the composer.

What is the root cause of that problem?

The composer only requests focus during explicit focus events or after certain modal transitions. We do not remember that the composer was focused before the window lost focus, and we do not respond to the browser’s window.focus event to restore it. The old handler simply invoked onFocus when React told us the input gained focus, and there was no path to re-focus the element when the window became active again

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

Lines 806 to 811 in 7a288bc

	onFocus={() => {
	// The last composer that had focus should re-gain focus
	setUpComposeFocusManager(true);
	onFocus();
	}}
	onBlur={onBlur}

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

Track whether the composer owned focus, subscribe to the app-focus hook, and restore focus when the tab becomes active so that keyboard shortcuts work immediately.

const textInputRef = useRef<TextInput | null>(null);
const wasComposerFocusedRef = useRef(false);

const handleComposerFocus = useCallback(() => {
    wasComposerFocusedRef.current = true;
    setUpComposeFocusManager(true);
    onFocus();
}, [onFocus, setUpComposeFocusManager]);

const handleComposerBlur = useCallback(
    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
        wasComposerFocusedRef.current = false;
        onBlur(event);
    },
    [onBlur],
);

const restoreFocusIfNeeded = useCallback(() => {
    if (!wasComposerFocusedRef.current || textInputRef.current?.isFocused() || !checkComposerVisibility()) {
        return;
    }
    focus();
}, [checkComposerVisibility, focus]);

useAppFocusEvent(restoreFocusIfNeeded);

<Composer
    ...
    onFocus={handleComposerFocus}
    onBlur={handleComposerBlur}
/>

This keeps typing seamless while also restoring the real DOM focus as soon as the window regains focus.

[bernhardoj]

Proposal

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

Composer loses focus after switching tab.

What is the root cause of that problem?

This is a problem with the live markdown component. This happens after this PR. In that PR, we want to save the focused text input as outlined in the proposal here, so that Keyboard.dismiss will work on live markdown. But since we can't directly access the text input state, we do it through RNTextInput.State.focusTextInput on focus and RNTextInput.State.blurTextInput on blur.

When we switch tabs, the input onBlur is triggered, so the input is blurred. In normal cases, the input doesn't lose focus even though onBlur is called when switching tabs.

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

We can update the onBlur code so that it only blurs when the input loses its focus.

if (event.target !== document.activeElement) {
  RNTextInput.State.blurTextInput?.(e.target);
}

[dmkt9]

Proposal

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

Typing works automatically when returning, but the compose box isn’t truly focused, Keyboard shortcuts like CMD + A and cursor movement commands do not respond until the user manually clicks inside the compose box.

What is the root cause of that problem?

When switching to another tab, the current composer (which is a div) will automatically lose focus, and it will not automatically regain focus when the tab is switched back.

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

• Use the visibilitychange event to listen for tab visibility changes and store the value in a visibilityState.
• Treat this visibilityState similarly to isModalVisible inside the useEffect to restore focus when the tab becomes visible again.

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

Lines 657 to 687 in 89c45c9

	useEffect(() => {
	const isModalVisible = modal?.isVisible;
	if (isModalVisible && !prevIsModalVisible) {
	// eslint-disable-next-line react-compiler/react-compiler, no-param-reassign
	isNextModalWillOpenRef.current = false;
	}
	// We want to blur the input immediately when a screen is out of focus.
	if (!isFocused) {
	textInputRef.current?.blur();
	return;
	}
	// Do not focus the composer if the Side Panel is visible
	if (!isSidePanelHiddenOrLargeScreen) {
	return;
	}
	// We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
	// We avoid doing this on native platforms since the software keyboard popping
	// open creates a jarring and broken UX.
	if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !isModalVisible && (!!prevIsModalVisible || !prevIsFocused))) {
	return;
	}
	if (editFocused) {
	inputFocusChange(false);
	return;
	}
	focus(true);
	}, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus, isSidePanelHiddenOrLargeScreen]);

[melvin-bot]

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

[melvin-bot]

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