diff --git a/packages/taler-merchant-webui/src/screens/CreateDeviceScreen.tsx b/packages/taler-merchant-webui/src/screens/CreateDeviceScreen.tsx index c96f09aad..5b4672124 100644 --- a/packages/taler-merchant-webui/src/screens/CreateDeviceScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/CreateDeviceScreen.tsx @@ -16,7 +16,7 @@ import type { VNode } from "preact"; import { currentBackendUrl, session } from "../stores/session.js"; -import { useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useLocation } from "wouter-preact"; import { DeviceSetupScreen, @@ -193,6 +193,12 @@ function CreateDeviceForm({ .replace(/^_+|_+$/g, ""); const [name, setName] = useState(existingDevice?.name || ""); + // A new device starts with its name. When editing, no field in particular + // comes first. + const nameInput = useRef(null); + useEffect(() => { + if (!editingId) nameInput.current?.focus(); + }, [editingId]); const [deviceId, setDeviceId] = useState(existingDevice?.id || ""); const [manualId, setManualId] = useState( Boolean(existingDevice?.id), @@ -330,6 +336,7 @@ function CreateDeviceForm({ {t`Name`} *