diff --git a/packages/wallet-webui/src/screens/BankAccountsScreen.tsx b/packages/wallet-webui/src/screens/BankAccountsScreen.tsx index 051179b24..0496144e5 100644 --- a/packages/wallet-webui/src/screens/BankAccountsScreen.tsx +++ b/packages/wallet-webui/src/screens/BankAccountsScreen.tsx @@ -114,6 +114,16 @@ export function BankAccountsScreen(props: { setPaytoUri(props.editing?.paytoUri ?? ""); setMethod(props.editing ? "advanced" : (guidedMethods[0] ?? "advanced")); }, [guidedMethods, props.editing]); + // Opening the form or starting an edit moves focus to its first text field, + // which also brings the form into view below the account list. An edit + // shows the payto URI field only once the reset above has switched to it. + const form = useRef(null); + const focusForm = useRef(false); + useEffect(() => { + if (!focusForm.current || (props.editing && method !== "advanced")) return; + focusForm.current = false; + form.current?.querySelector("input")?.focus(); + }); const wireType = props.wireTypes?.find( (entry) => entry.paymentTargetType === method, ); @@ -227,6 +237,7 @@ export function BankAccountsScreen(props: {