Merge pull request #15710 from narefyev91/fix-keyboard-re-renders

Fix big number pad re-renders
Expensify · Mar 9, 2023 · d717f64 · d717f64
2 parents 8ccfa41 + 6d54ad8
commit d717f64
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
@@ -28,7 +28,7 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-class BigNumberPad extends React.Component {
+class BigNumberPad extends React.PureComponent {
     constructor(props) {
         super(props);
 

diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
@@ -52,14 +52,15 @@ class IOUAmountPage extends React.Component {
         super(props);
 
         this.updateAmountNumberPad = this.updateAmountNumberPad.bind(this);
+        this.updateLongPressHandlerState = this.updateLongPressHandlerState.bind(this);
         this.updateAmount = this.updateAmount.bind(this);
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
         this.focusTextInput = this.focusTextInput.bind(this);
         this.navigateToCurrencySelectionPage = this.navigateToCurrencySelectionPage.bind(this);
-        this.shouldUpdateSelection = true;
 
         this.state = {
             amount: props.selectedAmount,
+            shouldUpdateSelection: true,
             selection: {
                 start: props.selectedAmount.length,
                 end: props.selectedAmount.length,
@@ -196,6 +197,15 @@ class IOUAmountPage extends React.Component {
         });
     }
 
+    /**
+     * Update long press value, to remove items pressing on <
+     *
+     * @param {Boolean} value - Changed text from user input
+     */
+    updateLongPressHandlerState(value) {
+        this.setState({shouldUpdateSelection: value});
+    }
+
     /**
      * Update amount on amount change
      * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit
@@ -263,7 +273,7 @@ class IOUAmountPage extends React.Component {
                         selectedCurrencyCode={this.props.iou.selectedCurrencyCode || CONST.CURRENCY.USD}
                         selection={this.state.selection}
                         onSelectionChange={(e) => {
-                            if (!this.shouldUpdateSelection) {
+                            if (!this.state.shouldUpdateSelection) {
                                 return;
                             }
                             this.setState({selection: e.nativeEvent.selection});
@@ -275,7 +285,7 @@ class IOUAmountPage extends React.Component {
                         ? (
                             <BigNumberPad
                                 numberPressed={this.updateAmountNumberPad}
-                                longPressHandlerStateChanged={state => this.shouldUpdateSelection = !state}
+                                longPressHandlerStateChanged={this.updateLongPressHandlerState}
                             />
                         ) : <View />}