[HOLD App #70912] Chat - Compose box is not focused after selecting emoji

[vincdargento]

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.24-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: N/A
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Android,mWeb
App Component: Chat Report View

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open any chat
3. Open an emoji selector and select one

Expected Result:

After selecting emoji the compose box should be focused to continue typing.

Actual Result:

Compose box is not focused after selecting emoji

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021975506434131212699
• Upwork Job ID: 1975506434131212699
• Last Price Increase: 2025-10-07

Issue Owner

Current Issue Owner: @MariaHCD

[melvin-bot]

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

[TaduJR]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-08 04:47:15 UTC.

Proposal

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

After selecting an emoji from the emoji picker, the compose box does not automatically regain focus. Users must manually tap the compose box to continue typing, which interrupts the chat flow.

Affected platforms:

• Android App
• iOS Safari

What is the root cause of that problem?

The emoji picker (PopoverWithMeasuredContent) is not properly integrated with the ComposerFocusManager system, which manages modal focus state using a Promise-based mechanism.

The flow should work like this:

1. Modal opens → resetReadyToFocus(modalId) creates a Promise
2. Modal closes → setReadyToFocus(modalId) resolves the Promise
3. focusComposerWithDelay waits for Promise.all([ComposerFocusManager.isReadyToFocus(), isWindowReadyToFocus()]) to resolve
4. After Promise resolves → 150ms setTimeout → focus happens

Root cause - Two issues discovered:

1. PopoverWithMeasuredContentBase.tsx (iOS Safari):

   • Missing resetReadyToFocus(modalId) call when modal opens
   • Missing setReadyToFocus(modalId) call when modal closes
   • Result: Promise never created/resolved → focus hangs forever

2. PopoverWithMeasuredContent/index.tsx (small screens - Android):

   • On small screens, the component returns a direct BOTTOM_DOCKED Modal, completely bypassing PopoverWithMeasuredContentBase
   • No modal focus management is set up at all
   • Result: Promise never created/resolved → focus hangs forever

Currently, when emoji picker opens, only saveFocusState is called:

App/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

Lines 70 to 75 in 1ff696b

	useEffect(() => {
	if (prevIsVisible || !isVisible || !shouldEnableNewFocusManagement) {
	return;
	}
	ComposerFocusManager.saveFocusState(modalId);
	}, [isVisible, shouldEnableNewFocusManagement, prevIsVisible, modalId]);

But resetReadyToFocus is never called, and there's no handler to call setReadyToFocus when the modal closes.

For small screens, the component bypasses PopoverWithMeasuredContentBase entirely:

App/src/components/PopoverWithMeasuredContent/index.tsx

Lines 16 to 25 in 1ff696b

	if (isSmallScreenWidth) {
	return (
	<Modal
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
	animationIn="slideInUp"
	animationOut="slideOutDown"
	/>
	);

Platform-specific timing issue:

On Android, React Native's Modal onDismiss callback is unreliable (documented workaround in codebase):

App/src/components/Modal/ReanimatedModal/index.tsx

Lines 153 to 158 in 1ff696b

	// Because on Android, the Modal's onDismiss callback does not work reliably. There's a reported issue at:
	// https://stackoverflow.com/questions/58937956/react-native-modal-ondismiss-not-invoked
	// Therefore, we manually call onModalHide() here for Android.
	if (getPlatform() === CONST.PLATFORM.ANDROID) {
	onModalHide();
	}

This is why we need to use onModalWillHide instead, which fires BEFORE onModalHide is triggered.

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

1. Fix PopoverWithMeasuredContentBase.tsx (large screens):

Add the missing Promise lifecycle management:

a) Add resetReadyToFocus call when modal opens:

In the existing useEffect at line 70, add the missing call:

App/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

Lines 70 to 75 in 1ff696b

	useEffect(() => {
	if (prevIsVisible || !isVisible || !shouldEnableNewFocusManagement) {
	return;
	}
	ComposerFocusManager.saveFocusState(modalId);
	}, [isVisible, shouldEnableNewFocusManagement, prevIsVisible, modalId]);

useEffect(() => {
    if (prevIsVisible || !isVisible || !shouldEnableNewFocusManagement) {
        return;
    }
    ComposerFocusManager.saveFocusState(modalId);
    ComposerFocusManager.resetReadyToFocus(modalId); // Add this line
}, [isVisible, shouldEnableNewFocusManagement, prevIsVisible, modalId]);

b) Add handlers to resolve Promise when modal closes:

Add two new handlers after the useEffect:

const handleDismissModal = useCallback(() => {
    // Call the original onDismiss if it exists
    if (props.onDismiss) {
        props.onDismiss();
    }
    if (!shouldEnableNewFocusManagement) {
        return;
    }
    ComposerFocusManager.setReadyToFocus(modalId);
}, [modalId, shouldEnableNewFocusManagement, props]);

const handleModalWillHide = useCallback(() => {
    // Call the original onModalWillHide if it exists
    if (props.onModalWillHide) {
        props.onModalWillHide();
    }
    // Call setReadyToFocus BEFORE onModalHide is triggered (critical for Android)
    if (!shouldEnableNewFocusManagement) {
        return;
    }
    ComposerFocusManager.setReadyToFocus(modalId);
}, [modalId, shouldEnableNewFocusManagement, props]);

c) Pass handlers to Popover component:

Update the Popover component props at line 187 to include the handlers:

App/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

Lines 187 to 207 in 1ff696b

	return isContentMeasured ? (
	<Popover
	shouldHandleNavigationBack={shouldHandleNavigationBack}
	popoverDimensions={{height: popoverHeight, width: popoverWidth}}
	anchorAlignment={anchorAlignment}
	isVisible={isVisible}
	withoutOverlay={withoutOverlay}
	fullscreen={fullscreen}
	shouldSetModalVisibility={shouldSetModalVisibility}
	statusBarTranslucent={statusBarTranslucent}
	navigationBarTranslucent={navigationBarTranslucent}
	avoidKeyboard={avoidKeyboard}
	hideModalContentWhileAnimating={hideModalContentWhileAnimating}
	modalId={modalId}
	shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	anchorPosition={shiftedAnchorPosition}
	>
	<View onLayout={measurePopover}>{(isVisible || prevIsVisible) && children}</View>
	</Popover>

Add these props AFTER the {...props} spread to override any existing handlers:

<Popover
    // ... existing props
    // eslint-disable-next-line react/jsx-props-no-spreading
    {...props}
    onModalWillHide={handleModalWillHide}
    onDismiss={handleDismissModal}
    anchorPosition={shiftedAnchorPosition}
>

d) Add useCallback import:

Update the imports at line 2:

App/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

Line 2 in 1ff696b

import React, {useContext, useEffect, useMemo, useState} from 'react';

import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';

2. Fix PopoverWithMeasuredContent/index.tsx (small screens):

Add modal focus management to the small screen path:

a) Extract shouldEnableNewFocusManagement from props and add imports:

Update line 13 and add imports:

App/src/components/PopoverWithMeasuredContent/index.tsx

Lines 1 to 13 in 1ff696b

	import {circularDeepEqual} from 'fast-equals';
	import React from 'react';
	import Modal from '@components/Modal';
	import useResponsiveLayout from '@hooks/useResponsiveLayout';
	import CONST from '@src/CONST';
	import PopoverWithMeasuredContentBase from './PopoverWithMeasuredContentBase';
	import type PopoverWithMeasuredContentProps from './types';
	/**
	* Logic for PopoverWithMeasuredContent is in PopoverWithMeasuredContentBase.
	* This component is a perf optimization, it return BOTTOM_DOCKED early, for small screens avoiding Popover measurement logic calculations.
	*/
	function PopoverWithMeasuredContent({...props}: PopoverWithMeasuredContentProps) {

import {circularDeepEqual} from 'fast-equals';
import React, {useCallback, useMemo} from 'react';
import Modal from '@components/Modal';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import ComposerFocusManager from '@libs/ComposerFocusManager';
import CONST from '@src/CONST';
import PopoverWithMeasuredContentBase from './PopoverWithMeasuredContentBase';
import type PopoverWithMeasuredContentProps from './types';

function PopoverWithMeasuredContent({shouldEnableNewFocusManagement, ...props}: PopoverWithMeasuredContentProps) {

b) Add modalId and handler:

Add these after the isSmallScreenWidth check at line 15:

App/src/components/PopoverWithMeasuredContent/index.tsx

Line 15 in 1ff696b

const {isSmallScreenWidth} = useResponsiveLayout();

const modalId = useMemo(() => ComposerFocusManager.getId(), []);

const handleModalWillHide = useCallback(() => {
    // Call the original onModalWillHide if it exists
    if (props.onModalWillHide) {
        props.onModalWillHide();
    }
    // Call setReadyToFocus BEFORE onModalHide is triggered (critical for Android)
    if (!shouldEnableNewFocusManagement) {
        return;
    }
    ComposerFocusManager.setReadyToFocus(modalId);
}, [modalId, shouldEnableNewFocusManagement, props]);

c) Update the Modal component:

Update the Modal component at line 17 to include the new props:

App/src/components/PopoverWithMeasuredContent/index.tsx

Lines 17 to 24 in 1ff696b

	return (
	<Modal
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
	animationIn="slideInUp"
	animationOut="slideOutDown"
	/>

if (isSmallScreenWidth) {
    return (
        <Modal
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...props}
            modalId={modalId}
            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
            onModalWillHide={handleModalWillHide}
            type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
            animationIn="slideInUp"
            animationOut="slideOutDown"
        />
    );
}

d) Pass shouldEnableNewFocusManagement to PopoverWithMeasuredContentBase:

Update line 28:

App/src/components/PopoverWithMeasuredContent/index.tsx

Line 28 in 1ff696b

// eslint-disable-next-line react/jsx-props-no-spreading

return <PopoverWithMeasuredContentBase shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} {...props} />;

What alternative solutions did you explore? (Optional)

Alternative 1: Use immediate focus without delay

Call focus(false) instead of focus(true) to bypass the Promise.all wait:

• Works on Android
• Doesn't work on iOS Safari - focus is set but keyboard doesn't appear
• Not a root cause fix - just a workaround

[PiyushChandra17]

Proposal

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

Chat - Compose box is not focused after selecting emoji

What is the root cause of that problem?

We are using the optional chaining (?.) here

App/src/libs/focusComposerWithDelay/setTextInputSelection.ts

Line 9 in 1ff696b

(textInput as HTMLTextAreaElement).setSelectionRange?.(forcedSelectionRange.start, forcedSelectionRange.end);

App/src/libs/focusComposerWithDelay/setTextInputSelection.ts

Line 11 in 1ff696b

(textInput as TextInput).setSelection?.(forcedSelectionRange.start, forcedSelectionRange.end);

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

Remove that optional chaining (?.)

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

n/A

What alternative solutions did you explore? (Optional)

n/A

[melvin-bot]

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

[melvin-bot]

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

[twisterdotcom]

Following my advice here: #63663 (comment).

This appears to be an exploitative bug, not one linked to a PR, regression test or customer report, so likely closing.

[PiyushChandra17]

Hi @twisterdotcom I think my Proposal above fixes this issue, i have retested this. Can you take a look 👀 ? Thanks

[situchan]

reviewing proposals soon