From c2625657e2a920bfb95ebb4c7f144f2b2146b58d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 15 Mar 2026 21:00:01 +0000
Subject: [PATCH] fix: reset merge form after redirect

---
 .../src/lib/components/PersonTypeahead.svelte | 21 ++++++++++++++++---
 frontend/src/routes/persons/[id]/+page.svelte | 16 ++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte
index f6a8f2d2..8ec884cb 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte
+++ b/frontend/src/lib/components/PersonTypeahead.svelte
@@ -61,6 +61,15 @@
         dispatch('change', { value: person.id });
     }
 
+    let inputEl: HTMLInputElement;
+    let dropdownStyle = '';
+
+    function updateDropdownPosition() {
+        if (!inputEl) return;
+        const rect = inputEl.getBoundingClientRect();
+        dropdownStyle = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px`;
+    }
+
     function clickOutside(node: HTMLElement) {
         const handleClick = (event: any) => {
             if (node && !node.contains(event.target) && !event.defaultPrevented) {
@@ -74,30 +83,36 @@
     }
 </script>
 
+<svelte:window on:scroll={updateDropdownPosition} on:resize={updateDropdownPosition} />
+
 <div class="relative" use:clickOutside>
     <label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
 
     <input type="hidden" {name} bind:value={value} />
 
     <input
+        bind:this={inputEl}
         type="text"
         id="{name}-search"
         autocomplete="off"
         bind:value={searchTerm}
         on:input={handleInput}
-        on:focus={() => showDropdown = true}
+        on:focus={() => { updateDropdownPosition(); showDropdown = true; }}
         placeholder="Namen tippen..."
         class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border p-2 focus:ring-blue-500 focus:border-blue-500"
     />
 
     {#if showDropdown && (results.length > 0 || loading)}
-        <div class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+        <div
+            style={dropdownStyle}
+            class="z-50 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
             {#if loading}
                 <div class="p-2 text-gray-500 text-sm">Suche...</div>
             {:else}
                 {#each results as person}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <div 
+                    <div
                         class="cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-blue-100 text-gray-900"
                         on:click={() => selectPerson(person)}
                         role="button"
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index fd70832d..20c28d9f 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -9,20 +9,14 @@
 
     let editMode = false;
     let mergeTargetId = '';
-    let mergeTargetName = '';
     let showMergeConfirm = false;
 
-    function enterEdit() {
-        editMode = true;
-    }
+    function enterEdit() { editMode = true; }
+    function cancelEdit() { editMode = false; }
 
-    function cancelEdit() {
-        editMode = false;
-    }
+    $: if (form?.updated) { editMode = false; }
 
-    $: if (form?.updated) {
-        editMode = false;
-    }
+    $: person.id, (() => { mergeTargetId = ''; showMergeConfirm = false; })();
 </script>
 
 <div class="max-w-4xl mx-auto py-10 px-4">
@@ -135,6 +129,7 @@
     </div>
 
     <!-- Merge Section -->
+    {#key person.id}
     <div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
         <div class="p-6 md:p-8">
             <h2 class="text-lg font-serif text-brand-navy mb-1">Person zusammenführen</h2>
@@ -195,6 +190,7 @@
             </form>
         </div>
     </div>
+    {/key}
 
     <!-- Linked Documents Section -->
     <div>