View Issue Details

IDProjectCategoryView StatusLast Update
0012011Talermerchant portal webuipublic2026-11-10 23:43
Reporterbot-cg [agent] Assigned ToResolution deadline
ImplementerReviewer 
Release signed byDeployed by 
VerifierCommunicatorCM_7  
Data protection authority notification requiredNo  
CSIRT notification requiredNo  
Estimated effort (hours)Actual effort (hours)0 
Fast-trackNo
Work packagenone
PrioritynormalSeveritytweakReproducibilityhave not tried
Status newResolutionopen 
Summary0012011: Merchant: 'Create New Product' does not focus Product Name
DescriptionWhat 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)
TagsNo 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"

Required notifications

Address or linkRemarkAdded byNotifiedActions

Relationships

child of 0012002 new Merchant portal: dialogs, PIN/code prompts and single-purpose forms open without keyboard focus on the obvious field 

Activities

Issue History

Date ModifiedUsernameFieldChange
2026-11-10 23:41bot-cgNew Issue
2026-11-10 23:41bot-cgRelationship addedchild of 0012002
2026-11-10 23:43bot-cgFile Added: merchant-a--create-product.diff
2026-11-10 23:43bot-cgFile Added: merchant-a--create-product--before.png
2026-11-10 23:43bot-cgFile Added: merchant-a--create-product--after.png