diff --git a/packages/wallet-webui/src/screens/DonauSettingsScreen.tsx b/packages/wallet-webui/src/screens/DonauSettingsScreen.tsx index 0936486e6..13a2bf577 100644 --- a/packages/wallet-webui/src/screens/DonauSettingsScreen.tsx +++ b/packages/wallet-webui/src/screens/DonauSettingsScreen.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { Button } from "../ui/Button.js"; import { Card } from "../ui/Card.js"; import { ErrorCard } from "../ui/ErrorCard.js"; @@ -47,6 +47,23 @@ export function DonauSettingsScreen(props: { props.initialDonauBaseUrl, ]); const valid = donauBaseUrl.trim() !== "" && taxPayerId.trim() !== ""; + const urlInput = useRef(null); + const taxPayerInput = useRef(null); + const settingUp = + !props.loading && + (props.configuration === undefined || + props.initialDonauBaseUrl !== undefined); + const urlKnown = Boolean( + props.initialDonauBaseUrl ?? props.configuration?.donauBaseUrl, + ); + // While nothing is configured, or when a payment sent the user here to set + // up a suggested authority, the form is the purpose of the page: focus the + // first field that still needs to be entered. + useEffect(() => { + if (!settingUp) return; + if (urlKnown) taxPayerInput.current?.focus({ preventScroll: true }); + else urlInput.current?.focus({ preventScroll: true }); + }, [settingUp, urlKnown]); return (
@@ -83,6 +100,7 @@ export function DonauSettingsScreen(props: { i18n.str`Donation authority URL` }