[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 contributors@expensify.com 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.

Details

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.