alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update EditModal component to handle Escape key press

Browse Source
This commit is contained in:
Sean Morley
2024-04-01 21:27:02 +00:00
parent 8796035016
commit 301e630405
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/components/EditModal.svelte
View File

@@ -9,6 +9,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
let originalName = editName;
onMount(() => { onMount(() => {
modal = document.getElementById("my_modal_1") as HTMLDialogElement; modal = document.getElementById("my_modal_1") as HTMLDialogElement;
if (modal) { if (modal) {
@@ -27,11 +29,19 @@
function close() { function close() {
dispatch('close'); dispatch('close');
} }
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
close();
}
}
</script> </script>
<dialog id="my_modal_1" class="modal" > <dialog id="my_modal_1" class="modal" >
<div class="modal-box"> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<h3 class="font-bold text-lg">Edit Adventure {editName}</h3> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">Edit Adventure {originalName}</h3>
<p class="py-4">Press ESC key or click the button below to close</p> <p class="py-4">Press ESC key or click the button below to close</p>
<div class="modal-action"> <div class="modal-action">
<form method="dialog"> <form method="dialog">