diff --git a/packages/taler-merchant-webui/src/screens/OrderDetailScreen.tsx b/packages/taler-merchant-webui/src/screens/OrderDetailScreen.tsx
index ac00362c8..7ed05d14f 100644
--- a/packages/taler-merchant-webui/src/screens/OrderDetailScreen.tsx
+++ b/packages/taler-merchant-webui/src/screens/OrderDetailScreen.tsx
@@ -16,7 +16,7 @@
 
 import { useLocation } from "wouter-preact";
 import type { VNode } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { Header } from "../ui/Header.js";
 import { TalerQrCode } from "../ui/TalerQrCode.js";
 import { ApiErrorBanner } from "../ui/ApiErrorBanner.js";
@@ -162,6 +162,12 @@ export function OrderDetailScreen({
   const [forceDelete, setForceDelete] = useState<boolean>(false);
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
   const [deleteError, setDeleteError] = useState<string>("");
+  // Open the confirmation on its safe choice. The dialog only hears Escape
+  // while focus is inside it, and the menu that opens it leaves focus behind.
+  const deleteCancel = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (showDeleteModal) deleteCancel.current?.focus();
+  }, [showDeleteModal]);
 
   const [now, setNow] = useState<AbsoluteTimeValue>(
     nowProp ?? AbsoluteTime.now(),
@@ -408,6 +414,7 @@ export function OrderDetailScreen({
             </label>
             <div class="flex space-x-3 pt-2">
               <button
+                ref={deleteCancel}
                 onClick={() => setShowDeleteModal(false)}
                 class="flex-1 px-4 py-2 text-xs font-bold bg-gray-100 rounded-lg hover:bg-gray-200 cursor-pointer"
               >{t`Cancel`}</button>