[Due for payment 2025-12-23] [$250] Status - Cursor overlaps with text after adding an emoji

[mitarachim]

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: v9.2.31-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176687/test-cases/41236677
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Windows 11 pro /Chrome
App Component: User Settings

Action Performed:

1. Navigate to staging.new.expensify.com
2. Go to account > Status > Select an emoji
3. Observe the "Blinking Cursor" and the "Message" text

Expected Result:

No overlap between the "Blinking Cursor" and the "Message" text

Actual Result:

After adding the emoji, the cursor overlapped with the message text

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

Bug6975024_1760478927323.bandicam_2025-10-15_00-55-04-153.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021978487939604403014
• Upwork Job ID: 1978487939604403014
• Last Price Increase: 2025-10-22
• Automatic offers:
• situchan | Contributor | 109190860
• huult | Contributor | 109748114

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

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

[paulnjs]

Proposal

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

After adding the emoji, the cursor overlapped with the message text

What is the root cause of that problem?

When the emoji picker modal closes, focusAfterModalClose is called. This function waits for the modal to close and then calls focus() on the input. However, the activateLabel function has a condition that's preventing the animation:

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 161 to 170 in 5c27729

	const deactivateLabel = useCallback(() => {
	const newValue = value ?? '';
	if (!!forceActiveLabel || newValue.length !== 0 || prefixCharacter || suffixCharacter) {
	return;
	}
	animateLabel(INACTIVE_LABEL_TRANSLATE_Y, INACTIVE_LABEL_SCALE);
	isLabelActive.current = false;
	}, [animateLabel, forceActiveLabel, prefixCharacter, suffixCharacter, value]);

This lead to the label animation isn't being triggered.

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

Add forceActiveLabel={true} to the Input component:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 232 in 5c27729

<InputWrapper

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)

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.

[nkdengineer]

Proposal

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

After adding the emoji, the cursor overlapped with the message text

What is the root cause of that problem?

When users select emoji, we had the logic to refocus the input on onModalHide

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 220 to 228 in 5c27729

	onModalHide={() => {
	// On mobile Chrome, the input will blur immediately upon focus if the focus function is called right after the modal closes, even though the modal has fully closed.
	// Therefore, use the `focusComposerWithDelay` helper as used in `ComposerWithSuggestions` for this case.
	if (isMobileChrome()) {
	focusComposerWithDelay(inputRef.current)(true);
	} else {
	focusAfterModalClose(inputRef.current);
	}
	}}

and on large screen we focus the input immediately so it causes the conflict with the input label animation

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

Update

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 220 to 228 in 5c27729

	onModalHide={() => {
	// On mobile Chrome, the input will blur immediately upon focus if the focus function is called right after the modal closes, even though the modal has fully closed.
	// Therefore, use the `focusComposerWithDelay` helper as used in `ComposerWithSuggestions` for this case.
	if (isMobileChrome()) {
	focusComposerWithDelay(inputRef.current)(true);
	} else {
	focusAfterModalClose(inputRef.current);
	}
	}}

to

onModalHide={() => {
                               focusComposerWithDelay(inputRef.current)(true);
                            }}

we should focus the input with delay like what we did in other places like this one

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

None

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.

[Eskalifer1]

Proposal

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

Status - Cursor overlaps with text after adding an emoji

What is the root cause of that problem?

Previously, everything worked with the same logic as it does now, but this problem arose after we moved onDismiss from the component itself to the onCloseCallBack function, as a result of which, in all environments except iOS, onDismis is now only called in this function:

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

Lines 146 to 162 in 638a116

	const onCloseCallBack = useCallback(() => {
	setIsTransitioning(false);
	setIsContainerOpen(false);
	if (handleRef.current) {
	// eslint-disable-next-line deprecation/deprecation
	InteractionManager.clearInteractionHandle(handleRef.current);
	}
	// On the web platform, the Modal's onDismiss callback may not be triggered if the dismiss process is interrupted by other actions such as navigation.
	// Specifically 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 onDismiss and onModalHide here.
	if (getPlatform() !== CONST.PLATFORM.IOS) {
	onDismiss?.();
	onModalHide();
	}
	}, [onDismiss, onModalHide]);

Previously, the function onDismiss?.(); was always called in onDismiss:

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

Lines 219 to 225 in 638a116

	onDismiss={() => {
	if (getPlatform() !== CONST.PLATFORM.IOS) {
	return;
	}
	onDismiss?.();
	onModalHide();
	}}

It was like this(Previously, there was a check on ANDROID, but now on IOS, it is not very important in this case, since we are working on a bug that is reproduced on the web, and changes regarding platforms, if they are needed, can be discussed during the PR stage.):

onDismiss={() => {
                    onDismiss?.();
                    if (getPlatform() !== CONST.PLATFORM.ANDROID) {
                        onModalHide();
                    }
                }}

And onCloseCallBack had this part:

if (getPlatform() === CONST.PLATFORM.ANDROID) {
            onModalHide();
        }

It turns out that previously, the order of function execution was such that onDismiss was called first, and only then onCloseCallBack (inside which onModalHide)

Now these functions are called simultaneously, which leads to a race condition between them:

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

Lines 158 to 161 in 638a116

	if (getPlatform() !== CONST.PLATFORM.IOS) {
	onDismiss?.();
	onModalHide();
	}

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

We need to repeat the same logic, but with a new approach, i.e., call these functions one after another, rather than simultaneously. To do this, we can use one of the functions (this can be discussed during the PR stage), for example, requestIdleCallback, InteractionManager, setTimeout, etc.

That is, change this part:

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

Lines 158 to 161 in 638a116

	if (getPlatform() !== CONST.PLATFORM.IOS) {
	onDismiss?.();
	onModalHide();
	}

To:

onDismiss?.();
            requestIdleCallback(() => {
                onModalHide();
            });

The same can be done in this part, if necessary:

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

Lines 223 to 224 in 638a116

	onDismiss?.();
	onModalHide();

What alternative solutions did you explore? (Optional)

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.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

Cursor overlaps with the label after selecting emoji.

What is the root cause of that problem?

We refocus the input after the modal hides.

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 220 to 228 in a87fce5

	onModalHide={() => {
	// On mobile Chrome, the input will blur immediately upon focus if the focus function is called right after the modal closes, even though the modal has fully closed.
	// Therefore, use the `focusComposerWithDelay` helper as used in `ComposerWithSuggestions` for this case.
	if (isMobileChrome()) {
	focusComposerWithDelay(inputRef.current)(true);
	} else {
	focusAfterModalClose(inputRef.current);
	}
	}}

However, the onModalHide is called too early, and the focus trap for the modal is still active. We call the callback immediately after setting the transitioning state.

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

Lines 147 to 161 in a87fce5

	setIsTransitioning(false);
	setIsContainerOpen(false);
	if (handleRef.current) {
	// eslint-disable-next-line deprecation/deprecation
	InteractionManager.clearInteractionHandle(handleRef.current);
	}
	// On the web platform, the Modal's onDismiss callback may not be triggered if the dismiss process is interrupted by other actions such as navigation.
	// Specifically 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 onDismiss and onModalHide here.
	if (getPlatform() !== CONST.PLATFORM.IOS) {
	onDismiss?.();
	onModalHide();
	}

The focus trap will only off if isTransitioning is false.

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

Line 208 in a87fce5

const modalVisibility = isVisibleState || isTransitioning || isContainerOpen !== isVisibleState;

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

Lines 239 to 240 in a87fce5

	<FocusTrapForModal
	active={modalVisibility}

If we look at the previous react-native-modal implementation, we only call the onModalHide after the state is applied.
https://github.com/react-native-modal/react-native-modal/blob/3e413c4c3e774697caebe202e7be5856b62444bf/src/modal.tsx#L629-L643

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

We can trigger the callback after modalVisibility becomes false.

const modalVisibility = isVisibleState || isTransitioning || isContainerOpen !== isVisibleState;
const prevModalVisibility = usePrevious(modalVisibility);

useEffect(() => {
    if (prevModalVisibility && !modalVisibility) {
        // On the web platform, the Modal's onDismiss callback may not be triggered if the dismiss process is interrupted by other actions such as navigation.
        // Specifically 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 onDismiss and onModalHide here.
        if (getPlatform() !== CONST.PLATFORM.IOS) {
            onDismiss?.();
            onModalHide();
        }
    }
}, [prevModalVisibility, modalVisibility]);

(instead of using prevModalVisibility, we can use ref and set it to true in onCloseCallback, check if the ref is true, and reset it to false in the above useEffect)