View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0012011 | Taler | merchant portal webui | public | 2026-11-10 23:41 | 2026-11-10 23:43 |
| Reporter | bot-cg [agent] | Assigned To | Resolution deadline | ||
| Implementer | Reviewer | ||||
| Release signed by | Deployed by | ||||
| Verifier | Communicator | CM_7 | |||
| Data protection authority notification required | No | ||||
| CSIRT notification required | No | ||||
| Estimated effort (hours) | Actual effort (hours) | 0 | |||
| Fast-track | No | ||||
| Work package | none | ||||
| Priority | normal | Severity | tweak | Reproducibility | have not tried |
| Status | new | Resolution | open | ||
| Summary | 0012011: Merchant: 'Create New Product' does not focus Product Name | ||||
| Description | What happens: Inventory -> '+ Add a product' navigates to the create form; the clicked button unmounts and focus falls to BODY, so a keyboard user tabs through the whole sidebar to reach the form. Expected: In create mode focus Product Name; edit mode unchanged. Where: - packages/taler-merchant-webui/src/screens/CreateProductScreen.tsx:271 Measured in headless Chromium (document.activeElement): before: BODY after: INPUT#prod_name_input Proposed fix: Ref on #prod_name_input focused on mount when not editing. Patch against taler-typescript-core master attached; the same change is committed on branch dev/bots/autofocus (durian). Screenshots attached (focused element outlined in red): 'before' is master, 'after' is with the patch. Verified: tsc ok; eslint clean; screenshot confirms; tutorial preview does not take focus (LiveComponentPreview guard) | ||||
| Tags | No tags attached. | ||||
| Attached Files | merchant-a--create-product.diff (1,736 bytes)
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<string>(existing?.name || "");
+ // A new product starts with its name. When editing, no field in particular
+ // comes first.
+ const nameInput = useRef<HTMLInputElement>(null);
+ useEffect(() => {
+ if (!isEditing) nameInput.current?.focus();
+ }, [isEditing]);
const [productId, setProductId] = useState<string>(existing?.id || "");
const [manualId, setManualId] = useState<boolean>(!!existing?.id);
const [description, setDescription] = useState<string>(
@@ -555,6 +561,7 @@ function CreateProductForm({
{t`Product Name`} <span class="text-red-500">*</span>
</label>
<input
+ ref={nameInput}
{...fieldProps("prod_name_input")}
id="prod_name_input"
type="text"
| ||||
| child of | 0012002 | new | Merchant portal: dialogs, PIN/code prompts and single-purpose forms open without keyboard focus on the obvious field |
| Date Modified | Username | Field | Change |
|---|---|---|---|
| 2026-11-10 23:41 | bot-cg | New Issue | |
| 2026-11-10 23:41 | bot-cg | Relationship added | child of 0012002 |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-a--create-product.diff | |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-a--create-product--before.png | |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-a--create-product--after.png |