Fix loose focus for Web/Desktop

src/components/BigNumberPad.js

@@ -14,11 +14,15 @@ const propTypes = {
     /** Callback to inform parent modal whether user is long pressing the "<" (backspace) button */
     longPressHandlerStateChanged: PropTypes.func,
 
+    /** Used to locate this view from native classes. */
+    nativeID: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     longPressHandlerStateChanged: () => {},
+    nativeID: 'numPadView',
 };
 
 const padNumbers = [
@@ -57,7 +61,7 @@ class BigNumberPad extends React.PureComponent {
 
     render() {
         return (
-            <View style={[styles.flexColumn, styles.w100]}>
+            <View style={[styles.flexColumn, styles.w100]} nativeID={this.props.nativeID}>
                 {_.map(padNumbers, (row, rowIndex) => (
                     <View key={`NumberPadRow-${rowIndex}`} style={[styles.flexRow, styles.mt3]}>
                         {_.map(row, (column, columnIndex) => {

src/pages/iou/steps/IOUAmountPage.js

@@ -58,6 +58,9 @@ class IOUAmountPage extends React.Component {
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
         this.focusTextInput = this.focusTextInput.bind(this);
         this.navigateToCurrencySelectionPage = this.navigateToCurrencySelectionPage.bind(this);
+        this.amountViewID = 'amountView';
+        this.numPadContainerViewID = 'numPadContainerView';
+        this.numPadViewID = 'numPadView';
 
         this.state = {
             amount: props.selectedAmount,
@@ -82,6 +85,23 @@ class IOUAmountPage extends React.Component {
         this.unsubscribeNavFocus();
     }
 
+    /**
+     * Event occurs when a user presses a mouse button over an DOM element.
+     *
+     * @param {Event} event
+     * @param {Array<string>} nativeIds
+     */
+    onMouseDown(event, nativeIds) {
+        const relatedTargetId = lodashGet(event, 'nativeEvent.target.id');
+        if (!_.contains(nativeIds, relatedTargetId)) {
+            return;
+        }
+        event.preventDefault();
+        if (!this.textInput.isFocused()) {
+            this.textInput.focus();
+        }
+    }
+
     /**
      * Returns the new selection object based on the updated amount's length
      *
@@ -180,7 +200,9 @@ class IOUAmountPage extends React.Component {
      * @param {String} key
      */
     updateAmountNumberPad(key) {
-        this.focusTextInput();
+        if (!this.textInput.isFocused()) {
+            this.textInput.focus();
+        }
 
         // Backspace button is pressed
         if (key === '<' || key === 'Backspace') {
@@ -258,13 +280,16 @@ class IOUAmountPage extends React.Component {
 
         return (
             <>
-                <View style={[
-                    styles.flex1,
-                    styles.flexRow,
-                    styles.w100,
-                    styles.alignItemsCenter,
-                    styles.justifyContentCenter,
-                ]}
+                <View
+                    nativeID={this.amountViewID}
+                    onMouseDown={event => this.onMouseDown(event, [this.amountViewID])}
+                    style={[
+                        styles.flex1,
+                        styles.flexRow,
+                        styles.w100,
+                        styles.alignItemsCenter,
+                        styles.justifyContentCenter,
+                    ]}
                 >
                     <TextInputWithCurrencySymbol
                         formattedAmount={formattedAmount}
@@ -283,10 +308,15 @@ class IOUAmountPage extends React.Component {
                         }}
                     />
                 </View>
-                <View style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}>
+                <View
+                    onMouseDown={event => this.onMouseDown(event, [this.numPadContainerViewID, this.numPadViewID])}
+                    style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}
+                    nativeID={this.numPadContainerViewID}
+                >
                     {DeviceCapabilities.canUseTouchScreen()
                         ? (
                             <BigNumberPad
+                                nativeID={this.numPadViewID}
                                 numberPressed={this.updateAmountNumberPad}
                                 longPressHandlerStateChanged={this.updateLongPressHandlerState}
                             />