diff --git a/packages/taler-merchant-webui/src/screens/AdminAccountFormScreen.tsx b/packages/taler-merchant-webui/src/screens/AdminAccountFormScreen.tsx index 5fe1598f9..32e8e5eef 100644 --- a/packages/taler-merchant-webui/src/screens/AdminAccountFormScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/AdminAccountFormScreen.tsx @@ -9,7 +9,7 @@ import { FormActionFooter, useFormFeedback } from "../ui/FormActionFooter.js"; import type { VNode } from "preact"; -import { useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { isValidMerchantInstanceId, normalizeMerchantInstanceId, @@ -96,6 +96,12 @@ function AdminAccountFormInner({ const { t } = useTranslation(); const [value, setValue] = useState(initial); const [confirmPassword, setConfirmPassword] = useState(""); + // A new account starts with its identifier. When editing, the identifier is + // fixed and no field in particular comes first. + const accountIdInput = useRef(null); + useEffect(() => { + if (mode === "create") accountIdInput.current?.focus(); + }, [mode]); const [showAdvancedRequested, setShowAdvanced] = useState(mode === "edit"); const [ignoreInvalidLogo, setIgnoreInvalidLogo] = useState(false); const [customTiming, setCustomTiming] = useState( @@ -256,6 +262,7 @@ function AdminAccountFormInner({ {t`Account ID`} *