Chat - Green bubble appears in the middle of the cursor line

[lanitochka17]

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.3.4-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #78790
Email or phone of affected tester (no customers): dreamnitethedragon+yydyd373@gmail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Redminote 10S Android 13
App Component: Chat Report View

Action Performed:

1. Launch app
2. Open any expense report details page
3. Tap the composer box
4. Note cursor is visible
5. Long press the cursor to note green bubble
6. Note Green bubble appears in the middle of the cursor line.
   7.Go to any other chat
7. Repeat steps 3 - 5
8. Note Green bubble appears at the end of the cursor line.

Expected Result:

Green bubble should appear at the end of the cursor line.

Actual Result:

Green bubble appears in the middle of the cursor line.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7052192_1768695536232.Screenrecorder-2026-01-18-05-30-52-5.mp4

View all open jobs on GitHub

[melvin-bot]

@thienlnam recently merged #78790, but they are OOO right now, so I'll auto-assign someone else.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @mollfpr (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #78790 - "78073: Update ghost text in Expense Threads / Reports" by @abbasifaizan70 (High confidence)
Related Issues: #78073

Recommendation: REVERT

PR #78790 introduced longer AI-aware placeholder text specifically for expense-related reports. The combination of longer placeholder text and the Android Composer's textAlignVertical="center" property is causing a layout issue where the text selection handle (green bubble) appears incorrectly positioned in the middle of the cursor line instead of at the end.

This is an Android-specific rendering issue that only affects expense reports because they're the only reports that now receive the longer placeholder text.

Labels: DeployBlockerCash should remain (App deploy is blocked). DeployBlocker will be removed if present (backend is not involved).

Detailed Analysis

Evidence

• The bug appears only in expense report details pages, which is exactly where PR 78073: Update ghost text in Expense Threads / Reports #78790 adds special placeholder text
• PR 78073: Update ghost text in Expense Threads / Reports #78790 merged on 2026-01-16, and this is a new feature caught during regression testing
• Other chats (which still use "Write something..." placeholder) work correctly
• The issue is Android-specific, which points to platform-specific text input rendering

Verification

PR #78790 modified:

• src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx - Added logic to show randomized AI-aware placeholders for expense reports
• All language files - Added new longer translation keys:
  • askConciergeToCreate: "Ask Concierge AI to create an expense..."
  • askConciergeToUpdate: "Ask Concierge AI to update an expense..."
  • askConciergeToCorrect: "Ask Concierge AI to correct an expense..."
  • addColleagueWithMention: "Add a colleague with an "@" mention..."

The code adds this logic:

const isExpenseRelatedReport = useMemo(() => isTransactionThreadView || isMoneyRequestReport(report), [isTransactionThreadView, report]);

if (isExpenseRelatedReport && canUserPerformWriteAction) {
    return getRandomPlaceholder(translate);
}

Root Cause

On Android, the Composer component uses textAlignVertical="center" (see src/components/Composer/implementation/index.native.tsx line 123). When placeholder text is significantly longer, Android's TextInput component appears to have a layout calculation issue where the cursor handle positioning is affected by the placeholder length, causing it to appear in the middle of the line rather than at the end.

The previous shorter placeholder ("Write something...") didn't trigger this issue, but the new longer placeholders (40+ characters) do.

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