diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index e5980a397d37..52c32ce1f584 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -36,6 +36,9 @@ type AmountTextInputProps = { /** Style for the TextInput container */ containerStyle?: StyleProp; + + /** Hide the focus styles on TextInput */ + hideFocusedState?: boolean; } & Pick; function AmountTextInput( @@ -50,6 +53,7 @@ function AmountTextInput( onKeyPress, containerStyle, disableKeyboard = true, + hideFocusedState = true, ...rest }: AmountTextInputProps, ref: ForwardedRef, @@ -57,7 +61,7 @@ function AmountTextInput( return ( , @@ -279,6 +284,7 @@ function MoneyRequestAmountInput( prefixContainerStyle={props.prefixContainerStyle} touchableInputWrapperStyle={props.touchableInputWrapperStyle} maxLength={maxLength} + hideFocusedState={hideFocusedState} /> ); } diff --git a/src/components/OptionRow.tsx b/src/components/OptionRow.tsx index 376e0113ca64..d00120a594d8 100644 --- a/src/components/OptionRow.tsx +++ b/src/components/OptionRow.tsx @@ -260,16 +260,16 @@ function OptionRow({ prefixCharacter={option.amountInputProps.prefixCharacter} disableKeyboard={false} isCurrencyPressable={false} + hideFocusedState={false} hideCurrencySymbol formatAmountOnBlur - touchableInputWrapperStyle={[styles.optionRowAmountInputWrapper, option.amountInputProps.containerStyle]} prefixContainerStyle={[styles.pv0]} + containerStyle={[styles.textInputContainer]} inputStyle={[ styles.optionRowAmountInput, StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(option.amountInputProps.prefixCharacter ?? '') + styles.pl1.paddingLeft) as TextStyle, option.amountInputProps.inputStyle, ]} - containerStyle={styles.iouAmountTextInputContainer} onAmountChange={option.amountInputProps.onAmountChange} maxLength={option.amountInputProps.maxLength} /> diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index c73509aa7b8f..04d400424a87 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -296,6 +296,7 @@ function BaseTextInput( ]} > ; + /** Max length for the amount input */ maxLength?: number; + + /** Hide the focus styles on TextInput */ + hideFocusedState?: boolean; } & Pick; export default TextInputWithCurrencySymbolProps; diff --git a/src/styles/index.ts b/src/styles/index.ts index 4555e2e1001b..08874ecc55c7 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1137,11 +1137,6 @@ const styles = (theme: ThemeColors) => borderColor: theme.border, }, - optionRowAmountInputWrapper: { - borderColor: theme.border, - borderBottomWidth: 2, - }, - optionRowAmountInput: { textAlign: 'right', },