Merge pull request Expensify#42897 from kaushiktd/reset-amount-keyboa…

…rd-up Reset amount on reset button click
mollfpr · Jul 11, 2024 · 109d4aa · 109d4aa
2 parents 74d16f0 + b1eda3e
commit 109d4aa
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git 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<BaseTextInputRef>,
@@ -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
@@ -291,7 +291,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');
@@ -470,6 +470,8 @@ function MoneyRequestConfirmationList({
                     onFormatAmount={CurrencyUtils.convertToDisplayStringWithoutCurrency}
                     onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? -1, Number(value))}
                     maxLength={formattedTotalAmount.length}
+                    shouldResetAmount={shouldResetAmount}
+                    onResetAmount={(resetValue) => setShouldResetAmount(resetValue)}
                 />
             ),
         }));
@@ -492,6 +494,7 @@ function MoneyRequestConfirmationList({
         transaction?.comment?.splits,
         transaction?.splitShares,
         onSplitShareChange,
+        shouldResetAmount,
     ]);
 
     const isSplitModified = useMemo(() => {
@@ -509,6 +512,7 @@ function MoneyRequestConfirmationList({
                     <PressableWithFeedback
                         onPress={() => {
                             IOU.resetSplitShares(transaction);
+                            setShouldResetAmount(true);
                         }}
                         accessibilityLabel={CONST.ROLE.BUTTON}
                         role={CONST.ROLE.BUTTON}