Chat - Compose box is focused when editing a message offline in WS room

[jponikarchuk]

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: 9.2.66-0
Reproducible in staging?: Yes
Reproducible in production?: No
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-2222/folder/13176722/41237012/1045232057?sort=%2Bidentifier
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: iOS
App Component: Other

Action Performed:

1. Go to the workspace #admins room
2. Send three messages in rooms chat
3. Go offline
4. Send a message in the chat
5. Edit one of the messages sent online

Expected Result:

Message compose box should be focused when editing it offline.

Actual Result:

Main compose box is focused when trying to edit a message.

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

1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

When editing a message while offline in a chat room, the main compose box gets focused instead of the edit message compose box. This causes user confusion as they believe they are editing their message, but their input actually goes to the main composer at the bottom of the screen.

What is the root cause of that problem?

The root cause is in the composerFocusKeepFocusOn function located in:

• App/src/libs/actions/InputFocus/index.ts (iOS/Android)
• App/src/libs/actions/InputFocus/index.desktop.ts (Desktop)
• App/src/libs/actions/InputFocus/index.website.ts (Web)

The function is responsible for managing focus state for composers. When conditions trigger a refocus (such as modal state changes or focus state updates), the function checks whether to refocus the saved composer reference.

The bug: The function always checks ReportActionComposeFocusManager.isFocused(), which returns the focus state of the main composer. It never checks ReportActionComposeFocusManager.isEditFocused(), which returns the focus state of the edit composer.

This means:

1. When editing a message, the edit composer's ref is saved
2. When refocus conditions are met, it checks if the main composer is focused
3. Since the main composer isn't focused (the edit composer should be), it incorrectly attempts to refocus
4. This causes the wrong composer to receive focus

The function lacks awareness of which type of composer (main or edit) it's managing, so it always checks the wrong focus state when managing the edit composer.

We should add a parameter to the composerFocusKeepFocusOn function to identify which composer type it's managing, then check the appropriate focus state.

1. Update composerFocusKeepFocusOn in App/src/libs/actions/InputFocus/index.ts (iOS/Android):

Add isEditComposer parameter and implement conditional focus checking:

function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: Modal, onyxFocused: boolean, isEditComposer: boolean = false) {
    if (isFocused && !onyxFocused) {
        inputFocusChange(true);
        ref.focus();
    }
    if (isFocused) {
        refSave = ref;
    }
    if (!isFocused && !onyxFocused && !modal.willAlertModalBecomeVisible && !modal.isVisible && refSave) {
        // Check the appropriate composer's focus state based on type
        const isOtherComposerFocused = isEditComposer 
            ? ReportActionComposeFocusManager.isEditFocused() 
            : ReportActionComposeFocusManager.isFocused();
        
        if (!isOtherComposerFocused) {
            InteractionManager.runAfterInteractions(() => {
                refSave?.focus();
            });
        } else {
            refSave = undefined;
        }
    }
}

2. Apply the same changes to:

• App/src/libs/actions/InputFocus/index.desktop.ts
• App/src/libs/actions/InputFocus/index.website.ts

3. Update the edit composer call in App/src/pages/home/report/ReportActionItemMessageEdit.tsx:

In the useEffect at line 169-171, pass true to indicate this is the edit composer:

useEffect(() => {
    composerFocusKeepFocusOn(textInputRef.current as HTMLElement, isFocused, modal, onyxInputFocused, true);
}, [isFocused, modal, onyxInputFocused]);

This solution ensures that when the edit composer needs to manage focus, it checks its own focus state (isEditFocused()) rather than the main composer's focus state (isFocused()). The default parameter value (false) maintains backward compatibility for the main composer.

What alternative solutions did you explore? (Optional)

N/A