[$250] Chat - The compose box focus of the drafted message is lost

[lanitochka17]

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: 9.0.95-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Open any report
3. Send a message
4. Press the Edit button in the newly added message
5. Empty the draft message input
6. Navigate to a different report
7. Return to the first report

Expected Result:

The compose box of draft message is empty and it is focused. There is an edit icon in the LHN

Actual Result:

The compose box focus of the draft message is lost, the main compose box is focused. The user can send new messages while the draft message is not saved. There is no edit icon in the LHN

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6738708_1739208417571.Recording__601.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021889843985870452026
• Upwork Job ID: 1889843985870452026
• Last Price Increase: 2025-02-20

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot]

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

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-10 20:13:38 UTC.

Proposal

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

Chat - The compose box focus of the drafted message is lost

What is the root cause of that problem?

1. We only display pencil icon if there is draft text on main composer
   

   App/src/components/LHNOptionsList/LHNOptionsList.tsx

   Line 144 in 15d9f03

   const hasDraftComment = isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);

2. We don't auto focus ReportActionItemMessageEdit so main composer gets auto focused
   

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

   Line 269 in 15d9f03

   const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;

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

1. If we want the icon to be displayed for draft message of report actions too we can display it when REPORT_ACTIONS_DRAFTS is not empty
   

   App/src/components/LHNOptionsList/LHNOptionsList.tsx

   Line 144 in 15d9f03

   const hasDraftComment = isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);

    const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}`);


  const hasDraftComment =
                isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]) ||
                !isEmptyObject(draftMessage?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}`]);

2. We can by default auto focus ReportActionItemMessageEdit if it exists so
   

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

   Line 557 in 15d9f03

   onLayout={reportActionItemEventHandler.handleComposerLayoutChange(reportScrollManager, index)}

                            autoFocus

and disable the main composer auto focus if there is a draft message

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

Line 269 in 15d9f03

const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;

    const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}`);


...


    const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput && isEmptyObject(draftMessage);

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

N / A

What alternative solutions did you explore? (Optional)

1. If we want we can also display other icon for this cases
2. If we want to specifically auto focus on the last focused text input of the two we can save the info in Onyx or file level data (that is lost on refresh) for a specific report for instance on REPORT_ACTIONS_DRAFTS with some key wasFocused and set the data onFocus and onBlur in ReportActionItemMessageEdit and auto focus the ReportActionItemMessageEdit only if wasFocused is true for that specific report on opening of the LHN other wise focus the main composer

[M00rish]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-10 23:06:36 UTC.

Proposal

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

Chat - The compose box focus of the drafted message is lost

What is the root cause of that problem?

1. focus issue :
   there's no check when ReportActionItemMessageEdit is focused to prevent autofocus for main composer and that's why it always end up focused at the end.
   

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

   Line 269 in 3ad9461

   const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;

2. message can be sent while draft not saved:
   there's no check for this case :
   

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

   Line 459 in 3ad9461

   shouldDisableSendButton={!!exceededMaxLength}

3. edit icon not shown when there's an editing draft:
   no check for this case as well :
   

   App/src/components/LHNOptionsList/LHNOptionsList.tsx

   Line 144 in 15d9f03

   const hasDraftComment = isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);

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

1. prevent autofocus for ComposerWithSuggestions when ReportActionItemMessageEdit is focused :
   

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

   Line 269 in 3ad9461

   const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;

    const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput && !editFocused;

2. if there is draft disable send button in:
   

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

   Line 459 in 3ad9461

   shouldDisableSendButton={!!exceededMaxLength}

    const [editDraftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${ReportID}`};

....

   shouldDisableSendButton={!!exceededMaxLength || !isEmptyObject(editDraftMessage) }

3. we want the same check here too:
   

   App/src/components/LHNOptionsList/LHNOptionsList.tsx

   Line 144 in 15d9f03

   const hasDraftComment = isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);

   const [editDraftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${ReportID}`);

  const hasDraftComment = isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]) || !isEmptyObject(editDraftMessage)

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

ui issue

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@stephanieelliott, @abdulrahuman5196 Eep! 4 days overdue now. Issues have feelings too...

[stephanieelliott]

Hey @abdulrahuman5196 bump on this, can you review the proposals please?

[abdulrahuman5196]

Sorry missed this. Will check

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[stephanieelliott]

Hey @abdulrahuman5196 any feedback on the proposals?

[melvin-bot]

@stephanieelliott @abdulrahuman5196 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[stephanieelliott]

Bump @abdulrahuman5196-- any feedback on the proposals?

[melvin-bot]

@abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

[abdulrahuman5196]

Checking now

[abdulrahuman5196]

The compose box focus of the draft message is lost, the main compose box is focused. The user can send new messages while the draft message is not saved. There is no edit icon in the LHN

Hi @stephanieelliott , Regardless of any text in the edit, this same behaviour is observed. And the below observations made by @FitseTLT is also true.

We only display pencil icon if there is draft text on main composer
We don't auto focus ReportActionItemMessageEdit so main composer gets auto focused

Not sure if this was some previous limitation or we didn't actually implement the focus on other drafts messages. Before checking proposal I wanted to confirm if we the Expected OP in the issue? Could you kindly let me know if we want to implement the behaviour of focusing drafted message even though if it is not the main compose @stephanieelliott