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(null); + useEffect(() => { + form.current + ?.querySelector("#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 */}