[HOLD for payment 2024-02-07] [$500] IOU - In BNP, cursor displayed but unable to paste if amount already entered

[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.25.1
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:

Action Performed:

1. Launch app
2. Tap fab--- request money
3. Enter 2 digit amount
4. Select & copy the amount
5. Note the cursor shown next to 2 digit amount.
6. Try to paste the amount.

Expected Result:

In BNP, if cursor displayed user should be able to paste even if amount already entered.

Actual Result:

In BNP, cursor displayed but unable to paste if amount already entered.

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

Bug6343367_1705344738384.az_recorder_20240115_230006.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bfa5ca43b4c5842c
• Upwork Job ID: 1746995156396044288
• Last Price Increase: 2024-01-15
• Automatic offers:
• akinwale | Reviewer | 28114560
• tienifr | Contributor | 28114561

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Ykumar1415]

I tried tried to produce the issue in my local dev environment and found the same.

[melvin-bot]

📣 @Ykumar1415! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[tienifr]

Proposal

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

In BNP, cursor displayed but unable to paste if amount already entered.

What is the root cause of that problem?

We don't have any padding at all on the text input, so the area at the end of the text input is very hard to click. This leads to the user unable to trigger the Paste functionality to paste the text, because if the cursor is already there, to trigger the Context menu the user needs to click at the exact cursor location.

Can see below (I added background colors to see easily)

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

Add a small paddingRight (5) to the input.

If we worry about this affecting the design, we can add a paddingLeft of the same value to the currency button, this will lead to the style being perfectly the same because the element containing the currency button and the amount input are centered on the screen.

After the change we can see the cursor at the end of the input has the space to breathe now and the click behavior is now normal

What alternative solutions did you explore? (Optional)

NA

[conorpendergrast]

Ok, got it - so if I'm right the problem is that you can tap directly on the existing text to paste over that, but you can't tap after the number to past after it.

I am confirming if this should be part of one of our VIP projects via an internal channel.

@akinwale how does @tienifr's proposal look?

[akinwale]

@tienifr's proposal correctly identifies the problem and the proposed solution is adequate.

@tienifr You would need to also test with the text field containing the max length of digits (10, iirc) to make sure that the padding does not cut off digits at the edges.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @tienifr 🎉 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 📖

[thienlnam]

Just assigned - not overdue

[tienifr]

PR ready for review #34941.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.33-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Amount text input is hard to paste #34941

If no regressions arise, payment will be issued on 2024-02-07. 🎊

For reference, here are some details about the assignees on this issue:

• @akinwale requires payment automatic offer (Reviewer)
• @tienifr requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@akinwale] The PR that introduced the bug has been identified. Link to the PR:
• [@akinwale] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@akinwale] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@akinwale] Determine if we should create a regression test for this bug.
• [@akinwale] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@conorpendergrast] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[conorpendergrast]

Payouts due:

• Contributor: $500 @tienifr - contract
• Contributor+: $500 @akinwale - contract

Upwork job is here.

[conorpendergrast]

All paid; just the C+ checklist now please @akinwale!

[akinwale]

• [@akinwale] The PR that introduced the bug has been identified. Link to the PR:
• [@akinwale] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@akinwale] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

Not a regression. Just an edge (😁) case with the input area not being wide enough to handle long presses.

• [@akinwale] Determine if we should create a regression test for this bug.
• [@akinwale] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Steps

• Launch the Expensify app on Android
• Open the global create menu and select Request money
• Select the Manual tab if it is not already active
• Enter any amount
• Long-press at the end of the amount
• Verify that the context menu easily shows up

Do we agree 👍 or 👎?

[conorpendergrast]

Lovely stuff, thanks @akinwale. I've created the regression test request here: https://github.com/Expensify/Expensify/issues/367899