From 4f8386e68d4b3841ed718ad03a4e30597a5eed8b Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 24 Aug 2023 07:40:52 +0100 Subject: [PATCH 1/6] handle forward-delete properly in the amount text input --- src/components/AmountTextInput.js | 5 ++ .../index.android.js} | 54 +++----------- .../TextInputWithCurrencySymbol/index.js | 72 +++++++++++++++++++ .../textInputWithCurrencySymbolPropTypes.js | 45 ++++++++++++ src/pages/iou/steps/MoneyRequestAmountForm.js | 16 ++++- 5 files changed, 146 insertions(+), 46 deletions(-) rename src/components/{TextInputWithCurrencySymbol.js => TextInputWithCurrencySymbol/index.android.js} (58%) create mode 100644 src/components/TextInputWithCurrencySymbol/index.js create mode 100644 src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js index 8472ef271be0..ba9b654644af 100644 --- a/src/components/AmountTextInput.js +++ b/src/components/AmountTextInput.js @@ -25,12 +25,16 @@ const propTypes = { /** Function to call when selection in text input is changed */ onSelectionChange: PropTypes.func, + + /** Function to call to handle key presses in the text input */ + onKeyPress: PropTypes.func, }; const defaultProps = { forwardedRef: undefined, selection: undefined, onSelectionChange: () => {}, + onKeyPress: () => {}, }; function AmountTextInput(props) { @@ -50,6 +54,7 @@ function AmountTextInput(props) { selection={props.selection} onSelectionChange={props.onSelectionChange} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} + onKeyPress={props.onKeyPress} /> ); } diff --git a/src/components/TextInputWithCurrencySymbol.js b/src/components/TextInputWithCurrencySymbol/index.android.js similarity index 58% rename from src/components/TextInputWithCurrencySymbol.js rename to src/components/TextInputWithCurrencySymbol/index.android.js index c7e8804e8184..10a9dbcff90a 100644 --- a/src/components/TextInputWithCurrencySymbol.js +++ b/src/components/TextInputWithCurrencySymbol/index.android.js @@ -1,47 +1,10 @@ import React, {useState, useEffect} from 'react'; -import PropTypes from 'prop-types'; -import AmountTextInput from './AmountTextInput'; -import CurrencySymbolButton from './CurrencySymbolButton'; -import * as CurrencyUtils from '../libs/CurrencyUtils'; -import useLocalize from '../hooks/useLocalize'; -import * as MoneyRequestUtils from '../libs/MoneyRequestUtils'; - -const propTypes = { - /** A ref to forward to amount text input */ - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]), - - /** Formatted amount in local currency */ - formattedAmount: PropTypes.string.isRequired, - - /** Function to call when amount in text input is changed */ - onChangeAmount: PropTypes.func, - - /** Function to call when currency button is pressed */ - onCurrencyButtonPress: PropTypes.func, - - /** Placeholder value for amount text input */ - placeholder: PropTypes.string.isRequired, - - /** Currency code of user's selected currency */ - selectedCurrencyCode: PropTypes.string.isRequired, - - /** Selection Object */ - selection: PropTypes.shape({ - start: PropTypes.number, - end: PropTypes.number, - }), - - /** Function to call when selection in text input is changed */ - onSelectionChange: PropTypes.func, -}; - -const defaultProps = { - forwardedRef: undefined, - onChangeAmount: () => {}, - onCurrencyButtonPress: () => {}, - selection: undefined, - onSelectionChange: () => {}, -}; +import AmountTextInput from '../AmountTextInput'; +import CurrencySymbolButton from '../CurrencySymbolButton'; +import * as CurrencyUtils from '../../libs/CurrencyUtils'; +import useLocalize from '../../hooks/useLocalize'; +import * as MoneyRequestUtils from '../../libs/MoneyRequestUtils'; +import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes'; function TextInputWithCurrencySymbol(props) { const {fromLocaleDigit} = useLocalize(); @@ -85,6 +48,7 @@ function TextInputWithCurrencySymbol(props) { } props.onSelectionChange(e); }} + onKeyPress={props.onKeyPress} /> ); @@ -105,8 +69,8 @@ function TextInputWithCurrencySymbol(props) { ); } -TextInputWithCurrencySymbol.propTypes = propTypes; -TextInputWithCurrencySymbol.defaultProps = defaultProps; +TextInputWithCurrencySymbol.propTypes = textInputWithCurrencySymbolPropTypes.propTypes; +TextInputWithCurrencySymbol.defaultProps = textInputWithCurrencySymbolPropTypes.defaultProps; TextInputWithCurrencySymbol.displayName = 'TextInputWithCurrencySymbol'; export default React.forwardRef((props, ref) => ( diff --git a/src/components/TextInputWithCurrencySymbol/index.js b/src/components/TextInputWithCurrencySymbol/index.js new file mode 100644 index 000000000000..307c92cf198e --- /dev/null +++ b/src/components/TextInputWithCurrencySymbol/index.js @@ -0,0 +1,72 @@ +import React from 'react'; +import AmountTextInput from '../AmountTextInput'; +import CurrencySymbolButton from '../CurrencySymbolButton'; +import * as CurrencyUtils from '../../libs/CurrencyUtils'; +import useLocalize from '../../hooks/useLocalize'; +import * as MoneyRequestUtils from '../../libs/MoneyRequestUtils'; +import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes'; + +function TextInputWithCurrencySymbol(props) { + const {fromLocaleDigit} = useLocalize(); + const currencySymbol = CurrencyUtils.getLocalizedCurrencySymbol(props.selectedCurrencyCode); + const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(props.selectedCurrencyCode); + + const currencySymbolButton = ( + + ); + + /** + * Set a new amount value properly formatted + * + * @param {String} text - Changed text from user input + */ + const setFormattedAmount = (text) => { + const newAmount = MoneyRequestUtils.addLeadingZero(MoneyRequestUtils.replaceAllDigits(text, fromLocaleDigit)); + props.onChangeAmount(newAmount); + }; + + const amountTextInput = ( + { + props.onSelectionChange(e); + }} + onKeyPress={props.onKeyPress} + /> + ); + + if (isCurrencySymbolLTR) { + return ( + <> + {currencySymbolButton} + {amountTextInput} + + ); + } + + return ( + <> + {amountTextInput} + {currencySymbolButton} + + ); +} + +TextInputWithCurrencySymbol.propTypes = textInputWithCurrencySymbolPropTypes.propTypes; +TextInputWithCurrencySymbol.defaultProps = textInputWithCurrencySymbolPropTypes.defaultProps; +TextInputWithCurrencySymbol.displayName = 'TextInputWithCurrencySymbol'; + +export default React.forwardRef((props, ref) => ( + +)); diff --git a/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js b/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js new file mode 100644 index 000000000000..3925a9adcec4 --- /dev/null +++ b/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** A ref to forward to amount text input */ + forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]), + + /** Formatted amount in local currency */ + formattedAmount: PropTypes.string.isRequired, + + /** Function to call when amount in text input is changed */ + onChangeAmount: PropTypes.func, + + /** Function to call when currency button is pressed */ + onCurrencyButtonPress: PropTypes.func, + + /** Placeholder value for amount text input */ + placeholder: PropTypes.string.isRequired, + + /** Currency code of user's selected currency */ + selectedCurrencyCode: PropTypes.string.isRequired, + + /** Selection Object */ + selection: PropTypes.shape({ + start: PropTypes.number, + end: PropTypes.number, + }), + + /** Function to call when selection in text input is changed */ + onSelectionChange: PropTypes.func, + + /** Function to call to handle key presses in the text input */ + onKeyPress: PropTypes.func, +}; + +const defaultProps = { + forwardedRef: undefined, + onChangeAmount: () => {}, + onCurrencyButtonPress: () => {}, + selection: undefined, + onSelectionChange: () => {}, + onKeyPress: () => {}, +}; + +export {propTypes, defaultProps}; diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js index 99f7e982cb10..ae98c3b05eab 100644 --- a/src/pages/iou/steps/MoneyRequestAmountForm.js +++ b/src/pages/iou/steps/MoneyRequestAmountForm.js @@ -12,6 +12,7 @@ import * as DeviceCapabilities from '../../../libs/DeviceCapabilities'; import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurrencySymbol'; import useLocalize from '../../../hooks/useLocalize'; import CONST from '../../../CONST'; +import getOperatingSystem from '../../../libs/getOperatingSystem'; const propTypes = { /** IOU amount saved in Onyx */ @@ -72,6 +73,8 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu end: selectedAmountAsString.length, }); + const forwardDeletePressedRef = useRef(false); + /** * Event occurs when a user presses a mouse button over an DOM element. * @@ -121,7 +124,8 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu return; } setCurrentAmount((prevAmount) => { - setSelection((prevSelection) => getNewSelection(prevSelection, prevAmount.length, newAmountWithoutSpaces.length)); + const isForwardDelete = prevAmount.length > newAmountWithoutSpaces.length && forwardDeletePressedRef.current; + setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? newAmountWithoutSpaces.length : prevAmount.length, newAmountWithoutSpaces.length)); return MoneyRequestUtils.stripCommaFromAmount(newAmountWithoutSpaces); }); }; @@ -171,6 +175,15 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu onSubmitButtonPress(currentAmount); }, [onSubmitButtonPress, currentAmount]); + /** + * Input handler to check for a forward-delete key (or keyboard shortcut) press. + */ + const textInputKeyPress = ({nativeEvent}) => { + const key = nativeEvent.key.toLowerCase(); + // Control-D on Mac is a keyboard shortcut for forward-delete. See https://support.apple.com/en-us/HT201236 for Mac keyboard shortcuts. + forwardDeletePressedRef.current = key === 'delete' || (getOperatingSystem() === CONST.OS.MAC_OS && nativeEvent.ctrlKey && key === 'd'); + }; + const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit); const buttonText = isEditing ? translate('common.save') : translate('common.next'); @@ -203,6 +216,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu } setSelection(e.nativeEvent.selection); }} + onKeyPress={textInputKeyPress} /> Date: Thu, 24 Aug 2023 13:23:19 +0100 Subject: [PATCH 2/6] handle Control-D keyboard shortcut on iOS --- src/pages/iou/steps/MoneyRequestAmountForm.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js index ae98c3b05eab..b929abd41160 100644 --- a/src/pages/iou/steps/MoneyRequestAmountForm.js +++ b/src/pages/iou/steps/MoneyRequestAmountForm.js @@ -181,7 +181,8 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu const textInputKeyPress = ({nativeEvent}) => { const key = nativeEvent.key.toLowerCase(); // Control-D on Mac is a keyboard shortcut for forward-delete. See https://support.apple.com/en-us/HT201236 for Mac keyboard shortcuts. - forwardDeletePressedRef.current = key === 'delete' || (getOperatingSystem() === CONST.OS.MAC_OS && nativeEvent.ctrlKey && key === 'd'); + // Also check for the keyboard shortcut on iOS in cases where a hardware keyboard may be connected to the device. + forwardDeletePressedRef.current = key === 'delete' || (_.contains([CONST.OS.MAC_OS, CONST.OS.IOS], getOperatingSystem()) && nativeEvent.ctrlKey && key === 'd'); }; const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit); From e99accb71cb76722ee71bf10db550e54144a1483 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 24 Aug 2023 14:28:23 +0100 Subject: [PATCH 3/6] fix edge-case with iOS Safari's handling of the Control key for the keyboard shortcut --- src/pages/iou/steps/MoneyRequestAmountForm.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js index b929abd41160..41adf10a7c98 100644 --- a/src/pages/iou/steps/MoneyRequestAmountForm.js +++ b/src/pages/iou/steps/MoneyRequestAmountForm.js @@ -13,6 +13,7 @@ import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurren import useLocalize from '../../../hooks/useLocalize'; import CONST from '../../../CONST'; import getOperatingSystem from '../../../libs/getOperatingSystem'; +import * as Browser from '../../../libs/Browser'; const propTypes = { /** IOU amount saved in Onyx */ @@ -180,6 +181,12 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu */ const textInputKeyPress = ({nativeEvent}) => { const key = nativeEvent.key.toLowerCase(); + if (Browser.isMobileSafari() && key === 'control') { + // Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being + // used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press. + forwardDeletePressedRef.current = true; + return; + } // Control-D on Mac is a keyboard shortcut for forward-delete. See https://support.apple.com/en-us/HT201236 for Mac keyboard shortcuts. // Also check for the keyboard shortcut on iOS in cases where a hardware keyboard may be connected to the device. forwardDeletePressedRef.current = key === 'delete' || (_.contains([CONST.OS.MAC_OS, CONST.OS.IOS], getOperatingSystem()) && nativeEvent.ctrlKey && key === 'd'); From ac07f86495d2838038fa918a9b19019be2306a3d Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Fri, 25 Aug 2023 02:54:22 +0100 Subject: [PATCH 4/6] use a constant to match for the 'control' key press --- src/pages/iou/steps/MoneyRequestAmountForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js index 41adf10a7c98..6848077908e1 100644 --- a/src/pages/iou/steps/MoneyRequestAmountForm.js +++ b/src/pages/iou/steps/MoneyRequestAmountForm.js @@ -181,7 +181,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu */ const textInputKeyPress = ({nativeEvent}) => { const key = nativeEvent.key.toLowerCase(); - if (Browser.isMobileSafari() && key === 'control') { + if (Browser.isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) { // Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being // used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press. forwardDeletePressedRef.current = true; From a88c1b38430a7f8de6e7b73a20e3a9be28fb7a8c Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Mon, 28 Aug 2023 08:54:24 +0100 Subject: [PATCH 5/6] tidy up TextInputWithCurrencySymbol refactor --- .../BaseTextInputWithCurrencySymbol.js | 72 +++++++++++++++++++ .../index.android.js | 67 ++++------------- .../TextInputWithCurrencySymbol/index.js | 58 ++------------- 3 files changed, 89 insertions(+), 108 deletions(-) create mode 100644 src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js diff --git a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js new file mode 100644 index 000000000000..6dd1aacb0b09 --- /dev/null +++ b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js @@ -0,0 +1,72 @@ +import React from 'react'; +import AmountTextInput from '../AmountTextInput'; +import CurrencySymbolButton from '../CurrencySymbolButton'; +import * as CurrencyUtils from '../../libs/CurrencyUtils'; +import useLocalize from '../../hooks/useLocalize'; +import * as MoneyRequestUtils from '../../libs/MoneyRequestUtils'; +import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes'; + +function BaseTextInputWithCurrencySymbol(props) { + const {fromLocaleDigit} = useLocalize(); + const currencySymbol = CurrencyUtils.getLocalizedCurrencySymbol(props.selectedCurrencyCode); + const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(props.selectedCurrencyCode); + + const currencySymbolButton = ( + + ); + + /** + * Set a new amount value properly formatted + * + * @param {String} text - Changed text from user input + */ + const setFormattedAmount = (text) => { + const newAmount = MoneyRequestUtils.addLeadingZero(MoneyRequestUtils.replaceAllDigits(text, fromLocaleDigit)); + props.onChangeAmount(newAmount); + }; + + const amountTextInput = ( + { + props.onSelectionChange(e); + }} + onKeyPress={props.onKeyPress} + /> + ); + + if (isCurrencySymbolLTR) { + return ( + <> + {currencySymbolButton} + {amountTextInput} + + ); + } + + return ( + <> + {amountTextInput} + {currencySymbolButton} + + ); +} + +BaseTextInputWithCurrencySymbol.propTypes = textInputWithCurrencySymbolPropTypes.propTypes; +BaseTextInputWithCurrencySymbol.defaultProps = textInputWithCurrencySymbolPropTypes.defaultProps; +BaseTextInputWithCurrencySymbol.displayName = 'BaseTextInputWithCurrencySymbol'; + +export default React.forwardRef((props, ref) => ( + +)); diff --git a/src/components/TextInputWithCurrencySymbol/index.android.js b/src/components/TextInputWithCurrencySymbol/index.android.js index 10a9dbcff90a..5787c054e535 100644 --- a/src/components/TextInputWithCurrencySymbol/index.android.js +++ b/src/components/TextInputWithCurrencySymbol/index.android.js @@ -1,71 +1,28 @@ import React, {useState, useEffect} from 'react'; -import AmountTextInput from '../AmountTextInput'; -import CurrencySymbolButton from '../CurrencySymbolButton'; -import * as CurrencyUtils from '../../libs/CurrencyUtils'; -import useLocalize from '../../hooks/useLocalize'; -import * as MoneyRequestUtils from '../../libs/MoneyRequestUtils'; +import BaseTextInputWithCurrencySymbol from './BaseTextInputWithCurrencySymbol'; import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes'; function TextInputWithCurrencySymbol(props) { - const {fromLocaleDigit} = useLocalize(); - const currencySymbol = CurrencyUtils.getLocalizedCurrencySymbol(props.selectedCurrencyCode); - const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(props.selectedCurrencyCode); - const [skipNextSelectionChange, setSkipNextSelectionChange] = useState(false); useEffect(() => { setSkipNextSelectionChange(true); }, [props.formattedAmount]); - const currencySymbolButton = ( - - ); - - /** - * Set a new amount value properly formatted - * - * @param {String} text - Changed text from user input - */ - const setFormattedAmount = (text) => { - const newAmount = MoneyRequestUtils.addLeadingZero(MoneyRequestUtils.replaceAllDigits(text, fromLocaleDigit)); - props.onChangeAmount(newAmount); + const onSelectionChange = (e) => { + if (skipNextSelectionChange) { + setSkipNextSelectionChange(false); + return; + } + props.onSelectionChange(e); }; - const amountTextInput = ( - { - if (skipNextSelectionChange) { - setSkipNextSelectionChange(false); - return; - } - props.onSelectionChange(e); - }} - onKeyPress={props.onKeyPress} - /> - ); - - if (isCurrencySymbolLTR) { - return ( - <> - {currencySymbolButton} - {amountTextInput} - - ); - } - return ( - <> - {amountTextInput} - {currencySymbolButton} - + ); } diff --git a/src/components/TextInputWithCurrencySymbol/index.js b/src/components/TextInputWithCurrencySymbol/index.js index 307c92cf198e..bd4c881c55ba 100644 --- a/src/components/TextInputWithCurrencySymbol/index.js +++ b/src/components/TextInputWithCurrencySymbol/index.js @@ -1,61 +1,13 @@ import React from 'react'; -import AmountTextInput from '../AmountTextInput'; -import CurrencySymbolButton from '../CurrencySymbolButton'; -import * as CurrencyUtils from '../../libs/CurrencyUtils'; -import useLocalize from '../../hooks/useLocalize'; -import * as MoneyRequestUtils from '../../libs/MoneyRequestUtils'; +import BaseTextInputWithCurrencySymbol from './BaseTextInputWithCurrencySymbol'; import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes'; function TextInputWithCurrencySymbol(props) { - const {fromLocaleDigit} = useLocalize(); - const currencySymbol = CurrencyUtils.getLocalizedCurrencySymbol(props.selectedCurrencyCode); - const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(props.selectedCurrencyCode); - - const currencySymbolButton = ( - - ); - - /** - * Set a new amount value properly formatted - * - * @param {String} text - Changed text from user input - */ - const setFormattedAmount = (text) => { - const newAmount = MoneyRequestUtils.addLeadingZero(MoneyRequestUtils.replaceAllDigits(text, fromLocaleDigit)); - props.onChangeAmount(newAmount); - }; - - const amountTextInput = ( - { - props.onSelectionChange(e); - }} - onKeyPress={props.onKeyPress} - /> - ); - - if (isCurrencySymbolLTR) { - return ( - <> - {currencySymbolButton} - {amountTextInput} - - ); - } - return ( - <> - {amountTextInput} - {currencySymbolButton} - + ); } From 998e56cc24efe4ec60fe909f86df5b72e88dd338 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Mon, 28 Aug 2023 09:09:43 +0100 Subject: [PATCH 6/6] use anonymous function for onSelectionChange --- .../TextInputWithCurrencySymbol/index.android.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/TextInputWithCurrencySymbol/index.android.js b/src/components/TextInputWithCurrencySymbol/index.android.js index 5787c054e535..7fb65257e707 100644 --- a/src/components/TextInputWithCurrencySymbol/index.android.js +++ b/src/components/TextInputWithCurrencySymbol/index.android.js @@ -9,19 +9,17 @@ function TextInputWithCurrencySymbol(props) { setSkipNextSelectionChange(true); }, [props.formattedAmount]); - const onSelectionChange = (e) => { - if (skipNextSelectionChange) { - setSkipNextSelectionChange(false); - return; - } - props.onSelectionChange(e); - }; - return ( { + if (skipNextSelectionChange) { + setSkipNextSelectionChange(false); + return; + } + props.onSelectionChange(e); + }} /> ); }