diff --git a/packages/taler-merchant-webui/src/screens/CreateProductScreen.tsx b/packages/taler-merchant-webui/src/screens/CreateProductScreen.tsx index 5e7db1df8..650429d4a 100644 --- a/packages/taler-merchant-webui/src/screens/CreateProductScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/CreateProductScreen.tsx @@ -19,7 +19,7 @@ import type { RecordLoss } from "../utils/inventory.js"; import type { VNode } from "preact"; import { session } from "../stores/session.js"; import { Amounts } from "@gnu-taler/taler-util"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useLocation } from "wouter-preact"; import { Header } from "../ui/Header.js"; import { FormActionFooter, useFormFeedback } from "../ui/FormActionFooter.js"; @@ -266,6 +266,12 @@ function CreateProductForm({ // Form State (Spec 07 ยง 7.2) const [name, setName] = useState(existing?.name || ""); + // A new product starts with its name. When editing, no field in particular + // comes first. + const nameInput = useRef(null); + useEffect(() => { + if (!isEditing) nameInput.current?.focus(); + }, [isEditing]); const [productId, setProductId] = useState(existing?.id || ""); const [manualId, setManualId] = useState(!!existing?.id); const [description, setDescription] = useState( @@ -555,6 +561,7 @@ function CreateProductForm({ {t`Product Name`} *