diff --git a/packages/wallet-webui/src/screens/WithdrawalScreen.tsx b/packages/wallet-webui/src/screens/WithdrawalScreen.tsx index 20a612835..0b4b26f88 100644 --- a/packages/wallet-webui/src/screens/WithdrawalScreen.tsx +++ b/packages/wallet-webui/src/screens/WithdrawalScreen.tsx @@ -60,9 +60,15 @@ export function WithdrawalScreen(props: { useEffect(() => { if (!amount && props.initialAmount) setAmount(props.initialAmount); }, [amount, props.initialAmount]); + // The amount field is only rendered once the exchanges have loaded, which + // is usually after the first render. It sits at the top of the page, so + // focusing it need not scroll; scrolling would also make the story + // catalogue, which shows many screens at once, jump to this one. + const amountShown = provider !== undefined && !props.cashAcceptor; useEffect(() => { - if (props.amountEditable !== false) amountInput.current?.focus(); - }, [props.amountEditable]); + if (amountShown && props.amountEditable !== false) + amountInput.current?.focus({ preventScroll: true }); + }, [amountShown, props.amountEditable]); const enteredAmount = positiveAmountValue(provider?.currency ?? "", amount); const normalizedAmount = positiveAmountValue( provider?.currency ?? "",