Use left/right arrow keys to move cursor in IOUAmountPage

[rushatgabhane]

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. Request money to any user.
2. Enter an amount.
3. Use left/right arrow key to move the cursor.

Expected Result:

The cursor on the amount should move with left/right arrow key press.

Actual Result:

Arrow keys don't move the cursor.

Workaround:

Use backspace key to modify amount.

Platform:

Where is this issue occurring?

Web ✔
iOS
Android
Desktop App ✔
Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @conorpendergrast (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[rushatgabhane]

Proposal

Replace onKeyPress prop with onChangeText prop to handle amount changed.

onChangeText={(amount) => {
     // Regex to validate decimal number with up to 3 decimal numbers
    const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i');
    if (amount != '' && !decimalNumberRegex.test(amount)) {
        return;
    }
    this.setState({amount});
}}

https://github.com/Expensify/Expensify.cash/blob/a1c742c194084b6b65c3f29225d25d3cfe08cce4/src/pages/iou/steps/IOUAmountPage.js#L162-L172

Works fine on initial testing.

NEW.Expensify.cash.-.Google.Chrome.2021-06-29.03-11-09.mp4

[conorpendergrast]

Reproduced, agreed that this is worth fixing. I don't have a comment on the proposed solution here - moving to Engineering for triage!

[MelvinBot]

Triggered auto assignment to @TomatoToaster (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[TomatoToaster]

Feels like a classic external ticket to me.

[MelvinBot]

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

[jliexpensify]

Posted: https://www.upwork.com/jobs/~01a3bdaa0904a69a95

[MelvinBot]

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

[jliexpensify]

@roryabraham - got a proposal from @rushatgabhane already, if you could take a look. Cheers!

[roryabraham]

Solution seems perfectly reasonable to me @rushatgabhane!

@jliexpensify let's get @rushatgabhane hired on Upwork.

@rushatgabhane feel free to submit a pull request as soon as you've been hired on Upwork. Since I reviewed the proposal, please request a review from me when you submit the pull request. Thanks!

[jliexpensify]

Hired @rushatgabhane - cheers!

[jliexpensify]

Deployed, and paid @rushatgabhane - thanks!