[$125] android-status-After selecting emoji, message field shown focused but keypad not shown

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: V9.1 30-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): Slottwo1 [email protected]
Issue reported by: Applause Internal Team
Device used: Redminote note 10s android 13
App Component: User Settings

Action Performed:

1. Launch app
2. Tap account - status icon
3. Select an emoji

Expected Result:

After selecting emoji, message field shown focused so keypad must be shown.

Actual Result:

After selecting emoji, message field shown focused but keypad not shown.

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

Bug6819575_1746190171165.Screenrecorder-2025-05-02-18-10-00-746.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021918306415997154754
• Upwork Job ID: 1918306415997154754
• Last Price Increase: 2025-05-02
• Automatic offers:
• allgandalf | Reviewer | 107217478

Issue Owner

Current Issue Owner: @yuwenmemon

[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.

[twisterdotcom]

Yeah, sure. Niche but would be nice to show the keyboard whenever the field is focused of course.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[rohit9625]

Proposal

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

After selecting emoji, message field shown focused but keypad not shown.

What is the root cause of that problem?

Here we are focusing the text input when the Emoji Picker modal hides:

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

Lines 200 to 202 in 3a7784e

	onModalHide={() => {
	inputRef.current?.focus();
	}}

The root cause is a race condition between the dismissal animation of the modal and the invocation of the focus() method on the TextInput. Since the modal is still animating or affecting the layout when focus() is called, the input is not yet considered ready to receive keyboard focus by the system.

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

We should delay the .focus() call until after the modal has fully closed by using setTimeout with a slight delay (e.g. 150ms), or use InteractionManager.runAfterInteractions() to ensure the UI is idle before focusing the input.

  onModalHide={() => {
      setTimeout(() => {
          inputRef.current?.focus();
      }, 150);
  }}

Results

After_Keyboard_Fix.mp4

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

None, it's a timing issue in the UI

What alternative solutions did you explore? (Optional)

None :(

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.

[bernhardoj]

Proposal

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

The keyboard doesn't show after the emoji picker is closed.

What is the root cause of that problem?

We immediately focus on the input when the modal hides,

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

Lines 200 to 202 in 395f65f

	onModalHide={() => {
	inputRef.current?.focus();
	}}

but it's a known issue on Android that modal hide callback is called too early, which is why most of the time, we delay the focus.

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

We can use isWindowReadyToFocus (this is android only util) to make sure it's ready to focus.

isWindowReadyToFocus().then(() => inputRef.current?.focus());

or

We can use focusComposerWithDelay.

focusComposerWithDelay(inputRef.current)(true)

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

N/A

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-02 21:53:04 UTC.

Proposal

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

android-status-After selecting emoji, message field shown focused but keypad not shown

What is the root cause of that problem?

Once the emoji picker modal closes, it calls the inputRef.current?.focus() which makes the input field focused which is the correct behaviour but on Android may skip showing the keyboard if this happens too early

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

Lines 200 to 202 in 7f68056

	onModalHide={() => {
	inputRef.current?.focus();
	}}

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

We should make use of InteractionManager + setTimeout in order to delay inside the onModalHide to make sure Android has enough time to settle before focusing the input.

Update this line:

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

Lines 200 to 202 in 7f68056

	onModalHide={() => {
	inputRef.current?.focus();
	}}

with,

onModalHide={() => {
    InteractionManager.runAfterInteractions(() => {
        setTimeout(() => {
            inputRef.current?.focus();
        }, 50); 
    });
}}

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)

Result

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.

[github-actions]

⚠️ @PiyushChandra17 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

@allgandalf Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[allgandalf]

Looking today!

[allgandalf]

Solution from @bernhardoj makes the most sense to me, lets go with their proposal.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @allgandalf

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[allgandalf]

^ false flag