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