View Issue Details

IDProjectCategoryView StatusLast Update
0012012Talermerchant 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 
Summary0012012: Merchant: 'Create Machine Access' does not focus 'Used for'
DescriptionWhat happens:
Access -> '+ Create machine access' opens the form; focus is on BODY.

Expected:
Focus 'Used for', the first (required) field.

Where:
  - packages/taler-merchant-webui/src/screens/CreateAccessScreen.tsx:123

Measured in headless Chromium (document.activeElement):
  before: BODY
  after: INPUT#acc_used_for

Proposed fix:
Ref on #acc_used_for focused on mount.

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; routes/createAccess.test same pre-existing env failures with and without the change
TagsNo tags attached.
Attached Files
merchant-a--create-access.diff (1,473 bytes)   
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<string>("");
+  // New access starts with what it is for.
+  const usedForInput = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    usedForInput.current?.focus();
+  }, []);
   const [canDo, setCanDo] = useState<string>("take_payments");
   const [expires, setExpires] = useState<string>("30d");
   const [password, setPassword] = useState<string>("");
@@ -217,6 +222,7 @@ export function CreateAccessScreen({
                 {t`Used for`} <span class="text-red-500">*</span>
               </label>
               <input
+                ref={usedForInput}
                 {...fieldProps("acc_used_for")}
                 id="acc_used_for"
                 type="text"
merchant-a--create-access.diff (1,473 bytes)   

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-access.diff
2026-11-10 23:43bot-cgFile Added: merchant-a--create-access--before.png
2026-11-10 23:43bot-cgFile Added: merchant-a--create-access--after.png