View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0012035 | Taler | libeufin-bank webui | public | 2026-11-10 23:42 | 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 | minor | Reproducibility | have not tried |
| Status | new | Resolution | open | ||
| Summary | 0012035: Bank: 'Send bank transfer' page does not focus the recipient (or the reference when the recipient comes from the link) | ||||
| Description | What happens: #/account/wire-transfer and #/wire-transfer/<account> render WireTransfer -> PaytoWireTransferForm without `focus`. The account-page redesign (a402cc1a2) dropped the `focus` that the old tabbed PaymentOptions passed. Measured activeElement: BODY. Also, even with `focus`, the fixed-recipient route passed it to the recipient TextField, which is disabled there, so focusing it did nothing. Expected: Recipient field focused. When the recipient is fixed by the link, the transfer reference (the first editable field) is focused. Where: - packages/libeufin-bank-webui/src/pages/WireTransfer.tsx:112 - packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx:429 - packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx:444 - packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx:466 - packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx:646 Measured in headless Chromium (document.activeElement): before: BODY (both routes) after: INPUT#x-taler-bank (recipient); fixed-recipient route: TEXTAREA#subject Proposed fix: WireTransfer passes `focus`. PaytoWireTransferForm gives it to the recipient only when that field is editable, and otherwise to the subject textarea. Also part of this file: the package's own doAutoFocus helper (defined here) used scrollIntoView({block:'center'}), which dates from when the forms sat at the bottom of the account page. On the redesigned pages it scrolled the heading and 'Back to overview' off screen (seen on the withdraw and cashout pages). Its block and inline options are now 'nearest', so it scrolls only when the field is not visible. That affects every doAutoFocus call site in the package. 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 for touched files; unit tests 94/94; Chromium screenshots for both routes (fixed route: shots/bank--wire-transfer-fixed-recipient--{before,after}.png). Mobile 390x844 check of the withdraw and cashout pages after the scroll change: no page scroll, heading stays visible. | ||||
| Tags | No tags attached. | ||||
| Attached Files | bank--wire-transfer.diff (2,998 bytes)
diff --git a/packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx b/packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx
index b8e856f6c..0ba65c983 100644
--- a/packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/libeufin-bank-webui/src/pages/PaytoWireTransferForm.tsx
@@ -426,7 +426,7 @@ export function PaytoWireTransferForm({
onChange={setAccount}
value={account}
placeholder={i18n.str`username`}
- focus={focus}
+ focus={focus && !sendingToFixedAccount}
disabled={sendingToFixedAccount}
/>
);
@@ -441,7 +441,7 @@ export function PaytoWireTransferForm({
error={errorsWire?.account}
onChange={(value) => setAccount(value.toUpperCase())}
value={account}
- focus={focus}
+ focus={focus && !sendingToFixedAccount}
disabled={sendingToFixedAccount}
/>
);
@@ -460,6 +460,11 @@ export function PaytoWireTransferForm({
</label>
<div class="mt-2">
<textarea
+ // The recipient is locked when it came with the link, so
+ // the reference is the first thing left to fill in.
+ ref={
+ focus && sendingToFixedAccount ? doAutoFocus : undefined
+ }
rows={2}
class="block w-full rounded-md border-0 py-1.5 text-onBackground shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
name="subject"
@@ -633,10 +638,13 @@ export function doAutoFocus(element: HTMLElement | null) {
if (element) {
setTimeout(() => {
element.focus({ preventScroll: true });
+ // Scroll only when the element is out of view: the forms are near the
+ // top of their own pages, and centering them would push the page
+ // heading off screen.
element.scrollIntoView({
behavior: "smooth",
- block: "center",
- inline: "center",
+ block: "nearest",
+ inline: "nearest",
});
}, 100);
}
diff --git a/packages/libeufin-bank-webui/src/pages/WireTransfer.tsx b/packages/libeufin-bank-webui/src/pages/WireTransfer.tsx
index b038aaa5d..c434758a4 100644
--- a/packages/libeufin-bank-webui/src/pages/WireTransfer.tsx
+++ b/packages/libeufin-bank-webui/src/pages/WireTransfer.tsx
@@ -109,6 +109,7 @@ export function WireTransfer({
</i18n.Translate>
</p>
<PaytoWireTransferForm
+ focus
withAccount={toAccount}
withAmount={withAmount}
withSubject={withSubject}
| ||||
| child of | 0012024 | new | Web UIs (bank, wallet, exchange AML/KYC, challenger, auditor, web-util forms): dialogs and single-purpose forms open without keyboard focus on the obvious field |
| Date Modified | Username | Field | Change |
|---|---|---|---|
| 2026-11-10 23:42 | bot-cg | New Issue | |
| 2026-11-10 23:42 | bot-cg | Relationship added | child of 0012024 |
| 2026-11-10 23:42 | bot-cg | File Added: bank--wire-transfer.diff | |
| 2026-11-10 23:42 | bot-cg | File Added: bank--wire-transfer--before.png | |
| 2026-11-10 23:43 | bot-cg | File Added: bank--wire-transfer--after.png |