From ea33c3f2664d69586fcdd4969c7edda82a1a7a00 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Wed, 24 Jun 2026 14:53:39 -0700 Subject: [PATCH] fix(amount-input): reliably autofocus the amount field on desktop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The amount field stopped auto-focusing when entering some flows (reported on add money): it used React's `autoFocus` prop, which only fires at the exact moment the input mounts and silently no-ops when the input mounts after a client-side navigation / step transition. Replace it with an explicit inputRef.focus() in a useEffect gated on the same desktop-only condition (shouldAutoFocus = deviceType === WEB), so focus lands regardless of mount timing. Mobile is unchanged (autofocus stays off by design). Shared component — restores focus across send / withdraw / qr-pay / add-money without altering the mobile path. --- src/components/Global/AmountInput/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Global/AmountInput/index.tsx b/src/components/Global/AmountInput/index.tsx index d2f256fbe..d3bcf3788 100644 --- a/src/components/Global/AmountInput/index.tsx +++ b/src/components/Global/AmountInput/index.tsx @@ -216,6 +216,14 @@ const AmountInput = ({ } }, [displayValue]) + // Autofocus the amount field on mount (desktop only). Done explicitly via the + // ref instead of React's `autoFocus` prop, which only fires at the exact moment + // of mount and silently no-ops when the input mounts after a client-side + // navigation/step transition (the add-money amount screen regressed this way). + useEffect(() => { + if (shouldAutoFocus) inputRef.current?.focus() + }, [shouldAutoFocus]) + return (
{