Merge pull request #41717 from Expensify/youssef_fix_focused_option

[CP Staging] Uneven splits follow up
Expensify · May 7, 2024 · dcda83e · dcda83e
2 parents 5554726 + 936bb93
commit dcda83e
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 15 deletions.
diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx
@@ -36,6 +36,9 @@ type AmountTextInputProps = {
 
     /** Style for the TextInput container */
     containerStyle?: StyleProp<ViewStyle>;
+
+    /** Hide the focus styles on TextInput */
+    hideFocusedState?: boolean;
 } & Pick<BaseTextInputProps, 'autoFocus'>;
 
 function AmountTextInput(
@@ -50,14 +53,15 @@ function AmountTextInput(
         onKeyPress,
         containerStyle,
         disableKeyboard = true,
+        hideFocusedState = true,
         ...rest
     }: AmountTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
     return (
         <TextInput
             autoGrow
-            hideFocusedState
+            hideFocusedState={hideFocusedState}
             shouldInterceptSwipe
             disableKeyboard={disableKeyboard}
             inputStyle={style}

diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx
@@ -69,7 +69,11 @@ type MoneyRequestAmountInputProps = {
     /** Whether we want to format the display amount on blur */
     formatAmountOnBlur?: boolean;
 
+    /** Max length for the amount input */
     maxLength?: number;
+
+    /** Hide the focus styles on TextInput */
+    hideFocusedState?: boolean;
 };
 
 type Selection = {
@@ -99,6 +103,7 @@ function MoneyRequestAmountInput(
         disableKeyboard = true,
         formatAmountOnBlur,
         maxLength,
+        hideFocusedState = true,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -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
@@ -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
@@ -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
@@ -62,7 +62,11 @@ type TextInputWithCurrencySymbolProps = {
     /** Customizes the touchable wrapper of the TextInput component */
     touchableInputWrapperStyle?: StyleProp<ViewStyle>;
 
+    /** Max length for the amount input */
     maxLength?: number;
+
+    /** Hide the focus styles on TextInput */
+    hideFocusedState?: boolean;
 } & Pick<BaseTextInputProps, 'autoFocus'>;
 
 export default TextInputWithCurrencySymbolProps;
diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts
@@ -6423,9 +6423,8 @@ function setSplitShares(transaction: OnyxEntry<OnyxTypes.Transaction>, 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
@@ -1142,11 +1142,6 @@ const styles = (theme: ThemeColors) =>
             borderColor: theme.border,
         },
 
-        optionRowAmountInputWrapper: {
-            borderColor: theme.border,
-            borderBottomWidth: 2,
-        },
-
         optionRowAmountInput: {
             textAlign: 'right',
         },