[Awaiting Payment 4th October] [$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 [email protected] 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): [email protected]
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: @trjExpensify

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

[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

[trjExpensify]

Sounds good! Updated.

[trjExpensify]

Payment summary as follows:

• $125 to @ikevin127 for the C+ review
• $125 to @bernhardoj for the fix

Paid Kevin, Bernhard will request. Closing!

[ikevin127]

@trjExpensify I did not receive a $125 payment today from this issue 🤔

Note: I accepted the offer! 🙏

[trjExpensify]

Hm.. but the contract has ended, and I don't have the option to pay it anymore. So wtf is that about?

[trjExpensify]

[trjExpensify]

No idea what happened there. It doesn't show as being paid either. I'll send you another offer, but if you happen to get a rogue $125 show up - I'll trust your honesty to let me know. :)

[ikevin127]

@trjExpensify Sure, I accepted the new contract and will let you know in case it comes twice 👍

[trjExpensify]

Cool, paid!

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$125 approved for @bernhardoj

[ikevin127]

Not overdue, issue contributors were paid - waiting for issue closure.

[trjExpensify]

Closing!