Reset amount on reset button click

src/components/MoneyRequestAmountInput.tsx

@@ -86,6 +86,10 @@ type MoneyRequestAmountInputProps = {
      * Autogrow input container length based on the entered text.
      */
     autoGrow?: boolean;
+
+    shouldResetAmount?: boolean;
+
+    onResetAmount?: (resetValue: boolean) => void;
 };
 
 type Selection = {
@@ -121,6 +125,8 @@ function MoneyRequestAmountInput(
         hideFocusedState = true,
         shouldKeepUserInput = false,
         autoGrow = true,
+        shouldResetAmount,
+        onResetAmount,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -196,10 +202,23 @@ function MoneyRequestAmountInput(
     }));
 
     useEffect(() => {
-        if (!currency || typeof amount !== 'number' || (formatAmountOnBlur && textInput.current?.isFocused()) || shouldKeepUserInput) {
+        const shouldExitEarly = !currency || typeof amount !== 'number' || (formatAmountOnBlur && textInput.current?.isFocused()) || shouldKeepUserInput;
+        const frontendAmount = onFormatAmount(amount, currency);
+
+        if (shouldResetAmount) {
+            setCurrentAmount(frontendAmount);
+            setSelection({
+                start: frontendAmount.length,
+                end: frontendAmount.length,
+            });
+            onResetAmount?.(false);
             return;
         }
-        const frontendAmount = onFormatAmount(amount, currency);
+
+        if (shouldExitEarly) {
+            return;
+        }
+
         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

src/components/MoneyRequestConfirmationList.tsx

@@ -339,6 +339,7 @@ function MoneyRequestConfirmationList({
     const shouldDisplayMerchantError = isMerchantRequired && (shouldDisplayFieldError || formError === 'iou.error.invalidMerchant') && isMerchantEmpty;
 
     const isCategoryRequired = !!policy?.requiresCategory;
+    const [shouldResetAmount, setShouldResetAmount] = useState(false);
 
     useEffect(() => {
         if (shouldDisplayFieldError && didConfirmSplit) {
@@ -519,6 +520,8 @@ function MoneyRequestConfirmationList({
                     onFormatAmount={CurrencyUtils.convertToDisplayStringWithoutCurrency}
                     onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value))}
                     maxLength={formattedTotalAmount.length}
+                    shouldResetAmount={shouldResetAmount}
+                    onResetAmount={() => setShouldResetAmount(false)}
                 />
             ),
         }));
@@ -541,6 +544,7 @@ function MoneyRequestConfirmationList({
         transaction?.comment?.splits,
         transaction?.splitShares,
         onSplitShareChange,
+        shouldResetAmount,
     ]);
 
     const isSplitModified = useMemo(() => {
@@ -558,6 +562,7 @@ function MoneyRequestConfirmationList({
                     <PressableWithFeedback
                         onPress={() => {
                             IOU.resetSplitShares(transaction);
+                            setShouldResetAmount(true);
                         }}
                         accessibilityLabel={CONST.ROLE.BUTTON}
                         role={CONST.ROLE.BUTTON}