[WAITING ON EUGENE] [$1000] Cursor jumps to next position when we use ',' in request money when language is English (or if using '.' in Spanish)

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

---

Action Performed:

1. Open the app
2. Ensure that app language is English
3. Click on plus and click on request money / split bill
4. Add any amount, try to insert ',' (comma) in 2nd last or 3rd last position, app doesn't insert a cursor but jumps positions
5. Try to insert any other symbol like '=,+,|,?' in 2nd last or 3rd last position and app won't allow the symbol to insert but will keep the cursor position same
6. Switch to Spanish language mode.
7. Try to insert '.' (period) in 2nd last or 3rd last position and observe that app will jump the cursor one position ahead every time if the language is set to Spanish

Expected Result:

App should not change cursor position when we try to insert ',' in amount for English language OR '.' in amount for Spanish language in request money / split bill

Actual Result:

App changes cursor position when we try to insert ',' in amount for English language OR '.' in amount for Spanish language in request money / split bill

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 / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.47-3
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
Notes/Photos/Videos: Any additional supporting documentation

cursor.position.jump.on.fullstop.or.comma.mp4

Recording.1412.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690268210124929

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b976c4c3347bca34
• Upwork Job ID: 1686553611490000896
• Last Price Increase: 2023-08-09
• Automatic offers:
• samh-nl | Contributor | 26109224
• dhanashree-sawant | Reporter | 26109226

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[samh-nl]

Proposal

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

Cursor jumps to next position when we use ',' in request money when language is English

What is the root cause of that problem?

We are updating the cursor position using the non-comma stripped amount and subsequently strip the comma from the amount.
Therefore, the new cursor position is based on the incorrect (longer) value, leading it to jump to the next position.

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

Lines 315 to 318 in 0fb8709

	setAmount((prevAmount) => {
	setSelection((prevSelection) => getNewSelection(prevSelection, prevAmount.length, newAmountWithoutSpaces.length));
	return stripCommaFromAmount(newAmountWithoutSpaces);
	});

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

We should use the stripped amount for updating the cursor position, e.g.:

...
const strippedAmount = stripCommaFromAmount(newAmountWithoutSpaces);
setSelection((prevSelection) => getNewSelection(prevSelection, prevAmount.length, strippedAmount.length));
return strippedAmount;
...

This also fixes it for the Spanish scenario.

What alternative solutions did you explore? (Optional)

Ignoring event default behavior if the key is pressed, however this would require adding an extra handler.

[jliexpensify]

@kavimuru can you re-test on v1.3.48-0? I can't seem to enter a comma when requesting money or splitting a bill.

[samh-nl]

@jliexpensify I've reproduced it on staging (v1.3.48-0). There are constraints to this bug, for example the cursor must not be placed at the beginning of the amount.

[jliexpensify]

@samh-nl can you share a video? I can't get a cursor to show at all on my end :(

I'm on v1.3.48-4

[kavimuru]

@jliexpensify Here is the video.

Recording.1425.mp4

[jliexpensify]

Thanks, that video helps - I've edited the GH issue and can repro.