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