diff --git a/packages/taler-merchant-webui/src/screens/CreateOrderScreen.tsx b/packages/taler-merchant-webui/src/screens/CreateOrderScreen.tsx index 16103a65a..3220b27eb 100644 --- a/packages/taler-merchant-webui/src/screens/CreateOrderScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/CreateOrderScreen.tsx @@ -15,7 +15,7 @@ */ import type { VNode } from "preact"; -import { useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useLocation } from "wouter-preact"; import { Header } from "../ui/Header.js"; import { FormActionFooter, useFormFeedback } from "../ui/FormActionFooter.js"; @@ -232,6 +232,15 @@ export function CreateOrderScreen({ "quick", ); const [amountInput, setAmountInput] = useState("10.00"); + // An order starts with its amount. The suggested one is selected so that + // typing replaces it. + const form = useRef(null); + useEffect(() => { + const amount = + form.current?.querySelector("#order-amount"); + amount?.focus(); + amount?.select(); + }, []); const [itemizedOverrideEnabled, setItemizedOverrideEnabled] = useState(false); const [itemizedOverrideAmount, setItemizedOverrideAmount] = @@ -1235,7 +1244,7 @@ export function CreateOrderScreen({ -
+ <>