From 60aae42e3f252336f971715541383ff90a2ee51f Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Tue, 7 May 2024 02:53:28 +0100 Subject: [PATCH 1/5] Fix row being focused --- src/components/MoneyRequestConfirmationList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index b97578210ad9..ffb996ea9d10 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1090,6 +1090,7 @@ function MoneyRequestConfirmationList({ onConfirmSelection={confirm} selectedOptions={selectedOptions} disableArrowKeysActions + disableFocusOptions boldStyle showTitleTooltip shouldTextInputAppearBelowOptions From 5b4415ca90c7fdc973a438ddbe76e1db86d51950 Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Tue, 7 May 2024 03:15:50 +0100 Subject: [PATCH 2/5] Fix bug when changing participants --- src/libs/actions/IOU.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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]: { From 51901d788cdfd70ae7ef051dfdc4e20cff4e68cd Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Tue, 7 May 2024 06:46:36 +0100 Subject: [PATCH 3/5] Fix focused state --- src/components/AmountTextInput.tsx | 6 +++++- src/components/MoneyRequestAmountInput.tsx | 6 ++++++ src/components/OptionRow.tsx | 4 ++-- src/components/TextInput/BaseTextInput/index.tsx | 1 + src/components/TextInputWithCurrencySymbol/types.ts | 4 ++++ src/styles/index.ts | 5 ----- 6 files changed, 18 insertions(+), 8 deletions(-) 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', }, From 0b8aa3dfd3762a7baeacf4a6b6e203116869b2d1 Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Tue, 7 May 2024 20:32:56 +0100 Subject: [PATCH 4/5] Fix split amounts not displayed in scanned splits details page --- src/components/MoneyRequestConfirmationList.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index ffb996ea9d10..f38ac1a70d36 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -471,9 +471,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, @@ -500,7 +499,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) { From 936bb9363caa83dd2bd7635743a90ec59dc0c7c2 Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Tue, 7 May 2024 20:41:48 +0100 Subject: [PATCH 5/5] Cleanup --- src/components/TextInput/BaseTextInput/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 04d400424a87..c73509aa7b8f 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -296,7 +296,6 @@ function BaseTextInput( ]} >