Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-30 02:09:37 +02:00
Code Issues Releases 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

16
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">