diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js index 7e9a79ba0c7f..8aa7b63eafb5 100644 --- a/src/components/BigNumberPad.js +++ b/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 ( - + {_.map(padNumbers, (row, rowIndex) => ( {_.map(row, (column, columnIndex) => { diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index c95d5e8aedbd..98112ff9d33d 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/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} 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 ( <> - this.onMouseDown(event, [this.amountViewID])} + style={[ + styles.flex1, + styles.flexRow, + styles.w100, + styles.alignItemsCenter, + styles.justifyContentCenter, + ]} > - + this.onMouseDown(event, [this.numPadContainerViewID, this.numPadViewID])} + style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]} + nativeID={this.numPadContainerViewID} + > {DeviceCapabilities.canUseTouchScreen() ? (