[PAYMENT 3/4][$500] iOS - IOU - The cursor appears at random locations after pasting

[kbecciv]

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.33.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: Applause- Internal Team
Slack conversation:

Issue found when executing PR #35119

Action Performed:

1. Tap FAB - Request money
2. Type "22222"
3. Copy any single digit number "7"
4. Drag, select & try to replace last number in step 3 by pasting "7"
5. Drag, select & try to replace first number in step 3 by pasting "7"
6. Drag, select & try to replace middle number in step 3 by pasting "7"
7. Now drag, select & try to replace remaining digit by pasting "7"

Expected Result:

It should be appearing right after the paster number.

Actual Result:

The cursor appears at random locations after pasting.

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

Bug6361115_1706634381199.JSTP7179.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0180563495c94b9556
• Upwork Job ID: 1752383457329037312
• Last Price Increase: 2024-01-30
• Automatic offers:
• bernhardoj | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[bernhardoj]

Proposal

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

Pasting a number on the money request input moves the selection to the left.

What is the root cause of that problem?

When we set a selection that is larger than the input value length, the selection will be put on the left. You can test this by having a button that will set the selection to a number that is larger than the current input value length.

In our case, when we paste something to the amount input that has a value, a whitespace is also added. This behavior is also found on this old issue. So, the total length of the input is added by 1 because of the whitespace, but we strip the space from the input.

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 143 to 147 in 4e88eea

	const setNewAmount = useCallback(
	(newAmount) => {
	// Remove spaces from the newAmount value because Safari on iOS adds spaces when pasting a copied value
	// More info: https://github.com/Expensify/App/issues/16974
	const newAmountWithoutSpaces = MoneyRequestUtils.stripSpacesFromAmount(newAmount);

So, if the input is "2(whitespace)5", the new input state will be "25" and the value is updated before onSelectionChange is called, so when the selection change is called, it will try to update the selection to be 3, but the length is only 2.

Btw, to reproduce it easier, you can just type a number to the input then paste anything afterwards.

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

We can clamp the selection value so it doesn't set a value larger than the current input length.

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 295 to 300 in 4e88eea

	onSelectionChange={(e) => {
	if (!shouldUpdateSelection) {
	return;
	}
	setSelection(e.nativeEvent.selection);
	}}

const maxSelection = formattedAmount.length;
const start = Math.min(e.nativeEvent.selection.start, maxSelection);
const end = Math.min(e.nativeEvent.selection.end, maxSelection);
setSelection({start, end});

What alternative solutions did you explore? (Optional)

We can ignore the selection change if there is any update with the amount (because we already handle it manually). There is a shouldUpdateSelection but it's also being used for long press, so I think it's better to create a new state to temporarily ignore the selection change event and re-enable it after we ignore it.

const setNewAmount = useCallback(
    (newAmount) => {
        setShouldTemporaryIgnoreSelection(true);
...
onSelectionChange={() => {
    if (shouldTemporaryIgnoreSelection) {
        setShouldTemporaryIgnoreSelection(false);
        return;
    }

I guess ref would be more performant

[CortneyOfstad]

@rushatgabhane any thoughts on the proposal above?

[rushatgabhane]

@bernhardoj's proposal fixes the root cause #35420 (comment)
🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @tylerkaraszewski, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[CortneyOfstad]

@bernhardoj any update on the PR? Thank you!

[bernhardoj]

@CortneyOfstad I'm waiting to get assigned first

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @rushatgabhane

[CortneyOfstad]

@rushatgabhane @bernhardoj any update on the PR/review? Thanks!

[CortneyOfstad]

PR shows it is in staging as of 3 days ago. Will continue to keep an eye on this.

[CortneyOfstad]

PR in production as of 2 days ago 👍

[melvin-bot]

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

[CortneyOfstad]

Hey @trjExpensify! I am heading OoO and will be back March 11th, so reassigned to have someone keep this moving until I am back. At this stage, the PR here went into production 3 days ago. If there are no regressions, the payment is set for Monday, March 4. Payment breakdown is below:

Payment Summary

@bernhardoj — $500 to be paid in Upwork
@rushatgabhane — $500 to be paid in NewDot

[rushatgabhane]

https://staging.new.expensify.com/r/4222149771653350 money request here

[JmillsExpensify]

$500 approved for @rushatgabhane based on summary above.

[trjExpensify]

Paid $500 out @bernhardoj based on the payment summary here. @rushatgabhane confirmed to have requested, closing.