View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0012014 | 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 | 0012014: Merchant: 'Add a bank account' does not focus the IBAN | ||||
| Description | What 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). | ||||
| Tags | No 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"
>
| ||||
| 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--add-payout-account.diff | |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-a--add-payout-account--before.png | |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-a--add-payout-account--after.png |