[$125] mWeb - Chat - While editing composer doesn't hide and the editing input doesn't get focused

[IuliiaHerets]

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.0.25-10
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #45150
Email or phone of affected tester (no customers): nathanmulugetatesting+1186@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open a chat and send a message
3. Hold on the sent message and tap on "Edit comment"

Expected Result:

The compose box hides and the app focuses on the edit input field

Actual Result:

The composer box doesn't hide and both the compose box and the edit input are visible. The app sometimes doesn't focus on the edit input field after clicking on "Edit comment". If the app focuses on the edit input field then the cursor jumps at the start of the text.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6585078_1724838596672.Screen_Recording_20240828_124410_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833542585900797797
• Upwork Job ID: 1833542585900797797
• Last Price Increase: 2024-09-10
• Automatic offers:
• ikevin127 | Reviewer | 103900666

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[melvin-bot]

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

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[melvin-bot]

📣 @LC-JiaZhaorong! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[youssef-lr]

@Skalakid can you take a look at this issue please? Seems related to #45150

[bernhardoj]

Proposal

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

When editing a message, the main composer doesn't hide and the edit composer also doesn't have the green outline focus.

What is the root cause of that problem?

The focus on the composer happens too early before the modal is completely hidden.

This is similar to #46095. When we press edit, we close the modal and wait it be hidden and finally set the draft message to be the current message.

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Lines 247 to 259 in 6697c26

	const editAction = () => {
	if (!draftMessage) {
	Report.saveReportActionDraft(reportID, reportAction, Parser.htmlToMarkdown(getActionHtml(reportAction)));
	} else {
	Report.deleteReportActionDraft(reportID, reportAction);
	}
	};
	if (closePopover) {
	// Hide popover, then call editAction
	hideContextMenu(false, editAction);
	return;
	}

When the draft message is available, we focus on the edit composer.

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

Lines 272 to 278 in 6697c26

	useEffect(() => {
	if (prevDraftMessage !== undefined || draftMessage === undefined) {
	return;
	}
	focusTextInputAfterAnimation(textInputRef.current, 100);
	}, [prevDraftMessage, draftMessage]);

The focusTextInputAfterAnimation delay is only available for android. Why this happen now?

As mentioned above, we start the focus once the draft is available. This issue happens after #47866 where they refactor the way we get the draft by directly getting it from useOnyx which seems to be faster.

In #46095 (comment), I explained why focusing too early before the modal is completely hidden causes the problem. In short, it's because the focus trap is still active.

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

We need to apply the same solution as #46095 by using focusComposerWithDelay instead of focusTextInputAfterAnimation.

focusComposerWithDelay(textInputRef.current)(true);

[melvin-bot]

@youssef-lr, @miljakljajic Huh... This is 4 days overdue. Who can take care of this?

[Skalakid]

Hello @youssef-lr, sorry for the late response. I was focused on finishing inline images PR and missed the notification about this issue. I can take a look and verify if it's Live Markdown web refactor related bug. For now I'm having trouble with editing a message inside the chat on Android Chrome, so I'm unable to reproduce this issue

Screen.Recording.2024-09-03.at.11.56.47.mov

[miljakljajic]

Not overdue - Waiting for more feedback from @Skalakid

[Skalakid]

I can't test it on the dev build, since I can't see Edit message option. However, it appears on staging and I was able to reproduce it also on iOS Safari:

bug.mov

It's hard for me to say if it's connected to the Live Markdown refactor changes. We've changed only the markdown structure that is inside the Live Markdown input component. The outside structure wasn't touched. It can be easily checked by changing the version of the react-native-live-markdown library to 0.1.116 and verifying if it still occurs. Like I said the edit option bug block me in testing so I can't confirm it

[melvin-bot]

@youssef-lr, @miljakljajic Eep! 4 days overdue now. Issues have feelings too...

[Skalakid]

Finally, the bug with message editing has been fixed, and I could test it on the dev environment! I downgraded the version of the react-native-live-markdown to 0.1.116 (the one before the refactor) and the bug still occurs. So it's not connected to the live markdown changes.

Also, I tested @bernhardoj's proposal and it fixes the issue really well

[miljakljajic]

@youssef-lr @Skalakid shall we move forward with @bernhardoj 's proposal then?

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @ikevin127

@youssef-lr btw, is the price reduction intentional?

[melvin-bot]

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

[miljakljajic]

Going out on parental leave so I've reassigned to another BZ team member. Thank you @trjExpensify

Next steps: PR is still being discussed here

When payment is due:
Upwork Offer to be paid for @ikevin127 : https://www.upwork.com/nx/wm/offer/103900666
@bernhardoj is paid via ND manual requests (per this SO)

[ikevin127]

Update: Awaiting for @youssef-lr to 🟢 Approve and merge PR - currently in talks with PR author to clear up some misunderstandings regarding the issue / implemented fix.

[trjExpensify]

@youssef-lr thoughts on the PR?

[youssef-lr]

Merging now!

[ikevin127]

⚠️ Automation failed here -> this should be on [HOLD for Payment 2024-10-04] according to yesterday’s production deploy from #48973 (comment).

cc @trjExpensify