[$125] mWeb - Chat - When deleting mention in second line, suggestions overlap the message

[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.47
Reproducible in staging?: Y
Reproducible in production?: Y
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. Open the staging.new.expensify.com website
2. Open any chat
3. In compose box, mention other users until one mention is displayed in second line
4. Start deleting the last mention, until it is moved to the first message line
5. Verify the mention suggestions box, is also moved so it doesn´t overlap the message in compose box

Expected Result:

When the user is deleting a mention displayed in second line, and this mention is moved to the first line of the message, the suggestion box should also be moved, so it doesn´t overlap the written message in compose box

Actual Result:

When the user is deleting a mention displayed on the second line of the compose box, and this mention is moved to the first line of the message, the suggestion box, is not moved and overlaps the message

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6618061_1727491687772.Mentions.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846354279628509557
• Upwork Job ID: 1846354279628509557
• Last Price Increase: 2024-10-16

Issue Owner

Current Issue Owner: @brunovjk

[melvin-bot]

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

[bernhardoj]

Proposal

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

When removing mention characters that makes the line reduces, the suggestion overlaps with the message.

What is the root cause of that problem?

The position of the suggestion is based on the invisible text here which renders value after caret (|) here.

App/src/components/Composer/index.tsx

Lines 346 to 354 in e44ba87

	<Text style={[StyleSheet.flatten([style, styles.noSelect]), StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), {maxWidth: textInputWidth}]}>
	{`${valueBeforeCaret} `}
	<Text
	numberOfLines={1}
	ref={textRef}
	>
	{`${caretContent}`}
	</Text>
	</Text>

The value after caret is updated on every selection change by taking the substring of the value state.

App/src/components/Composer/index.tsx

Lines 119 to 126 in e44ba87

	const addCursorPositionToSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
	const webEvent = event as BaseSyntheticEvent<TextInputSelectionChangeEventData>;
	if (shouldCalculateCaretPosition && isRendered) {
	// we do flushSync to make sure that the valueBeforeCaret is updated before we calculate the caret position to receive a proper position otherwise we will calculate position for the previous state
	flushSync(() => {
	setValueBeforeCaret((webEvent.target as HTMLInputElement).value.slice(0, webEvent.nativeEvent.selection.start));
	setCaretContent(getNextChars(value ?? '', webEvent.nativeEvent.selection.start));
	});

However, when the selection change is triggered, the value isn't updated yet. So, the value after caret (caretContent) contains an incorrect value. For example, if I type.

@bernhard.josephus+9999@ // first line
g // second line

The invisible text will also be 2 line. Then removes the last g, the selection change is triggered, but the value is still @bernhard.josephus+9999@g, so the value before caret is @bernhard.josephus+9999@ and the value after caret is g and because g is on the second line, the suggestion position overlaps the message.

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

We need to get the input value directly from the element just like what we did when calculating the value before caret.

App/src/components/Composer/index.tsx

Lines 123 to 126 in e44ba87

	flushSync(() => {
	setValueBeforeCaret((webEvent.target as HTMLInputElement).value.slice(0, webEvent.nativeEvent.selection.start));
	setCaretContent(getNextChars(value ?? '', webEvent.nativeEvent.selection.start));
	});

flushSync(() => {
    setValueBeforeCaret((webEvent.target as HTMLInputElement).value.slice(0, webEvent.nativeEvent.selection.start));
    setCaretContent(getNextChars((webEvent.target as HTMLInputElement).value ?? '', webEvent.nativeEvent.selection.start));
});

[melvin-bot]

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

[twisterdotcom]

Niche, so making only 125.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[brunovjk]

I couldn't reproduce it on Desktop Web, iOS mWeb and Android mWeb (v9.0.49-1) :

Screen.Recording.2024-10-16.at.11.55.53.mov

@lanitochka17 would you mind retesting? Thanks a lot.

[bernhardoj]

I think it's not repro anymore after #50711