diff --git a/packages/taler-merchant-webui/src/screens/TemplatesScreen.tsx b/packages/taler-merchant-webui/src/screens/TemplatesScreen.tsx index 4712104a6..c6139c75e 100644 --- a/packages/taler-merchant-webui/src/screens/TemplatesScreen.tsx +++ b/packages/taler-merchant-webui/src/screens/TemplatesScreen.tsx @@ -15,7 +15,7 @@ */ import type { VNode } from "preact"; -import { useState, useEffect } from "preact/hooks"; +import { useState, useEffect, useRef } from "preact/hooks"; import { useLocation } from "wouter-preact"; import { Header } from "../ui/Header.js"; import { TalerQrCode } from "../ui/TalerQrCode.js"; @@ -104,6 +104,18 @@ export function TemplatesScreen({ } }; + // These dialogs are opened from a row's action menu, which hands focus back + // to its trigger behind the overlay. Move it into the dialog instead, onto + // the choice that changes nothing. + const deleteCancel = useRef(null); + const qrClose = useRef(null); + useEffect(() => { + if (deletingTemplate) deleteCancel.current?.focus(); + }, [deletingTemplate]); + useEffect(() => { + if (previewQrTemplate) qrClose.current?.focus(); + }, [previewQrTemplate]); + useEffect(() => { if (!previewQrTemplate && !viewingTemplate && !deletingTemplate) return; const handleKeyDown = (e: KeyboardEvent) => { @@ -303,6 +315,7 @@ export function TemplatesScreen({