From dd423a22db78f6520cfd56d09e8d96cf7f9db651 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 19 May 2026 22:23:34 +0200
Subject: [PATCH] test(transcription): pin sticky search-input takeover
 behaviour

Once the user edits the dropdown search input, subsequent editorQuery
changes from the host editor must not overwrite it. Felix on PR #629.
Adds a small test host that exposes a setter for editorQuery so the
test can drive reactive prop changes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../discussion/MentionDropdown.svelte.test.ts | 22 +++++++++++++
 .../MentionDropdown.test-host.svelte          | 32 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/lib/shared/discussion/MentionDropdown.test-host.svelte

diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
index 8fed26d2..c261a9d3 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page, userEvent } from 'vitest/browser';
 import MentionDropdown from './MentionDropdown.svelte';
+import MentionDropdownHost from './MentionDropdown.test-host.svelte';
 import { m } from '$lib/paraglide/messages.js';
 import type { components } from '$lib/generated/api';
 
@@ -195,4 +196,25 @@ describe('MentionDropdown — search input', () => {
 			expect(onSearch).toHaveBeenLastCalledWith('Walter');
 		});
 	});
+
+	it('keeps the user-edited search value when editorQuery changes after the takeover (Felix on PR #629)', async () => {
+		let setEditorQuery!: (q: string) => void;
+		render(MentionDropdownHost, {
+			model: baseModel(),
+			initialEditorQuery: 'WdG',
+			onReady: (s: (q: string) => void) => {
+				setEditorQuery = s;
+			}
+		});
+
+		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
+
+		await page.getByRole('searchbox').fill('Walter');
+		await expect.element(page.getByRole('searchbox')).toHaveValue('Walter');
+
+		setEditorQuery('WdGruyter');
+		await new Promise((r) => setTimeout(r, 50));
+
+		await expect.element(page.getByRole('searchbox')).toHaveValue('Walter');
+	});
 });
diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.test-host.svelte b/frontend/src/lib/shared/discussion/MentionDropdown.test-host.svelte
new file mode 100644
index 00000000..4a69d9e5
--- /dev/null
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.test-host.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import MentionDropdown from './MentionDropdown.svelte';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+type DropdownState = {
+	items: Person[];
+	command: (item: Person) => void;
+	clientRect: (() => DOMRect | null) | null;
+};
+
+type Props = {
+	model: DropdownState;
+	initialEditorQuery: string;
+	/** Test hook: receives a setter for editorQuery so the test can mutate it. */
+	onReady?: (setEditorQuery: (q: string) => void) => void;
+	onSearch?: (q: string) => void;
+};
+
+let { model, initialEditorQuery, onReady, onSearch = () => {} }: Props = $props();
+
+let editorQuery = $state(untrack(() => initialEditorQuery));
+
+$effect(() => {
+	onReady?.((q) => {
+		editorQuery = q;
+	});
+});
+</script>
+
+<MentionDropdown model={model} editorQuery={editorQuery} onSearch={onSearch} />