From a60e7e7cc4b59d0d973500bdd8723d6df5d91cb0 Mon Sep 17 00:00:00 2001 From: kubabutkiewicz Date: Tue, 17 Mar 2026 16:52:38 +0100 Subject: [PATCH 1/2] fix: reset error message when split expenses change --- src/pages/iou/SplitExpensePage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/SplitExpensePage.tsx b/src/pages/iou/SplitExpensePage.tsx index c612ece8c0b7e..ea0e939dd4c28 100644 --- a/src/pages/iou/SplitExpensePage.tsx +++ b/src/pages/iou/SplitExpensePage.tsx @@ -1,5 +1,5 @@ import {deepEqual} from 'fast-equals'; -import React, {useMemo} from 'react'; +import React, {useEffect, useMemo} from 'react'; import {InteractionManager, Keyboard, View} from 'react-native'; import type {ValueOf} from 'type-fest'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -138,6 +138,10 @@ function SplitExpensePage({route}: SplitExpensePageProps) { const difference = sumOfSplitExpenses - transactionDetailsAmount; const currencySymbol = getCurrencySymbol(transactionDetails.currency ?? '') ?? transactionDetails.currency ?? CONST.CURRENCY.USD; + useEffect(() => { + setErrorMessage(''); + }, [splitExpenses.length]); + const isPerDiem = isPerDiemRequest(transaction); const isDistance = isDistanceRequest(transaction); const isCard = isManagedCardTransaction(transaction); From 64cdcae5af8a522525b1dd9d65ab4077514c5dec Mon Sep 17 00:00:00 2001 From: kubabutkiewicz Date: Tue, 17 Mar 2026 17:55:51 +0100 Subject: [PATCH 2/2] fix: update keyboard type handling in PercentageForm and SplitPercentageInput, and improve error message management in SplitExpensePage --- src/components/PercentageForm.tsx | 2 +- .../SplitListItem/SplitPercentageInput.tsx | 2 ++ src/pages/iou/SplitExpensePage.tsx | 23 +++++++++++++------ 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/PercentageForm.tsx b/src/components/PercentageForm.tsx index 7e3e1f597740e..11e4d4855264f 100644 --- a/src/components/PercentageForm.tsx +++ b/src/components/PercentageForm.tsx @@ -78,7 +78,7 @@ function PercentageForm({value: amount, errorText, onInputChange, label, allowEx textInput.current = newRef; }} suffixCharacter="%" - keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} + keyboardType={rest.keyboardType ?? CONST.KEYBOARD_TYPE.DECIMAL_PAD} // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. // See https://github.com/Expensify/App/issues/51868 for more information autoCapitalize="words" diff --git a/src/components/SelectionList/ListItem/SplitListItem/SplitPercentageInput.tsx b/src/components/SelectionList/ListItem/SplitListItem/SplitPercentageInput.tsx index e81636b65e65f..887ea319f23bd 100644 --- a/src/components/SelectionList/ListItem/SplitListItem/SplitPercentageInput.tsx +++ b/src/components/SelectionList/ListItem/SplitListItem/SplitPercentageInput.tsx @@ -4,6 +4,7 @@ import PercentageForm from '@components/PercentageForm'; import type {SplitListItemType} from '@components/SelectionList/ListItem/types'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; import SplitPercentageDisplay from './SplitPercentageDisplay'; type SplitPercentageInputProps = { @@ -50,6 +51,7 @@ function SplitPercentageInput({splitItem, contentWidth, percentageDraft, onSplit allowExceedingHundred allowDecimal allowNegative + keyboardType={CONST.KEYBOARD_TYPE.NUMBERS_AND_PUNCTUATION} /> ); } diff --git a/src/pages/iou/SplitExpensePage.tsx b/src/pages/iou/SplitExpensePage.tsx index ea0e939dd4c28..bd1b728298f13 100644 --- a/src/pages/iou/SplitExpensePage.tsx +++ b/src/pages/iou/SplitExpensePage.tsx @@ -172,7 +172,6 @@ function SplitExpensePage({route}: SplitExpensePageProps) { const currentTransactionViolations = transactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`] ?? []; const hasCustomUnitOutOfPolicyViolation = currentTransactionViolations.some((violation) => violation.name === CONST.VIOLATIONS.CUSTOM_UNIT_OUT_OF_POLICY); - const draftTransactionError = useMemo(() => getLatestErrorMessage(draftTransaction ?? {}), [draftTransaction]); let isUnitRateIDOutOfPolicy = false; for (const splitExpense of splitExpenses) { const splitTransaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(splitExpense.transactionID)}`] ?? transaction; @@ -190,6 +189,18 @@ function SplitExpensePage({route}: SplitExpensePageProps) { } } + useEffect(() => { + const errorString = getLatestErrorMessage(draftTransaction ?? {}); + + if (errorString) { + setErrorMessage(errorString); + } + }, [draftTransaction, draftTransaction?.errors]); + + useEffect(() => { + setErrorMessage(''); + }, [sumOfSplitExpenses, splitExpenses]); + const onAddSplitExpense = () => { if (draftTransaction?.errors) { clearSplitTransactionDraftErrors(transactionID); @@ -313,7 +324,6 @@ function SplitExpensePage({route}: SplitExpensePageProps) { }; const onSplitExpenseValueChange = (id: string, value: number, mode: ValueOf) => { - setErrorMessage(''); if (mode === CONST.TAB.SPLIT.AMOUNT || mode === CONST.TAB.SPLIT.DATE) { const amountInCents = convertToBackendAmount(value); updateSplitExpenseAmountField(draftTransaction, id, amountInCents, currentPolicy); @@ -398,7 +408,6 @@ function SplitExpensePage({route}: SplitExpensePageProps) { ); - const displayError = errorMessage || draftTransactionError; let warningMessage = ''; if (invalidSplit && sumOfSplitExpenses !== transactionDetailsAmount) { @@ -415,12 +424,12 @@ function SplitExpensePage({route}: SplitExpensePageProps) { const footerContent = ( - {(!!displayError || !!warningMessage) && ( + {(!!errorMessage || !!warningMessage) && ( )}