Reset amount on reset button click

src/components/MoneyRequestAmountInput.tsx

@@ -82,6 +82,9 @@ type MoneyRequestAmountInputProps = {
      * Autogrow input container length based on the entered text.
      */
     autoGrow?: boolean;
+
+    /** Flag indicating if the reset button was clicked to reset the amount */
+    resetClicked?: boolean;
 };
 
 type Selection = {
@@ -116,6 +119,7 @@ function MoneyRequestAmountInput(
         maxLength,
         hideFocusedState = true,
         autoGrow = true,
+        resetClicked = false,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -135,6 +139,7 @@ function MoneyRequestAmountInput(
     });
 
     const forwardDeletePressedRef = useRef(false);
+    const resetFlag = useRef(false);
 
     /**
      * Sets the selection and the amount accordingly to the value passed to the input
@@ -165,11 +170,14 @@ function MoneyRequestAmountInput(
                     hasSelectionBeenSet = true;
                     setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedAmount.length : prevAmount.length, strippedAmount.length));
                 }
-                onAmountChange?.(strippedAmount);
-                return strippedAmount;
+                const resultAmount = resetFlag.current ? selectedAmountAsString : strippedAmount;
+                onAmountChange?.(resultAmount);
+
+                resetFlag.current = false; // Reset the flag after handling
+                return resultAmount;
             });
         },
-        [decimals, onAmountChange],
+        [decimals, onAmountChange, selectedAmountAsString],
     );
 
     useImperativeHandle(moneyRequestAmountInputRef, () => ({
@@ -258,6 +266,16 @@ function MoneyRequestAmountInput(
 
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
 
+    useEffect(() => {
+        if (!resetClicked) {
+            return;
+        }
+
+        resetFlag.current = true;
+        setNewAmount(selectedAmountAsString);
+        setSelection({start: formattedAmount.length, end: formattedAmount.length}); // Move cursor to the end
+    }, [resetClicked, selectedAmountAsString, setNewAmount, formattedAmount]);
+
     return (
         <TextInputWithCurrencySymbol
             autoGrow={autoGrow}

src/components/MoneyRequestConfirmationList.tsx

@@ -344,6 +344,7 @@ function MoneyRequestConfirmationList({
     const shouldDisplayMerchantError = isMerchantRequired && (shouldDisplayFieldError || formError === 'iou.error.invalidMerchant') && isMerchantEmpty;
 
     const isCategoryRequired = !!policy?.requiresCategory;
+    const [resetClicked, setResetClicked] = useState(false);
 
     useEffect(() => {
         if (shouldDisplayFieldError && hasSmartScanFailed) {
@@ -513,6 +514,7 @@ function MoneyRequestConfirmationList({
                     onFormatAmount={CurrencyUtils.convertToDisplayStringWithoutCurrency}
                     onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value))}
                     maxLength={formattedTotalAmount.length}
+                    resetClicked={resetClicked}
                 />
             ),
         }));
@@ -535,6 +537,7 @@ function MoneyRequestConfirmationList({
         transaction?.comment?.splits,
         transaction?.splitShares,
         onSplitShareChange,
+        resetClicked,
     ]);
 
     const isSplitModified = useMemo(() => {
@@ -552,6 +555,7 @@ function MoneyRequestConfirmationList({
                     <PressableWithFeedback
                         onPress={() => {
                             IOU.resetSplitShares(transaction);
+                            setResetClicked(true);
                         }}
                         accessibilityLabel={CONST.ROLE.BUTTON}
                         role={CONST.ROLE.BUTTON}