diff --git a/packages/wallet-webui/src/screens/PeerCreateScreen.tsx b/packages/wallet-webui/src/screens/PeerCreateScreen.tsx index 18f8bb33d..f2574e5b8 100644 --- a/packages/wallet-webui/src/screens/PeerCreateScreen.tsx +++ b/packages/wallet-webui/src/screens/PeerCreateScreen.tsx @@ -189,6 +189,13 @@ export function PeerCreateScreen(props: { : { kind: "days", days: Number(expirationMode) as 1 | 7 | 30 }; const validExpiration = expiration.kind !== "custom" || Boolean(expiration.value); + const amountInput = useRef(null); + const formVisible = !props.review && !props.loading && !scopeUnavailable; + // The form appears only after the scopes have loaded, and again when + // returning from the review step; the amount is what the user enters first. + useEffect(() => { + if (formVisible) amountInput.current?.focus({ preventScroll: true }); + }, [formVisible]); useEffect(() => { const sequence = ++previewSequence.current; const resolveDefaultExpiration = props.onResolveDefaultExpiration; @@ -291,7 +298,7 @@ export function PeerCreateScreen(props: { )} {props.error && } - {!props.review && !props.loading && !scopeUnavailable && ( + {formVisible && (
{ @@ -336,6 +343,7 @@ export function PeerCreateScreen(props: {