From 99010ad770b32467b25b697891bc68df577a6916 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 28 Jul 2022 14:38:50 +0100 Subject: [PATCH] Auto focus modals so that escape and enter keys work without mouse intervention --- packages/bbui/src/Modal/Modal.svelte | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte index 706ee56bb2..85a3d25e49 100644 --- a/packages/bbui/src/Modal/Modal.svelte +++ b/packages/bbui/src/Modal/Modal.svelte @@ -11,6 +11,8 @@ const dispatch = createEventDispatcher() let visible = fixed || inline + let modal + $: dispatch(visible ? "show" : "hide") export function show() { @@ -41,12 +43,22 @@ } } - async function focusFirstInput(node) { + async function focusModal(node) { + await tick() + + // Try to focus first input const inputs = node.querySelectorAll("input") if (inputs?.length) { - await tick() inputs[0].focus() } + + // Otherwise try to focus confirmation button + else if (modal) { + const confirm = modal.querySelector(".confirm-wrap .spectrum-Button") + if (confirm) { + confirm.focus() + } + } } setContext(Context.Modal, { show, hide, cancel }) @@ -56,7 +68,7 @@ {#if inline} {#if visible} -
+
{/if} @@ -80,7 +92,8 @@