[HOLD for payment 2021-12-27] Feature Request - IOU - Holding down the delete button should continually delete the amount - Reported by: @kakajann

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Navigate to a conversation
2. Start the Request money flow
3. Type some amount with several digits
4. Press and hold the delete button

Expected Result:

Holding down the delete button should continually delete the amount

Actual Result:

Holding down the delete button doesn't continually delete the digits. User has to press each time to delete a single number.

Workaround:

None needed, button is deleting the amount.

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.1.17-2

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20211130-171944_New.Expensify.mp4

Expensify/Expensify Issue URL:

Issue reported by: @kakajann
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1638274892063400

View all open jobs on GitHub

[MelvinBot]

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

[dklymenk]

If you decide to make this one external I would like submit a proposal:

To implement the expected behaviour described in the first post on this issue, we can utilize the props onLongPress and onPressOut of the react native Pressable component.

onLongPress we would start the interval timer that would delete symbols one by one and onPressOut we would call clearInterval on it.

Here is a sample code:

1. First we'll need to pass the props for new event handlers from IOUAmountPage through BigNumberPad to Button component.

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 26299c661..272155c28 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -8,6 +8,17 @@ import Button from './Button';
 const propTypes = {
     /** Callback to inform parent modal with key pressed */
     numberPressed: PropTypes.func.isRequired,
+
+    /** TODO */
+    numberLongPressed: PropTypes.func,
+
+    /** TODO */
+    numberPressOut: PropTypes.func,
+};
+
+const defaultProps = {
+    numberLongPressed: () => {},
+    numberPressOut: () => {},
 };

 const padNumbers = [
@@ -30,7 +41,9 @@ const BigNumberPad = props => (
                             key={column}
                             style={[styles.flex1, marginLeft]}
                             text={column}
+                            onLongPress={() => props.numberLongPressed(column)}
                             onPress={() => props.numberPressed(column)}
+                            onPressOut={props.numberPressOut}
                         />
                     );
                 })}
@@ -41,5 +54,6 @@ const BigNumberPad = props => (

 BigNumberPad.propTypes = propTypes;
 BigNumberPad.displayName = 'BigNumberPad';
+BigNumberPad.defaultProps = defaultProps;

 export default BigNumberPad;
 diff --git a/src/components/Button.js b/src/components/Button.js
index 8e346c963..da0b8cca3 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -32,6 +32,12 @@ const propTypes = {
     /** A function that is called when the button is clicked on */
     onPress: PropTypes.func,

+    /** TODO */
+    onLongPress: PropTypes.func,
+
+    /** TODO */
+    onPressOut: PropTypes.func,
+
     /** Call the onPress function when Enter key is pressed */
     pressOnEnter: PropTypes.bool,

@@ -68,6 +74,8 @@ const defaultProps = {
     small: false,
     large: false,
     onPress: () => {},
+    onLongPress: () => {},
+    onPressOut: () => {},
     pressOnEnter: false,
     style: [],
     textStyles: [],
@@ -158,6 +166,8 @@ class Button extends Component {
         return (
             <Pressable
                 onPress={this.props.onPress}
+                onLongPress={this.props.onLongPress}
+                onPressOut={this.props.onPressOut}
                 disabled={this.props.isLoading || this.props.isDisabled}
                 style={[
                     this.props.isDisabled ? styles.cursorDisabled : {},
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index 5f5c2a0ff..4e4b8678e 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -74,6 +74,8 @@ class IOUAmountPage extends React.Component {
         super(props);

         this.updateAmountNumberPad = this.updateAmountNumberPad.bind(this);
+        this.handleLongPressNumberPad = this.handleLongPressNumberPad.bind(this);
+        this.clearDeletionTimer = this.clearDeletionTimer.bind(this);
         this.updateAmount = this.updateAmount.bind(this);
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
         this.focusTextInput = this.focusTextInput.bind(this);
@@ -211,6 +213,8 @@ class IOUAmountPage extends React.Component {
                         ? (
                             <BigNumberPad
                                 numberPressed={this.updateAmountNumberPad}
+                                numberLongPressed={this.handleLongPressNumberPad}
+                                numberPressOut={this.clearDeletionTimer}
                             />
                         ) : <View />}

2. Then an actual implementation for the feature would look like this:

    /**
     * TODO
     *
     * @param {String} key
     */
    handleLongPressNumberPad(key) {
        // Backspace button is pressed
        if (key !== '<') {
            return;
        }

        const timer = setInterval(() => {
            this.setState(prevState => ({
                amount: prevState.amount.slice(0, -1),
            }));
        }, 100);

        this.setState({timer});
    }

    /**
     * TODO
     */
    clearDeletionTimer() {
        clearInterval(this.state.timer);
    }

Note that I am only checking for the < key and ignoring the actual keyboard Backspace since on the desktop the default sticky keys behaviour is already doing what we are looking for.

Here is a sample video:

6547-demo.mp4

[MelvinBot]

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

[bondydaa]

posted in our internal slack about how we'd prefer to do this: only allow holding backspace/delete or allow all buttons to repeat if you hold them down.

I'm thinking only delete probably makes most sense but wanted to get a gut check there first.

[bondydaa]

my thread didn't gain much traction but at least @marcochavezf chimed in and agreed only the backspace/delete button should be able to repeat via holding it down.

I think this is fine for a contributor to work on, I'm not super familiar with this code base but I would guess we already have some key event listeners which are blocking the repeat event, unless it's a react native thing (?), because at least on web the default behavior is that keydown events repeat.

said differently: I'm not privy enough with this code base to know if @dklymenk suggestion is the right way or not so another engineer who's more familiar should review instead of me.

[MelvinBot]

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

[bfitzexpensify]

Upwork posting

[MelvinBot]

Triggered auto assignment to @parasharrajat (Exported)

[MelvinBot]

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

[iwiznia]

Yeah, saw that, but we would still set the timeout... I guess web is the platform we less care about those as I think those have a higher performance impact in mobile, but I think it would be possible to only target native platforms, right? Or is there a case for keeping it to support computers with touchscreens?

[dklymenk]

Yeah, saw that, but we would still set the timeout... I guess web is the platform we less care about those as I think those have a higher performance impact in mobile, but I think it would be possible to only target native platforms, right? Or is there a case for keeping it to support computers with touchscreens?

Sorry, I don't see how that would set the timeout. By listening only for < key we will only trigger the timeout if the button is long pressed on the rendered number pad. If you long press a physical backspace key on your keyboard, the timer will not start.

I don't think the changes I described above impact the computers with touch screens. We don't render the numpad on desktop, so they cannot press the < on it to trigger the event.

[iwiznia]

Oh sorry, you are right.

[iwiznia]

This is moving along, right @dklymenk?

[dklymenk]

No, I haven't been hired on upwork.

[iwiznia]

@bfitzexpensify you must've missed my ping, can you hire @dklymenk please?

[bfitzexpensify]

Sorry for the delay @dklymenk, hired you now.

[dklymenk]

Thank you. I got the offer. I will submit a PR shortly.

[dklymenk]

@iwiznia While reviewing the footage for mWeb (#6626) I noticed that when doing a long press on the delete key a completely random UI element gets selected for no reason and an annoying context menu appears. This would definitely qualify as a bug if it were to be merged.

I will look into ways of resolving it tomorrow.

Thanks.

[dklymenk]

In order to fix the selection issue I reused the code you're already using on report screen for a similar problem. 4489d4e

It seemed like a pretty safe bet to me that when tapping or clicking the button, the selection should be disabled.

The PR #6626 is ready for review.

[parasharrajat]

Glad to hear that logic is helping out with these problems. I didn't consider that to be reusable while writing it. I will review the PR shortly.

[bfitzexpensify]

In review

[botify]

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

• #6547 add continious deletion of IOU amount on long press #6626

If no regressions arise, payment will be issued on 2021-12-27. 🎊

[bfitzexpensify]

7 days since deployment. @dklymenk, paid you and ended the contract — thank you!

@kakajann, can you respond to the offer here? Once you do, I'll accept and pay out the reporting bonus.

[Sheharyar566]

By looking at the thread above, i'm guessing this job https://www.upwork.com/jobs/Reporting-IOU-Holding-down-the-delete-button-should-continually-delete-the-amount-6547_~011d115cee449bdc46/ is temporary 🤔

[kakajann]

@bfitzexpensify Thanks, accepted