Merge pull request #8591 from sobitneupane/sn_bug-iouamountpage-retur…

…n-key Keep focus on textinput field after pressing enter when button is disabled
Expensify · Apr 27, 2022 · f3b5685 · f3b5685
2 parents 26c6e3b + f88b005
commit f3b5685
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
@@ -75,6 +75,7 @@ class IOUAmountPage extends React.Component {
         this.updateAmount = this.updateAmount.bind(this);
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
         this.focusTextInput = this.focusTextInput.bind(this);
+        this.focusEmptyInput = this.focusEmptyInput.bind(this);
 
         this.state = {
             amount: props.selectedAmount,
@@ -93,6 +94,16 @@ class IOUAmountPage extends React.Component {
         this.focusTextInput();
     }
 
+    /**
+     * Keep TextInput focused if no amount is entered.
+     */
+    focusEmptyInput() {
+        if (this.state.amount !== '') {
+            return;
+        }
+        this.textInput.focus();
+    }
+
     /**
      * Focus text input
      */
@@ -236,6 +247,7 @@ class IOUAmountPage extends React.Component {
                         value={formattedAmount}
                         placeholder={this.props.numberFormat(0)}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                        onBlur={this.focusEmptyInput}
                     />
                 </View>
                 <View style={[styles.w100, styles.justifyContentEnd]}>