[$250] [Due for payment 2026-01-29] Editing Previous Message with Up Arrow Does Not Move Keyboard Focus to Editor

[m-natarajan]

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.86-6
Reproducible in staging?: Needs Reproduction (Unable to reproduce)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Navigate to any chat
2. Send a message
3. Press the Up Arrow key to edit the previous message

Expected Result:

The previous message opens in edit mode.
Keyboard focus automatically moves to the message editor so the user can immediately start typing.

Actual Result:

The previous message opens in edit mode
Keyboard focus does not move to the editor
Keyboard focus is in the compose field

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

The video for the issue is in OP

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022017391922373265207
• Upwork Job ID: 2017391922373265207
• Last Price Increase: 2026-01-31
• Automatic offers:
• aimane-chnaif | Reviewer | 110296918
• linhvovan29546 | Contributor | 110296919

[melvin-bot]

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

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[samranahm]

Unable to reproduce.

[linhvovan29546]

I can reproduce the issue. Steps to reproduce:

1. Navigate to any chat.
2. Press the Help button to open Concierge.
3. Send a message in the main chat.
4. Press the Up Arrow key to edit the previous message.
5. The previous message opens in edit mode, but the edit field isn't focused.

Screen.Recording.2025-12-27.at.11.09.08.mov

Please assign me as C+ based on the Slack message: https://expensify.slack.com/archives/C02NK2DQWUX/p1766762914499179

[dmkt9]

Proposal

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

Editing Previous Message with Up Arrow Does Not Move Keyboard Focus to Editor

What is the root cause of that problem?

1. When the draft message edit composer is opened for editing, it should be focused using focusComposerWithDelay here:
   

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

   Line 608 in 0d08b03

   focusComposerWithDelay(composerTextInputRef.current)(true);

2. However, inside focusComposerWithDelay, ComposerFocusManager.isReadyToFocus() never resolves, so the focus function is never called:
   

   App/src/libs/focusComposerWithDelay/index.ts

   Line 31 in 0d08b03

   Promise.all([ComposerFocusManager.isReadyToFocus(), isWindowReadyToFocus()]).then(() => {

3. When SidePanelModal is always open, the modal id is only set but never cleared, which causes ComposerFocusManager.isReadyToFocus() to never resolve:
   

   App/src/components/SidePanel/SidePanelModal/index.tsx

   Lines 52 to 58 in 0d08b03

   	useEffect(() => {
   	ComposerFocusManager.resetReadyToFocus(uniqueModalId);
   	return () => {
   	ComposerFocusManager.setReadyToFocus(uniqueModalId);
   	};
   	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
   	}, []);

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

This logic was added in PR #59397 to ensure that the TextInput focus is delayed until the SidePanelModal is actually closed and the keyboard displays properly.

We need to refactor slightly to ensure the modal id is only set when the SidePanelModal is closing:

App/src/components/SidePanel/SidePanelModal/index.tsx

Lines 52 to 58 in 0d08b03

	useEffect(() => {
	ComposerFocusManager.resetReadyToFocus(uniqueModalId);
	return () => {
	ComposerFocusManager.setReadyToFocus(uniqueModalId);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

useEffect(() => {
    return () => {
        ComposerFocusManager.resetReadyToFocus(uniqueModalId);
        setTimeout(() => {
            ComposerFocusManager.setReadyToFocus(uniqueModalId);
        }, CONST.ANIMATED_TRANSITION);
    };
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, []);

What alternative solutions did you explore? (Optional)

Or apply this logic only for narrow screens:

App/src/components/SidePanel/SidePanelModal/index.tsx

Lines 52 to 58 in 0d08b03

	useEffect(() => {
	ComposerFocusManager.resetReadyToFocus(uniqueModalId);
	return () => {
	ComposerFocusManager.setReadyToFocus(uniqueModalId);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

[ShridharGoel]

Proposal

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

With the Concierge side panel open, pressing Up to edit the previous message opens the inline editor but the input is not focused.

What is the root cause of that problem?

Two things prevent focus from landing where it should:

1. When Up key triggers inline edit inside the side panel, the focus manager is kept blocked while the panel is open (on web via the SidePanelModal mount effect), so the inline editor mounts unfocused and the user cannot type immediately.

See this:

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 595 to 606 in 466a83d

	(shouldTakeOverFocus = false) => {
	ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => {
	if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused || !isSidePanelHiddenOrLargeScreen) {
	return;
	}
	focus(true);
	}, shouldTakeOverFocus);
	},
	[focus, isFocused, isSidePanelHiddenOrLargeScreen],
	);

and this:

App/src/components/SidePanel/SidePanelModal/index.tsx

Lines 51 to 58 in 466a83d

	// Web back button: push history state and close Side Panel on popstate
	useEffect(() => {
	ComposerFocusManager.resetReadyToFocus(uniqueModalId);
	return () => {
	ComposerFocusManager.setReadyToFocus(uniqueModalId);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

2. When cancelling an edit (Esc/save), we always ask the main composer to focus and never target the side panel composer, so focus jumps away from Concierge after closing the inline editor.

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

   Lines 279 to 286 in 466a83d

   	deleteReportActionDraft(reportID, action);
   	if (isActive()) {
   	ReportActionComposeFocusManager.clear(true);
   	// Wait for report action compose re-mounting on mWeb
   	// eslint-disable-next-line @typescript-eslint/no-deprecated
   	InteractionManager.runAfterInteractions(() => ReportActionComposeFocusManager.focus());
   	}

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

We need to fix two things here:

1. When pressing the up key to edit the previous message, the focus should go to that message so that the user can directly start typing.
2. After the editing is done and the user presses the Enter key, or if the user cancels the edit via the Esc key -> then the focus should go back to the composer of the same section. If editing is being done in main chat, then it should go to the main chat. Else, if editing is happening in the Concierge side panel, then focus should go back to the composer of the side panel.

To achieve the above, we can allow exact focus requests when the side panel is open, auto-focus the inline edit input when it mounts, and when leaving edit mode focus the correct composer based on whether the edit happened in main chat or the Concierge side panel.

// src/pages/home/report/ReportActionItemMessageEdit.tsx
// detect Concierge side-panel edits and auto-focus the inline editor
const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID, {canBeMissing: true});
const {shouldHideSidePanel} = useSidePanel();
const isConciergeSidePanelContext = useMemo(
    () => conciergeReportID === reportID && !shouldHideSidePanel,
    [conciergeReportID, reportID, shouldHideSidePanel],
);

useEffect(() => {
    if (!textInputRef.current) {
        return;
    }
    focus(true);
}, [focus]);

// focus the right composer after cancelling
const deleteDraft = useCallback(() => {
    deleteReportActionDraft(reportID, action);

    if (isActive()) {
        ReportActionComposeFocusManager.clear(true);
        InteractionManager.runAfterInteractions(() => {
            if (isConciergeSidePanelContext) {
                focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current)(true);
            } else {
                ReportActionComposeFocusManager.focus(true);
            }
        });
    }
    // scrolling logic unchanged
}, [action, index, reportID, reportScrollManager, isActive, isConciergeSidePanelContext]);

// src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
// let explicit focus requests through even when the side panel is open
const setUpComposeFocusManager = useCallback(
    (shouldTakeOverFocus = false) => {
        ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => {
            if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused) {
                return;
            }

            if (!isSidePanelHiddenOrLargeScreen && !shouldFocusForNonBlurInputOnTapOutside) {
                return;
            }

            focus(true);
        }, shouldTakeOverFocus);
    },
    [focus, isFocused, isSidePanelHiddenOrLargeScreen],
);

// src/components/SidePanel/SidePanelContextProvider.tsx
// reset and allow focus when closing the side panel
const uniqueModalId = useRef(ComposerFocusManager.getId()).current;
const closeSidePanel = useCallback(
    (shouldUpdateNarrow = false) => {
        if (!sidePanelNVP) {
            return;
        }

        setIsSidePanelTransitionEnded(false);
        SidePanelActions.closeSidePanel(!isExtraLargeScreenWidth || shouldUpdateNarrow);

        focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.SIDE_PANEL_ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true);
        ComposerFocusManager.resetReadyToFocus(uniqueModalId);
        setTimeout(() => ComposerFocusManager.setReadyToFocus(uniqueModalId), CONST.SIDE_PANEL_ANIMATED_TRANSITION);
    },
    [isExtraLargeScreenWidth, sidePanelNVP, uniqueModalId],
);

We also need to remove the SidePanelModal mount/unmount effect that keeps ComposerFocusManager in a "not ready" state while the panel is open. That effect blocked inline editor focus; we now reset and re-allow focus when the side panel closes in SidePanelContextProvider.

So this will be removed:

App/src/components/SidePanel/SidePanelModal/index.tsx

Lines 51 to 58 in 466a83d

	// Web back button: push history state and close Side Panel on popstate
	useEffect(() => {
	ComposerFocusManager.resetReadyToFocus(uniqueModalId);
	return () => {
	ComposerFocusManager.setReadyToFocus(uniqueModalId);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

Test branch

Link

Screen.Recording.2025-12-28.at.1.53.34.PM.mov