View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0012016 | 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 | minor | Reproducibility | have not tried |
| Status | new | Resolution | open | ||
| Summary | 0012016: Merchant: Grant Refund screen does not focus the refund amount | ||||
| Description | What 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) | ||||
| Tags | No 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"
>
| ||||
| 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-b--order-refund-screen.diff | |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-b--order-refund-screen--before.png | |
| 2026-11-10 23:43 | bot-cg | File Added: merchant-b--order-refund-screen--after.png |