diff --git a/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx b/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx index 5bceb98ee..05eeb19ad 100644 --- a/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx @@ -16,7 +16,7 @@ import { FormActionFooter, useFormFeedback } from "../ui/FormActionFooter.js"; import type { VNode } from "preact"; -import { useEffect, useMemo, useState } from "preact/hooks"; +import { useEffect, useMemo, useRef, useState } from "preact/hooks"; import { validateIban, Paytos, @@ -30,6 +30,7 @@ import { ApiErrorBanner } from "../ui/ApiErrorBanner.js"; import { normalizeUiFailure } from "../utils/errors.js"; import type { RemoteResource } from "../api/contracts.js"; import { ReadErrorBanner } from "../ui/ReadErrorBanner.js"; +import { focusFirstEmptyField } from "../utils/focus.js"; export interface AddPayoutAccountScreenProps { paymentTargetTypes?: string; @@ -87,6 +88,13 @@ export function AddPayoutAccountScreen({ feedbackId, } = useFormFeedback(); + // Start on the account's first field, past the method chooser, which + // already holds the usual choice. + const form = useRef(null); + useEffect(() => { + focusFirstEmptyField(form.current); + }, []); + useEffect(() => { if (allowedMethods.length > 0 && !allowedMethods.includes(wireMethod)) { setWireMethod(allowedMethods[0]!); @@ -170,6 +178,7 @@ export function AddPayoutAccountScreen({ />