[$250] Cursor is misplaced after pasting a multiline message on Description field in request Money flow.

[m-natarajan]

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: 1.4.73-0
Reproducible in staging?: y
Reproducible in production?: y
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: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1715584445797959

Action Performed:

1. Create a new money request via Submit expense.
2. Enter amount and go to confirmation page.
3. Click Description Now paste a multiple text.
4. Observe the cursor after text is pasted.

Expected Result:

Cursor should be at the end of pasted text.

Actual Result:

Cursor is at the second last character of the pasted text.

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

Recording.51.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b95c1756beba7a4b
• Upwork Job ID: 1790840678415347712
• Last Price Increase: 2024-05-22

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[alexrasla]

Proposal

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

The cursor in the description field of the Submit expense model does not render at the end of the input text when we paste multiple lines

What is the root cause of that problem?

The root cause of the problem is that we are treating the input field as an HTML input element, when it is really a content-editable div`

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

We need to check whether the input variable passed in updateMultilineInputRange is a input HTML element, or a content-editable div. If it is a input element, use the same functionality we have now, but if it is a content-editable div, we want to utilize the document.createRange and window.getSelection functions to move the cursor to the end of the content-editable div value. This is a solution that works with content-editable divs, and will be further optimized if my proposal is selected:

if (shouldAutoFocus && document.createRange && window.getSelection) {
        const range = document.createRange();
        range.selectNodeContents(input);
        range.collapse(false); // false means collapse to end (true would be collapse to start)
        const selection = window.getSelection();
        if (selection) {
            selection.removeAllRanges();
            selection.addRange(range);
        }
        // eslint-disable-next-line no-param-reassign
        input.scrollTop = input.scrollHeight;
    }

[Christinadobrzyn]

Hey @rushatgabhane do you think this issue has the same root? Can they be fixed together?

[MOONSTAR-TOP-DEV]

I can't reproduce on staging.

[melvin-bot]

📣 @moonstar-95515! 📣
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>

[parasharrajat]

Use following steps:

1. On the description page.
2. Write Github issue.
3. Then copy the title of any issue from GitHub like this one and paste it in the field.
4. Notice the cursor.

[MOONSTAR-TOP-DEV]

@parasharrajat
Still can't reproduce it.

Then copy the title of any issue from GitHub like this one and paste it in the field.

Could you please add example GitHub issue title?

[parasharrajat]

Looks like this is fixed. I can't reproduce on staging.

[rushatgabhane]

agree, can't repro this issue on staging

[johncschuster]

Great! Thanks for confirming that! Can we close this one?

[rushatgabhane]

@johncschuster yes

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@johncschuster @rushatgabhane this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@johncschuster, @rushatgabhane Eep! 4 days overdue now. Issues have feelings too...