From ab65d2582feb64b65bcc2b2b1158ed423359c740 Mon Sep 17 00:00:00 2001 From: feitianbubu Date: Sun, 26 Jul 2026 14:46:05 +0800 Subject: [PATCH] fix: allow topup amount input to be fully cleared (#6473) --- .../features/wallet/components/recharge-form-card.tsx | 10 ++++++++-- web/src/features/wallet/index.tsx | 8 +++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/web/src/features/wallet/components/recharge-form-card.tsx b/web/src/features/wallet/components/recharge-form-card.tsx index 43b36303..95f3663a 100644 --- a/web/src/features/wallet/components/recharge-form-card.tsx +++ b/web/src/features/wallet/components/recharge-form-card.tsx @@ -116,7 +116,10 @@ export function RechargeFormCard({ const [localAmount, setLocalAmount] = useState(topupAmount.toString()) useEffect(() => { - setLocalAmount(topupAmount.toString()) + // Empty string must survive, otherwise the field can never be cleared + setLocalAmount((prev) => + prev === '' && topupAmount === 0 ? prev : topupAmount.toString() + ) }, [topupAmount]) const handleAmountChange = (value: string) => { @@ -317,7 +320,10 @@ export function RechargeFormCard({ {hasStandardPaymentMethods ? (
{topupInfo?.pay_methods?.map((method) => { - const minTopup = method.min_topup || 0 + const minTopup = Math.max( + method.min_topup || 0, + getMinTopupAmount(topupInfo) + ) const disabled = minTopup > topupAmount const disabledReason = disabled ? t('Minimum topup amount: {{amount}}', { diff --git a/web/src/features/wallet/index.tsx b/web/src/features/wallet/index.tsx index 2a9e0ccc..5a9cb9e0 100644 --- a/web/src/features/wallet/index.tsx +++ b/web/src/features/wallet/index.tsx @@ -16,7 +16,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ -import { useState, useEffect, useCallback, useMemo } from 'react' +import { useState, useEffect, useCallback, useMemo, useRef } from 'react' import { useTranslation } from 'react-i18next' import { SectionPageLayout } from '@/components/layout' @@ -137,8 +137,10 @@ export function Wallet(props: WalletProps) { }, [props.initialShowHistory]) // Initialize topup amount when topup info is loaded + const topupAmountInitializedRef = useRef(false) useEffect(() => { - if (topupInfo && topupAmount === 0) { + if (topupInfo && !topupAmountInitializedRef.current) { + topupAmountInitializedRef.current = true const minTopup = getMinTopupAmount(topupInfo) setTopupAmount(minTopup) @@ -146,7 +148,7 @@ export function Wallet(props: WalletProps) { const defaultPaymentType = getDefaultPaymentType(topupInfo) calculatePaymentAmount(minTopup, defaultPaymentType) } - }, [topupInfo, topupAmount, calculatePaymentAmount]) + }, [topupInfo, calculatePaymentAmount]) // Get current payment type (selected or default) const getCurrentPaymentType = useCallback(() => {