[HOLD for payment 2024-05-02] [$250] Taxes - Cursor continues to move after deleting one digit when long pressing on delete key

[lanitochka17]

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.57-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #38733

Action Performed:

Precondition:

• User is admin of Collect workspace

1. Go to staging.new.expensify.com
2. Go to Profile > Workspaces > Collect workspace
3. Go to Taxes > Add rate > Value
4. Enter 12.3456
5. Long press on delete key on BNP

Expected Result:

Long pressing on delete key will delete one digit and the cursor will not continue to move backward (BNP on request money flow behavior)

Actual Result:

The cursor continues to move backward after deleting one digit when long pressing on delete key

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

Bug6428790_1711551303837.RPReplay_Final1711551028.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01629df1846fc38b09
• Upwork Job ID: 1777700152991117312
• Last Price Increase: 2024-04-09
• Automatic offers:
• jayeshmangwani | Reviewer | 0
• FitseTLT | Contributor | 0

[melvin-bot]

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

[lanitochka17]

@miljakljajic FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[FitseTLT]

Proposal

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

Taxes - Cursor continues to move after deleting one digit when long pressing on delete key

What is the root cause of that problem?

For BigNumPad when we long press < numberPressed is recalled every 100ms using interval

App/src/components/BigNumberPad.tsx

Lines 49 to 50 in b27be0f

	numberPressed(key);
	}, 100);

And for taxes in this case we recalculate selection according to the new amount vs the currentAmount

App/src/components/AmountForm.tsx

Lines 114 to 115 in b27be0f

	setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedAmount.length : currentAmount.length, strippedAmount.length));
	onInputChange?.(strippedAmount);

But the problem lies here because the function is called via interval it doesn't have the latest edition of currentAmount so all the way during the long pressing it will hold the amount before the back press and the strippedAmount holds one digit deleted from currentAmount so it decrements the selection start and end continously according to this code

App/src/components/AmountForm.tsx

Lines 50 to 51 in b27be0f

	const cursorPosition = oldSelection.end + (newLength - prevLength);
	return {start: cursorPosition, end: cursorPosition};

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

BTW although I explained how the cursor is moving for taxes case the main problem is that long press is not working in BigNumPad (in all places even in money request amount) although originally built for < to continously delete digits. And Root cause is setInterval calling obsolete callbacks

The solution lies in understanding the problem. In BigNumPad we have built a long press mechanism for < deletion key but it is not working for all cases (even for money request also) because of the reason I mentioned above. so we need to make the setInterval callback to be feed with the uptodate callback passed to the BigNumPad component so that it will receive the latest values of the component states and props then the long press will be working.
Inside BigNumPad we add this to

const numberPressedRef = useRef(numberPressed);

    useEffect(() => {
        numberPressedRef.current = numberPressed;
    }, [numberPressed]);

    /**
     * Handle long press key on number pad.
     * Only handles the '<' key and starts the continuous input timer.
     */
    const handleLongPress = (key: string) => {
        if (key !== '<') {
            return;
        }

        longPressHandlerStateChanged(true);

        const newTimer = setInterval(() => {
            numberPressedRef.current?.(key);

So that the interval callback will be the right and latest value
Now in any place we utilize BigNumPad if we don't want to enable long pressing we can disable it via the prop isLongPressDisabled as it is by default false

What alternative solutions did you explore? (Optional)

[miljakljajic]

shared in BZ for discussion

[FitseTLT]

@miljakljajic BTW The title of the issue is a little misleading the bug is more serious than what is depicted in the title: the bug is not just hold pressing the delete key moves the cursor all the way to the left unlike money request amount equivalent Num Pad, but the hold pressing first designed to continuously delete digits is broken as a whole. Only for the reason I mentioned in my RCA is that we are seeing different behaviours in this taxes num pad and money request num pad. Both are broken and the fix should be to make the holding of the button delete the digits continously.

[melvin-bot]

@miljakljajic Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01629df1846fc38b09

[melvin-bot]

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

[miljakljajic]

I agree, let's get this fixed. Added the external label.

[melvin-bot]

@miljakljajic @jayeshmangwani this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[jayeshmangwani]

Evaluating proposal

[jayeshmangwani]

@FitseTLT If we applied your proposal changes, then the long press on the request money should delete the numbers, right?
But, I have applied your changes to the src/components/BigNumberPad.tsx but I am seeing no difference in the long press for Request Money number pad

request-money-number-pad.mov

[FitseTLT]

Here is the test branch and here is the result

2024-04-11.16-36-48.mp4

[jayeshmangwani]

@FitseTLT Thanks for the test branch. It's now working fine on my side, too. I'm not sure why it didn't work before; maybe my iOS is flaky from yesterday.

@FitseTLT 's Proposal LGTM, After fixing the currentAmount value using the ref, it will long press will also work in the request money.

Rate Input After Adding the Proposed Changes:

tax-rate.mov

Request Money After Adding the Proposed Changes:

request-money.mov

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[chiragsalian]

Proposal LGTM, feel free to create a PR @FitseTLT.

[melvin-bot]

📣 @jayeshmangwani 🎉 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]

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

[FitseTLT]

PR will be up in 2 days

[miljakljajic]

Thank you!

[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.65-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix numpad longpress back key #40288

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

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

• @jayeshmangwani requires payment automatic offer (Reviewer)
• @FitseTLT 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:

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR:
• [@jayeshmangwani] 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:
• [@jayeshmangwani] 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:
• [@jayeshmangwani] Determine if we should create a regression test for this bug.
• [@jayeshmangwani] 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.
• [@miljakljajic] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[jayeshmangwani]

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR: Transform BigNumberPad.js from class component to functional one #20231
• [@jayeshmangwani] 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: https://github.com/Expensify/App/pull/20231/files#r1590983061
• [@jayeshmangwani] 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: N/A
• [@jayeshmangwani] Determine if we should create a regression test for this bug.
• [@jayeshmangwani] 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 Proposal

1. Open the App and Go to Profile > Workspaces > Collect workspace
2. Go to Taxes > Add rate > Value
3. Enter 12.3456
4. Press and hold on the delete button from NumPad
5. Verify that digits get deleted continuously For Android And iOS, And For Mobile web, it will only delete the last digit

Do we agree 👍 or 👎

[miljakljajic]

Accepted regression test proposal and paid/ended both contracts. Thank you all!