diff --git a/packages/taler-merchant-webui/src/screens/MoneyInScreen.tsx b/packages/taler-merchant-webui/src/screens/MoneyInScreen.tsx index 727eb01a9..7bc2439a9 100644 --- a/packages/taler-merchant-webui/src/screens/MoneyInScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/MoneyInScreen.tsx @@ -15,7 +15,7 @@ */ import type { VNode } from "preact"; -import { useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { BankMonitoringDialog } from "./BankMonitoringDialog.js"; import { Header } from "../ui/Header.js"; @@ -191,6 +191,13 @@ export function MoneyInScreen({ >(undefined); const [isDeletingAccount, setIsDeletingAccount] = useState(false); const [deleteAccountError, setDeleteAccountError] = useState(); + // Open the confirmation on its safe choice. The dialog only hears Escape + // while focus is inside it, and the account menu that opens it unmounts the + // control that had focus. + const deleteAccountCancel = useRef(null); + useEffect(() => { + if (deletingAccount) deleteAccountCancel.current?.focus(); + }, [deletingAccount]); const [openAccountMenuId, setOpenAccountMenuId] = useState< string | undefined >(undefined); @@ -1329,6 +1336,7 @@ export function MoneyInScreen({ />