[$1000] Chat - Cursor does not remain the same place when Edit message

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to staging.new.expensify.com.
2. Send a message that includes several emojis
3. Edit the message with the several emojis
4. Remove some emoji and click on emoji picker inside the edit box
5. Add new emoji

Expected Result:

New emoji should be added in field where the cursor was pointed

Actual Result:

Cursor does not remain the same place when Edit message. New emoji is added at the end of the message instead on the place where the cursor was last pointed

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• Windows / Chrome
• MacOS / Desktop

Version Number: 1.3.55-0

Reproducible in staging?: Yes

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6168233_Recording__749.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b02b907f187853cd
• Upwork Job ID: 1692313936551825408
• Last Price Increase: 2023-08-17
• Automatic offers:
• Nikhil-Vats | Contributor | 26187092
• situchan | Contributor | 26187097

[OSBotify]

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

[melvin-bot]

Triggered auto assignment to @neil-marcellini (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[getusha]

Proposal

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

Cursor is not remaining on it's place when inserting emoji

What is the root cause of that problem?

there is a prop to enable the calculation of the caret position, and it utilizes renderElementForCaretPosition text to calculate the caret position, when we use useRef the default value is null, when we reach here:

App/src/components/Composer/index.js

Lines 207 to 208 in b7fdbcb

	positionX: textRef.current.offsetLeft - CONST.SPACE_CHARACTER_WIDTH,
	positionY: textRef.current.offsetTop,

we are trying to access a value from null which will prevent onSelectionChange from being executed below

App/src/components/Composer/index.js

Line 450 in 9474292

{shouldCalculateCaretPosition && renderElementForCaretPosition}

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

We should add shouldCalculateCaretPosition prop to Composer inside ReportActionItemMessageEditcomponent

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

Line 346 in 9474292

<Composer

Alternatively we can add a check if textRef is defined and calculate the position accordingly to prevent null value.
Will be something like this:

        const selectionValue = {
            ...
            positionX: textRef.current ? textRef.current.offsetLeft - CONST.SPACE_CHARACTER_WIDTH : undefined,
            positionY: textRef.current ? textRef.current.offsetTop : undefined,
        };

What alternative solutions did you explore? (Optional)

[situchan]

there is a prop to enable the calculation of the caret position, but in recent migration to function component the default value of the prop is set to false

@getusha shouldCalculateCaretPosition default value was already false before function migration. If your root cause is correct, do you know why it didn't happen before?

[getusha]

@situchan updated my proposal explaining the root cause further
#25413 (comment)

[Nikhil-Vats]

Proposal

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

Chat - Cursor does not remain the same place when Edit message

What is the root cause of that problem?

The logic of this function was changed -

App/src/components/Composer/index.js

Lines 195 to 216 in 5a1b35c

	const addCursorPositionToSelectionChange = (event) => {
	if (shouldCalculateCaretPosition) {
	// 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(event.target.value.slice(0, event.nativeEvent.selection.start));
	setCaretContent(getNextChars(value, event.nativeEvent.selection.start));
	});
	}
	const selectionValue = {
	start: event.nativeEvent.selection.start,
	end: event.nativeEvent.selection.end,
	positionX: textRef.current.offsetLeft - CONST.SPACE_CHARACTER_WIDTH,
	positionY: textRef.current.offsetTop,
	};
	onSelectionChange({
	nativeEvent: {
	selection: selectionValue,
	},
	});
	setSelection(selectionValue);
	};

Earlier, if shouldCalculateCaretPosition was false then we just used the event parameter without changing it to a custom event and called onSelectionChange function from prop passing event.

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

We should use the same logic, change the function to -

const addCursorPositionToSelectionChange = (event) => {
    if (shouldCalculateCaretPosition) {
        // 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(event.target.value.slice(0, event.nativeEvent.selection.start));
            setCaretContent(getNextChars(value, event.nativeEvent.selection.start));
        });

        const selectionValue = {
            start: event.nativeEvent.selection.start,
            end: event.nativeEvent.selection.end,
            positionX: textRef.current.offsetLeft - CONST.SPACE_CHARACTER_WIDTH,
            positionY: textRef.current.offsetTop,
        };
        onSelectionChange({
            nativeEvent: {
                selection: selectionValue,
            },
        });
        setSelection(selectionValue);
        return;
    }

    onSelectionChange(event);
    setSelection(event.nativeEvent.selection);
};

What alternative solutions did you explore? (Optional)

Alternatively, we can pass shouldCalculateCaretPosition in ReportActionMessageEdit.

[Nikhil-Vats]

Hey @situchan, the logic of that function was changed which changed the behaviour of composer when shouldCalculateCaretPosition was set to false which resulted in the regression. shouldCalculateCaretPosition was always false in case of message edit.

You can check here that when shouldCalculateCaretPosition was false the logic of the function is completely different and we should change it back to that as it works for both cases.