diff --git a/packages/wallet-webui/src/ui/ConfirmationDialog.tsx b/packages/wallet-webui/src/ui/ConfirmationDialog.tsx index 32844defa..72ce55961 100644 --- a/packages/wallet-webui/src/ui/ConfirmationDialog.tsx +++ b/packages/wallet-webui/src/ui/ConfirmationDialog.tsx @@ -25,6 +25,7 @@ export function ConfirmationDialog(props: { onConfirm: () => void; }) { const dialogRef = useRef(null); + const actionsRef = useRef(null); const previousFocus = useRef(null); const onCancel = useRef(props.onCancel); const working = useRef(props.working); @@ -38,8 +39,15 @@ export function ConfirmationDialog(props: { ? document.activeElement : null; const dialog = dialogRef.current; - const first = dialog ? focusableElements(dialog)[0] : undefined; - first?.focus(); + // Start on the first field the dialog asks for, otherwise on the cancel + // button: neither the confirming action nor an extra action placed in + // the body should be what Enter triggers by default. + const cancel = actionsRef.current?.querySelector("button"); + const initial = + dialog?.querySelector( + "input:not([disabled]), select:not([disabled]), textarea:not([disabled])", + ) ?? (cancel && !cancel.disabled ? cancel : dialog); + initial?.focus(); const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape" && !working.current) { event.preventDefault(); @@ -98,7 +106,7 @@ export function ConfirmationDialog(props: { {props.description} {props.children} -
+