IOU - The backspace button on the keypad only deletes one digit at a time, not the entire number

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

---

Action Performed:

1. Open the android app
2. Tap on FAB
3. Open request money or split bill
4. Write amount and hold backspace button

Expected Result:

Holding the backspace button should clear the whole text not one digit only

Actual Result:

Holding backspace deletes only one digit

Workaround:

Unknown

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.55-7

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

20230810_112618.mp4

0-02-01-d4ddc746cc2da94e93bc686208bb75e460fcb6c698e25a2bddc18165774a6b5c_670f83f42bdbbdde.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: @jo-ui

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691655815906349

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @garrettmknight (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

[rayane-d]

Proposal

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

When users interact with the IOU feature, specifically within the "request money" or "split bill" sections, holding down the backspace button on the keypad does not consistently clear the entire amount. Instead, it only deletes a single digit.

What is the root cause of that problem?

Upon refactoring the BigNumberPad component from a class component to a functional component, the expected behavior of the backspace button was altered. The distinct behaviors between class and function components in React played a pivotal role:

• Class Component: In the class component version of BigNumberPad, methods continuously accessed the most recent properties through this.props.

• Function Component: In contrast, the functional component captures specific states for each render. The root cause can be traced back to the function component's closures in JavaScript. Specifically, when the handleLongPress function establishes an interval to manage continuous deletion, it locks onto the state of the numberPressed prop at that exact instance. Consequently, if the props were to update post interval creation, the enclosed function within the interval persists in referencing the outdated prop, culminating in the reported behavior.

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

To ensure that holding down the backspace button continuously deletes digits until the entire amount is cleared, I propose the following:

• Implement the useRef hook from React in the BigNumberPad component to track the latest numberPressed callback.
• Update this reference whenever the numberPressed prop changes.
• Within the handleLongPress function, modify the setInterval to use the numberPressed function from the ref.

By implementing these changes, the backspace button's hold-down functionality will consistently and continuously delete digits, aligning with user expectations.

const numberPressedRef = useRef(props.numberPressed);

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

const handleLongPress = (key) => {
    if (key !== '<') {
        return;
    }

    props.longPressHandlerStateChanged(true);

    const newTimer = setInterval(() => {
        numberPressedRef.current(key);
    }, 100);
    setTimer(newTimer);
};

Result:

backspace.mp4

What alternative solutions did you explore? (Optional)

N/A

[rayane-d]

The bug is also occuring in iOS / native

[garrettmknight]

While this behavior might have changed, it's consistent across all platforms that I tested and I don't think it's necessarily unintended. Feel free to find more consensus on whether this is a bug, but I'm going to close for now.

[jo-ui]

@garrettmknight Although the behavior may be consistent across all platforms, holding the backspace key works smoothly on the web but not on mweb, Android, and iOS. To ensure a better user experience, holding the backspace key should be handled more efficiently on these platforms.

[jo-ui]

@rayane-djouah what is your idea on this.

[rayane-d]

@garrettmknight
I'd like to reiterate a few points to emphasize the importance of addressing this issue:

• Code Analysis: The handleLongPress function in the BigNumberPad.js file was designed to handle long presses on the number pad. However, its current implementation only triggers the backspace action one time, rendering it essentially as dead code. This function, in its current state, does not clear multiple numbers when the backspace key is held down; it merely deletes a single digit. This behavior diverges from the original intent behind how this function was designed.

• User Expectation: In numerous applications, holding down the backspace button clears the entire input. This behavior has become a standard user expectation. Our current implementation, which deletes only one digit, can be confusing and frustrating for users, especially those accustomed to the standard behavior.

Given the above points and the solution I've proposed, I believe it's in our best interest to address this issue promptly. It's not merely about fixing a bug; it's about enhancing the user experience and ensuring that our application is as user-friendly and intuitive as possible.

If necessary, we can open a discussion in Slack to delve deeper into this matter.

Thank you for considering this, and I look forward to further discussions.

[rayane-d]

@garrettmknight @jo-ui I've asked in slack https://expensify.slack.com/archives/C01GTK53T8Q/p1692730609975499