fix: ensure edit modals close properly on Enter and Escape
All checks were successful
CI / update (push) Successful in 1m12s

- Add setTimeout to defer modal.close() to next tick for proper Svelte binding updates
- Add HTMLDialogElement type casting with null checks for modal elements
- Add cancel event handlers to reset state when Escape is pressed
- Ensures modals close reliably when Enter is pressed to submit
- Prevents orphaned state when modals are dismissed with Escape
This commit is contained in:
2026-01-04 15:28:36 +01:00
parent b67e2434b5
commit 545bd97959
2 changed files with 42 additions and 10 deletions

View File

@@ -210,8 +210,10 @@ export function edit_step_and_close_modal(){
editing: false,
step_index: -1
};
const modal_el = document.querySelector("#edit_step_modal");
modal_el.close();
const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
if (modal_el) {
setTimeout(() => modal_el.close(), 0);
}
return;
}
@@ -237,8 +239,11 @@ export function edit_step_and_close_modal(){
// Normal edit behavior
instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
}
const modal_el = document.querySelector("#edit_step_modal");
modal_el.close();
const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
if (modal_el) {
// Defer closing to next tick to ensure all bindings are updated
setTimeout(() => modal_el.close(), 0);
}
}
export function show_modal_edit_subheading_step(list_index){
@@ -254,6 +259,17 @@ export function edit_subheading_steps_and_close_modal(){
modal_el.close();
}
function handleStepModalCancel() {
// Reset reference adding state when modal is cancelled (Escape key)
addingToReference = {
active: false,
list_index: -1,
position: 'before',
editing: false,
step_index: -1
};
}
export function clear_step(){
const el = document.querySelector("#step")
@@ -850,7 +866,7 @@ h3{
</div>
</div>
<dialog id=edit_step_modal>
<dialog id=edit_step_modal on:cancel={handleStepModalCancel}>
<h2>Schritt verändern</h2>
<div class=adder>
<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)" on:keydown={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>