[C+ Checklist Needs Completion] [$250] Chat - Compose box is disappearing when editing a message in the expense chat

[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: v9.2.37-8
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/test-runs/TR-1464/folder/13177078/41237914/971991481
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 10 / Chrome
App Component: Chat Report View

Action Performed:

1. Go to a 1:1 chat
2. Create two expenses
3. Click on the "View" button to open the expenses.
4. Click on any expense.
5. Send a message to the chat
6. Right click on the latest message sent.
7. Click on "Edit comment"

Expected Result:

Compose box should remain visible when editing a message.

Actual Result:

After clicking on "Edit message" the compose box immediately disappears. Clicking in any part of the chat is making the compose box to reappear.

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/~021983365455428855216
• Upwork Job ID: 1983365455428855216
• Last Price Increase: 2025-10-29
• Automatic offers:
• apeyada | Contributor | 109374719

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[abbasifaizan70]

Proposal: Fix Compose Box Disappearing When Editing a Message

Problem Description

When a user clicks "Edit comment" on a message, the main compose box immediately disappears, even though the edit composer is visible. The compose box only reappears when the user clicks anywhere in the chat.

Root Cause

The issue is in src/pages/home/report/ReportActionItemMessageEdit.tsx. When the edit composer receives focus, it calls setShouldShowComposeInputKeyboardAware(false) in the onFocus handler (line 523):

onFocus={() => {
    setIsFocused(true);
    if (textInputRef.current) {
        ReportActionComposeFocusManager.editComposerRef.current = textInputRef.current;
    }
    startScrollBlock();
    // ... other code ...
    setShouldShowComposeInputKeyboardAware(false);  // <-- This hides the main compose box
    // ... more code ...
}}

The problem occurs because:

1. When the edit mode is triggered (via saveReportActionDraft), the ReportActionItemMessageEdit component mounts
2. The browser or React automatically focuses the input field (even without an explicit autoFocus prop)
3. The onFocus handler immediately fires and hides the main compose box
4. This happens so quickly that the user sees the compose box disappear right after clicking "Edit"

---

Proposed Solution

Add a flag to track whether this is the initial focus event, and only hide the compose box on subsequent focus events (e.g., when returning focus after the emoji picker closes). This way, the compose box won't be hidden when the edit mode first starts.

Implementation

Changes to src/pages/home/report/ReportActionItemMessageEdit.tsx

1. Add ref to track initial focus (around line 144-151):

     const textInputRef = useRef<(HTMLTextAreaElement & TextInput) | null>(null);
     const isFocusedRef = useRef<boolean>(false);
     const draftRef = useRef(draft);
     const emojiPickerSelectionRef = useRef<Selection | undefined>(undefined);
     // The ref to check whether the comment saving is in progress
     const isCommentPendingSaved = useRef(false);
+    // The ref to check whether this is the initial focus (when edit mode starts)
+    const isInitialFocusRef = useRef(true);
     const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {canBeMissing: true});
     const isOriginalReportArchived = useReportIsArchived(originalReportID);

2. Modify the onFocus handler (around line 507-540):

                             onFocus={() => {
                                 setIsFocused(true);
                                 if (textInputRef.current) {
                                     ReportActionComposeFocusManager.editComposerRef.current = textInputRef.current;
                                 }
                                 startScrollBlock();
                                 // eslint-disable-next-line @typescript-eslint/no-deprecated
                                 InteractionManager.runAfterInteractions(() => {
                                     requestAnimationFrame(() => {
                                         reportScrollManager.scrollToIndex(index, true);
                                         endScrollBlock();
                                     });
                                 });
                                 if (isMobileChrome() && reportScrollManager.ref?.current) {
                                     reportScrollManager.ref.current.scrollToIndex({index, animated: false});
                                 }
-                                setShouldShowComposeInputKeyboardAware(false);
+                                // Don't hide the compose box on the initial focus when edit mode starts
+                                if (!isInitialFocusRef.current) {
+                                    setShouldShowComposeInputKeyboardAware(false);
+                                }
+                                isInitialFocusRef.current = false;
                                 // The last composer that had focus should re-gain focus
                                 setUpComposeFocusManager();
 
                                 // Clear active report action when another action gets focused
                                 if (!isEmojiPickerActive(action.reportActionID)) {
                                     clearActive();
                                 }
                                 if (!ReportActionContextMenu.isActiveReportAction(action.reportActionID)) {
                                     ReportActionContextMenu.clearActiveReportAction();
                                 }
                             }}

Summary of Changes

• Added: 1 new ref declaration (isInitialFocusRef)
• Modified: 1 line changed to conditional logic + 3 lines added
• Total: +5 lines, -1 line

Alternative Solution

If the above approach causes issues, we could delay the call to setShouldShowComposeInputKeyboardAware(false) or only call it when the keyboard is actually shown (not on initial mount).

Demo Video After fix

Desktop/Web View

https://www.loom.com/share/5d2a45ec37af4e24bd5e827feef2014b

Mobile View

https://www.loom.com/share/f28f85466fef41ffa261d2425fcc9f76

[apeyada]

Proposal

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

Compose box is disappearing when editing a message in the expense chat

What is the root cause of that problem?

App/src/pages/home/report/ReportFooter.tsx

Line 232 in 6cc60bb

{!shouldHideComposer && (!!shouldShowComposeInput || !shouldUseNarrowLayout) && (

Here, we're using shouldUseNarrowLayout to determine whether to show/hide composer when editing message.
This flag is for hiding composer on mobile view.

But shouldUseNarrowLayout flag is true when isInNarrowPaneModal is true (even on desktop web), which causes this issue.

App/src/hooks/useResponsiveLayout/index.ts

Line 64 in 6cc60bb

const shouldUseNarrowLayout = isSmallScreenWidth || isInNarrowPaneModal;

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

We should use isSmallScreenWidth instead.

App/src/pages/home/report/ReportFooter.tsx

Line 232 in 6cc60bb

{!shouldHideComposer && (!!shouldShowComposeInput || !shouldUseNarrowLayout) && (

We can also consider replacing shouldUseNarrowLayout with isSmallScreenWidth in other places of ReportFooter

What alternative solutions did you explore? (Optional)

[lorretheboy]

Proposal

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

Compose box is disappearing when editing a message in the expense chat

What is the root cause of that problem?

When the edit composer received focus, it was calling

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Line 523 in 4df272e

setShouldShowComposeInputKeyboardAware(false);

This function hides the main compose box at the bottom of the screen. On web, it calls setShouldShowComposeInput(false) with a delay, which was causing the main compose box to disappear immediately when you clicked "Edit message".

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

We should remove the problematic line from the onFocus handler

What alternative solutions did you explore? (Optional)

On mobile platforms, hide the main composer when the keyboard appears for editing. But on web, keep the main composer visible so users can see it while editing.

                                if (getPlatform() !== CONST.PLATFORM.WEB) {
                                    setShouldShowComposeInputKeyboardAware(false);
                                }

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Line 523 in 4df272e

setShouldShowComposeInputKeyboardAware(false);

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]

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

[melvin-bot]

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

[melvin-bot]

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