View Issue Details

IDProjectCategoryView StatusLast Update
0012016Talermerchant 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
PrioritynormalSeverityminorReproducibilityhave not tried
Status newResolutionopen 
Summary0012016: Merchant: Grant Refund screen does not focus the refund amount
DescriptionWhat happens:
Order detail -> 'Grant Refund' opens #/orders/<id>/refund, a page whose only purpose is the refund form. Nothing is focused (activeElement BODY); the user has to click into the amount before typing.

Expected:
The refund amount (the field the screen exists for, prefilled with the remaining amount) has focus once the order has loaded.

Where:
  - packages/taler-merchant-webui/src/screens/OrderRefundScreen.tsx:164
  - packages/taler-merchant-webui/src/screens/OrderRefundScreen.tsx:325

Measured in headless Chromium (document.activeElement):
  before: BODY
  after: INPUT#refund-amount-input[number]

Proposed fix:
A ref on the form plus an effect keyed on order?.orderId focuses #refund-amount-input (AmountInput does not forward refs). Keying on the order id makes it fire when the order arrives after the loading state, and not again on background refreshes of the same order.

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 file; eslint/prettier clean; screens.test.js passes; screenshot confirms; tutorial chapter 12 preview does not steal focus (guard case)
TagsNo tags attached.
Attached Files
merchant-b--order-refund-screen.diff (1,924 bytes)   
diff --git a/packages/taler-merchant-webui/src/screens/OrderRefundScreen.tsx b/packages/taler-merchant-webui/src/screens/OrderRefundScreen.tsx
index 3063d3bf2..beb8d8dc7 100644
--- a/packages/taler-merchant-webui/src/screens/OrderRefundScreen.tsx
+++ b/packages/taler-merchant-webui/src/screens/OrderRefundScreen.tsx
@@ -18,7 +18,7 @@ import { Amounts, AbsoluteTime } from "@gnu-taler/taler-util";
 import { useLocation } from "wouter-preact";
 import { FormActionFooter, useFormFeedback } from "../ui/FormActionFooter.js";
 import type { VNode } from "preact";
-import { useState, useEffect } from "preact/hooks";
+import { useState, useEffect, useRef } from "preact/hooks";
 import { Header } from "../ui/Header.js";
 import { ApiErrorBanner } from "../ui/ApiErrorBanner.js";
 import { ReadErrorBanner } from "../ui/ReadErrorBanner.js";
@@ -158,6 +158,16 @@ export function OrderRefundScreen({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only a new order amount should reset the field; re-running when the preset changes would fight the merchant's own choice.
   }, [remainingAmount]);
 
+  // The amount is what this screen exists to ask for. The form only appears
+  // once the order has loaded, so focus follows the order rather than the
+  // mount, and a background refresh of the same order leaves focus alone.
+  const form = useRef<HTMLFormElement>(null);
+  useEffect(() => {
+    form.current
+      ?.querySelector<HTMLInputElement>("#refund-amount-input")
+      ?.focus();
+  }, [order?.orderId]);
+
   const handleSelectPreset = (percent: number, presetLabel: string) => {
     setSelectedPreset(presetLabel);
     if (!remainingAmount) return;
@@ -312,6 +322,7 @@ export function OrderRefundScreen({
 
       {/* Refund Form */}
       <form
+        ref={form}
         onSubmit={handleSubmit}
         class="bg-white border border-gray-200 rounded-lg p-5 space-y-5 text-sm"
       >

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-b--order-refund-screen.diff
2026-11-10 23:43bot-cgFile Added: merchant-b--order-refund-screen--before.png
2026-11-10 23:43bot-cgFile Added: merchant-b--order-refund-screen--after.png