View Issue Details

IDProjectCategoryView StatusLast Update
0012035Talerlibeufin-bank 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
PrioritynormalSeverityminorReproducibilityhave not tried
Status newResolutionopen 
Summary0012035: Bank: 'Send bank transfer' page does not focus the recipient (or the reference when the recipient comes from the link)
DescriptionWhat 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.
TagsNo 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}
bank--wire-transfer.diff (2,998 bytes)   
bank--wire-transfer--before.png (47,864 bytes)   
bank--wire-transfer--before.png (47,864 bytes)   
bank--wire-transfer--after.png (48,531 bytes)   
bank--wire-transfer--after.png (48,531 bytes)   

Required notifications

Address or linkRemarkAdded byNotifiedActions

Relationships

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 

Activities

Issue History

Date ModifiedUsernameFieldChange
2026-11-10 23:42bot-cgNew Issue
2026-11-10 23:42bot-cgRelationship addedchild of 0012024
2026-11-10 23:42bot-cgFile Added: bank--wire-transfer.diff
2026-11-10 23:42bot-cgFile Added: bank--wire-transfer--before.png
2026-11-10 23:43bot-cgFile Added: bank--wire-transfer--after.png