[$500] Composer - Insertion pointer jumps to the end when entering emoji in the middle of message

[kavimuru]

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: 1.4.39-0
Reproducible in staging?: y
Reproducible in production?: n
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
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Add up to three emojis in composer
2. Bring Insertion pointer to the middle of the emojis
3. Add emoji from picker

Expected Result:

Insertion pointer should be next to the newly added emoji

Actual Result:

Insertion pointer is displayed at the end of the message

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Bug6372782_1707437632863.Screen_Recording_2024-02-09_at_3.12.57_at_night.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0123468df55b304b80
• Upwork Job ID: 1755776610237042688
• Last Price Increase: 2024-02-09

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

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

[melvin-bot]

Auto-assign attempt failed, all eligible assignees are OOO.

[yoyumiracle]

Proposal

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

Insertion pointer jumps to the end when entering emoji in the middle of message

What is the root cause of that problem?

Root cause of this problem maybe something affected to TextInput's pointer.

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

I think modify TextInput's onChange handle function will be solve problem.
Step1. Get current pointer of TextInput.
Step2. Compare if pointer is less or greater than TextInput's value length.
Step3. Set value of TextInput.
Step4. If Step2 result is "less" than set pointer current else set pointer to length of current value's length.

I can't test it in my eyes. I hope it would be help to fix problem

[mollfpr]

Root cause of this problem maybe something affected to TextInput's pointer.

@yoyumiracle Could explain more about this? What and where are the problems?

[yoyumiracle]

Could explain more about this? What and where are the problems?

updateMultilineInputRange(textInputRef.current, shouldAutoFocus);
I think composer component use this function. Function logic sometimes set comporser pointer to lastest of the input.
Unfortunately I can't test it. It's only depends on my code analysis. Please convince for that. Thanks.

[jcdiprose]

I cannot replicate this on dev. Must be already fixed

[yoyumiracle]

I cannot replicate this on dev. Must be already fixed

Sorry for misunderstanding. Will you check this code correct or not? It's code of updateMultilineInputRange function.

const updateMultilineInputRange: UpdateMultilineInputRange = (input, shouldAutoFocus = true) => {
    if (!input) {
        return;
    }

    if ('value' in input && input.value && input.setSelectionRange) {
        const length = input.value.length;

        // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
        // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
        // so we need to ensure that it is only updated after focus.
        const shouldSetSelection = !(Browser.isMobileSafari() && !shouldAutoFocus);
        if (shouldSetSelection) {
            input.setSelectionRange(length, length);
        }
        // eslint-disable-next-line no-param-reassign
        input.scrollTop = input.scrollHeight;
    }
};

[thienlnam]

Likely related to #35837

[thienlnam]

We've reverted the offending PR #35837, so this is no longer a blocker

[melvin-bot]

@thienlnam Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[thienlnam]

#36199 (comment)

[melvin-bot]

@thienlnam this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[Skalakid]

Hello, I created the fix for this issue inside live markdown library: Expensify/react-native-live-markdown#208. Once it's merged and most critical web markdown input issues will be fixed, we will bump the version of the library

[melvin-bot]

@thienlnam, @Skalakid Whoops! This issue is 2 days overdue. Let's get this updated quick!

[thienlnam]

PR still in review

[melvin-bot]

@thienlnam @Skalakid this issue is now 4 weeks old and preventing us from maintaining WAQ. This should now be your highest priority. Please post below what your plan is to get a PR in review ASAP. Thanks!

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @sobitneupane (Internal)

[melvin-bot]

@sobitneupane, @thienlnam, @Skalakid Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[thienlnam]

This should be fixed in react-live-markdown repo