View Issue Details

IDProjectCategoryView StatusLast Update
0012014Talermerchant 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 
Summary0012014: Merchant: 'Add a bank account' does not focus the IBAN
DescriptionWhat happens:
Bank accounts -> add: the method select comes first and already holds the usual choice; nothing is focused (BODY).

Expected:
Focus the account's first field (IBAN, or Bank Server Host for x-taler-bank).

Where:
  - packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx:93

Measured in headless Chromium (document.activeElement):
  before: BODY
  after: INPUT#payout-iban

Proposed fix:
Form ref + mount effect calling focusFirstEmptyField (skips the select).

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. Depends on the untracked src/utils/focus.ts (focusFirstEmptyField).
TagsNo tags attached.
Attached Files
merchant-a--add-payout-account.diff (1,752 bytes)   
diff --git a/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx b/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx
index 5bceb98ee..05eeb19ad 100644
--- a/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx
+++ b/packages/taler-merchant-webui/src/screens/AddPayoutAccountScreen.tsx
@@ -16,7 +16,7 @@
 
 import { FormActionFooter, useFormFeedback } from "../ui/FormActionFooter.js";
 import type { VNode } from "preact";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import {
   validateIban,
   Paytos,
@@ -30,6 +30,7 @@ import { ApiErrorBanner } from "../ui/ApiErrorBanner.js";
 import { normalizeUiFailure } from "../utils/errors.js";
 import type { RemoteResource } from "../api/contracts.js";
 import { ReadErrorBanner } from "../ui/ReadErrorBanner.js";
+import { focusFirstEmptyField } from "../utils/focus.js";
 
 export interface AddPayoutAccountScreenProps {
   paymentTargetTypes?: string;
@@ -87,6 +88,13 @@ export function AddPayoutAccountScreen({
     feedbackId,
   } = useFormFeedback();
 
+  // Start on the account's first field, past the method chooser, which
+  // already holds the usual choice.
+  const form = useRef<HTMLFormElement>(null);
+  useEffect(() => {
+    focusFirstEmptyField(form.current);
+  }, []);
+
   useEffect(() => {
     if (allowedMethods.length > 0 && !allowedMethods.includes(wireMethod)) {
       setWireMethod(allowedMethods[0]!);
@@ -170,6 +178,7 @@ export function AddPayoutAccountScreen({
       />
 
       <form
+        ref={form}
         onSubmit={handleSubmit}
         class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-5"
       >

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