diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 791b3e4d5e48..85bb79f85518 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -88,6 +88,18 @@ type MoneyRequestAmountInputProps = { * Autogrow input container length based on the entered text. */ autoGrow?: boolean; + + /** + * Determines whether the amount should be reset. + */ + shouldResetAmount?: boolean; + + /** + * Callback function triggered when the amount is reset. + * + * @param resetValue - A boolean indicating whether the amount should be reset. + */ + onResetAmount?: (resetValue: boolean) => void; }; type Selection = { @@ -123,6 +135,8 @@ function MoneyRequestAmountInput( hideFocusedState = true, shouldKeepUserInput = false, autoGrow = true, + shouldResetAmount, + onResetAmount, ...props }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, @@ -202,10 +216,21 @@ function MoneyRequestAmountInput( })); useEffect(() => { + const frontendAmount = onFormatAmount(amount, currency); + setCurrentAmount(frontendAmount); + if (shouldResetAmount) { + setSelection({ + start: frontendAmount.length, + end: frontendAmount.length, + }); + onResetAmount?.(false); + return; + } + if ((!currency || typeof amount !== 'number' || (formatAmountOnBlur && isTextInputFocused(textInput))) ?? shouldKeepUserInput) { return; } - const frontendAmount = onFormatAmount(amount, currency); + setCurrentAmount(frontendAmount); // Only update selection if the amount prop was changed from the outside and is not the same as the current amount we just computed @@ -216,10 +241,7 @@ function MoneyRequestAmountInput( end: frontendAmount.length, }); } - - // we want to re-initialize the state only when the amount changes - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [amount, shouldKeepUserInput]); + }, [amount, currency, formatAmountOnBlur, shouldKeepUserInput, onFormatAmount, shouldResetAmount, onResetAmount, currentAmount]); // Modifies the amount to match the decimals for changed currency. useEffect(() => { diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 1fbd6a6b2630..f5ac7d628587 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -287,7 +287,7 @@ function MoneyRequestConfirmationList({ const isMerchantRequired = isPolicyExpenseChat && (!isScanRequest || isEditingSplitBill) && shouldShowMerchant; const isCategoryRequired = !!policy?.requiresCategory; - + const [shouldResetAmount, setShouldResetAmount] = useState(false); useEffect(() => { if (shouldDisplayFieldError && didConfirmSplit) { setFormError('iou.error.genericSmartscanFailureMessage'); @@ -466,6 +466,8 @@ function MoneyRequestConfirmationList({ onFormatAmount={CurrencyUtils.convertToDisplayStringWithoutCurrency} onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? -1, Number(value))} maxLength={formattedTotalAmount.length} + shouldResetAmount={shouldResetAmount} + onResetAmount={(resetValue) => setShouldResetAmount(resetValue)} /> ), })); @@ -488,6 +490,7 @@ function MoneyRequestConfirmationList({ transaction?.comment?.splits, transaction?.splitShares, onSplitShareChange, + shouldResetAmount, ]); const isSplitModified = useMemo(() => { @@ -505,6 +508,7 @@ function MoneyRequestConfirmationList({ { IOU.resetSplitShares(transaction); + setShouldResetAmount(true); }} accessibilityLabel={CONST.ROLE.BUTTON} role={CONST.ROLE.BUTTON}