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/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index cad1c6c1bcf4..2c592c20f4c6 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -473,9 +473,8 @@ function MoneyRequestConfirmationList({ let amount: number | undefined = 0; if (iouAmount > 0) { amount = - isPolicyExpenseChat || !transaction?.comment?.splits - ? IOUUtils.calculateAmount(selectedParticipants.length, iouAmount, iouCurrencyCode ?? '', isPayer) - : transaction.comment.splits.find((split) => split.accountID === participantOption.accountID)?.amount; + transaction?.comment?.splits?.find((split) => split.accountID === participantOption.accountID)?.amount ?? + IOUUtils.calculateAmount(selectedParticipants.length, iouAmount, iouCurrencyCode ?? '', isPayer); } return { ...participantOption, @@ -502,7 +501,7 @@ function MoneyRequestConfirmationList({ onAmountChange: (value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value)), }, })); - }, [transaction, iouCurrencyCode, isPolicyExpenseChat, onSplitShareChange, payeePersonalDetails, selectedParticipants, currencyList, iouAmount, shouldShowReadOnlySplits, StyleUtils]); + }, [transaction, iouCurrencyCode, onSplitShareChange, payeePersonalDetails, selectedParticipants, currencyList, iouAmount, shouldShowReadOnlySplits, StyleUtils]); const isSplitModified = useMemo(() => { if (!transaction?.splitShares) { @@ -1092,6 +1091,7 @@ function MoneyRequestConfirmationList({ onConfirmSelection={confirm} selectedOptions={selectedOptions} disableArrowKeysActions + disableFocusOptions boldStyle showTitleTooltip shouldTextInputAppearBelowOptions 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/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index a55436225bbf..b31f27aef786 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -62,7 +62,11 @@ type TextInputWithCurrencySymbolProps = { /** Customizes the touchable wrapper of the TextInput component */ touchableInputWrapperStyle?: StyleProp; + /** Max length for the amount input */ maxLength?: number; + + /** Hide the focus styles on TextInput */ + hideFocusedState?: boolean; } & Pick; export default TextInputWithCurrencySymbolProps; diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 79ee20971e5d..7171a7d6732a 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6423,9 +6423,8 @@ function setSplitShares(transaction: OnyxEntry, amount: n } const isPayer = accountID === userAccountID; - - // This function expects the length of participants without current user - const splitAmount = IOUUtils.calculateAmount(accountIDs.length - 1, amount, currency, isPayer); + const participantsLength = newAccountIDs.includes(userAccountID) ? newAccountIDs.length - 1 : newAccountIDs.length; + const splitAmount = IOUUtils.calculateAmount(participantsLength, amount, currency, isPayer); return { ...result, [accountID]: { diff --git a/src/styles/index.ts b/src/styles/index.ts index 6695fdda6c52..060fb1c5ba90 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1142,11 +1142,6 @@ const styles = (theme: ThemeColors) => borderColor: theme.border, }, - optionRowAmountInputWrapper: { - borderColor: theme.border, - borderBottomWidth: 2, - }, - optionRowAmountInput: { textAlign: 'right', },