[PAID] [$250] Composer - Console error shows up when pasting the same text in the composer

[izarutskaya]

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: 9.0.54-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh2010001@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Type anything in the composer.
3. Highlight all the content.
4. Copy the content.
5. While the content is still highlighted, paste the same content.

Expected Result:

No console error will show up.

Actual Result:

Console error shows up when pasting the same text in the composer

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6645374_1729849788350.error.mp4

Bug6645374_1729849788357!staging.new.expensify.com-1729840230855.txt

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021851405996383084182
• Upwork Job ID: 1851405996383084182
• Last Price Increase: 2024-10-29
• Automatic offers:
• jjcoffee | Reviewer | 104665940
• nkdengineer | Contributor | 104665943

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[NJ-2020]

Proposal

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

Composer - Console error shows up when pasting the same text in the composer

What is the root cause of that problem?

When we pasting the same text into the composer, the handleOnChangeText function get invoked

We use the parseInnerHTMLToText function to parse from innerHTML to text value and pass the inputType value here

When pasting the same text the inputType value returns undefined value
Inside the parseInnerHTMLToText function we check if there's no changes inside the input value and the inputType value contains delete value then we will run the below code:

if (text === target.value && inputType.includes('delete')) {
  text = text.slice(0, cursorPosition - 1) + text.slice(cursorPosition);
}

The RCA is on the if the condition, when we paste the same text, the if condition will check if the input value doest not change and the inputType value contains delete then we will run the above code

Since inputType value is undefined, we did not add ? before using the includes method it will throw an error

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

We should add ? before the includes method

if (text === target.value && inputType?.includes('delete')) {
  text = text.slice(0, cursorPosition - 1) + text.slice(cursorPosition);
}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[strepanier03]

Reproduced without issue,

Figuring out project now.

[strepanier03]

cursorUtils.js:24 Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 62 is larger than the node's length (0).
at A (cursorUtils.js:24:11)
at MarkdownTextInput.web.js:366:9
at Object.Te (react-dom.production.min.js:54:317)
at $e (react-dom.production.min.js:54:471)
at react-dom.production.min.js:55:35
at Fr (react-dom.production.min.js:105:68)
at Lr (react-dom.production.min.js:106:380)
at react-dom.production.min.js:117:104
at ll (react-dom.production.min.js:273:42)
at De (react-dom.production.min.js:52:375)

[melvin-bot]

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