From 26e1a4a2f7910094a5414ea3e1ccdb3c02e53583 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 4 Jan 2026 15:28:36 +0100
Subject: [PATCH] fix: ensure edit modals close properly on Enter and Escape

- 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
---
 .../components/CreateIngredientList.svelte    | 26 +++++++++++++++----
 src/lib/components/CreateStepList.svelte      | 26 +++++++++++++++----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/CreateIngredientList.svelte b/src/lib/components/CreateIngredientList.svelte
index 02c560e7..88d119ab 100644
--- a/src/lib/components/CreateIngredientList.svelte
+++ b/src/lib/components/CreateIngredientList.svelte
@@ -180,6 +180,17 @@ export function edit_subheading_and_close_modal(){
 	el.close()
 }
 
+function handleIngredientModalCancel() {
+	// Reset reference adding state when modal is cancelled (Escape key)
+	addingToReference = {
+		active: false,
+		list_index: -1,
+		position: 'before',
+		editing: false,
+		item_index: -1
+	};
+}
+
 export function add_new_ingredient(){
 	if(!new_ingredient.name){
 		return
@@ -230,8 +241,10 @@ export function edit_ingredient_and_close_modal(){
 				editing: false,
 				item_index: -1
 			};
-			const modal_el = document.querySelector("#edit_ingredient_modal");
-			modal_el.close();
+			const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
+			if (modal_el) {
+				setTimeout(() => modal_el.close(), 0);
+			}
 			return;
 		}
 
@@ -268,8 +281,11 @@ export function edit_ingredient_and_close_modal(){
 		}
 		ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
 	}
-	const modal_el = document.querySelector("#edit_ingredient_modal");
-	modal_el.close();
+	const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
+	if (modal_el) {
+		// Defer closing to next tick to ensure all bindings are updated
+		setTimeout(() => modal_el.close(), 0);
+	}
 }
 export function update_list_position(list_index, direction){
 	if(direction == 1){
@@ -811,7 +827,7 @@ h3{
 		</button>
 	</div>
 </div>
-<dialog id=edit_ingredient_modal>
+<dialog id=edit_ingredient_modal on:cancel={handleIngredientModalCancel}>
 	<h2>Zutat verändern</h2>
 	<div class=adder>
 	<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder="Kategorie (optional)">
diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte
index 2c4805c1..14a55d3a 100644
--- a/src/lib/components/CreateStepList.svelte
+++ b/src/lib/components/CreateStepList.svelte
@@ -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)}>