[Due for payment] [$250] Android-Chat- Emoji picker aligns to top when navigating with keyboard open

[nlemma]

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.1.74-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: NA
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy s10/ Android 12
App Component: Chat Report View

Action Performed:

1. Open Hybrid App
2. Go to any chat
3. Open the keyboard up
4. Tap emoji icon to open emoji picker

Expected Result:

Emoji picker aligns to bottom

Actual Result:

Emoji picker aligns to top when navigating with keyboard open

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

Bug6875981_1751458849116.Screen_Recording_20250702_151347_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021940529972778488484
• Upwork Job ID: 1940529972778488484
• Last Price Increase: 2025-07-16

Issue Owner

Current Issue Owner: @trjExpensify

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

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

Emoji picker aligns to top when navigating with keyboard open

What is the root cause of that problem?

The anchor position of the emoji picker is calculated here, and when the keyboard is open, it causes incorrect positioning

App/src/components/EmojiPicker/EmojiPicker.tsx

Lines 97 to 112 in 2a8b75d

	calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
	close(() => {
	onWillShow?.();
	setIsEmojiPickerVisible(true);
	setEmojiPopoverAnchorPosition({
	horizontal: value.horizontal,
	vertical: value.vertical,
	});
	emojiAnchorDimension.current = {
	width: value.width,
	height: value.height,
	};
	setEmojiPopoverAnchorOrigin(anchorOriginValue);
	setActiveID(id);
	});
	});

• Why does this only occur on native:
  • The focus/blur behavior on native differs from the web. On native, clicking the emoji button does not blur the composer immediately—the composer only loses focus when the emoji picker overlay actually appears. On the web, clicking the emoji button instantly blurs the composer, causing the keyboard to dismiss.
  • Even though the web keyboard is dismissed on emoji-button clicks, there’s still a race between the keyboard hiding and the emoji picker showing, so a subtler timing bug could still exist.
  • Therefore, explicitly dismissing the keyboard first guarantees a safe, predictable state.

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

Ensure the keyboard is closed before calculating the anchor position.

KeyboardUtils.dismiss().then(() =>
    calculateAnchorPosition(...

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.

[trjExpensify]

It would be good to have an RCA on why this is only happening on Android native specifically.

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

It would be good to have an RCA on why this is only happening on Android native specifically.

@trjExpensify Sure, I’ve updated my proposal to make it clearer.

Why does this only occur on native:

• The focus/blur behavior on native differs from the web. On native, clicking the emoji button does not blur the composer immediately—the composer only loses focus when the emoji picker overlay actually appears. On the web, clicking the emoji button instantly blurs the composer, causing the keyboard to dismiss.
• Even though the web keyboard is dismissed on emoji-button clicks, there’s still a race between the keyboard hiding and the emoji picker showing, so a subtler timing bug could still exist.
• Therefore, explicitly dismissing the keyboard first guarantees a safe, predictable state.