diff --git a/packages/taler-merchant-webui/src/screens/CreateAccessScreen.tsx b/packages/taler-merchant-webui/src/screens/CreateAccessScreen.tsx index cd1c3d60c..d15ac9d5d 100644 --- a/packages/taler-merchant-webui/src/screens/CreateAccessScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/CreateAccessScreen.tsx @@ -15,7 +15,7 @@ */ import type { VNode } from "preact"; -import { useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useLocation } from "wouter-preact"; import { Header } from "../ui/Header.js"; import { useTranslation, type TranslateFn } from "../context/translation.js"; @@ -119,6 +119,11 @@ export function CreateAccessScreen({ // Form State (Spec 02 ยง 2.6.1) const [usedFor, setUsedFor] = useState(""); + // New access starts with what it is for. + const usedForInput = useRef(null); + useEffect(() => { + usedForInput.current?.focus(); + }, []); const [canDo, setCanDo] = useState("take_payments"); const [expires, setExpires] = useState("30d"); const [password, setPassword] = useState(""); @@ -217,6 +222,7 @@ export function CreateAccessScreen({ {t`Used for`} *