From 25afed0d65922523c14046030c6ee3b6e5daa28f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 19 May 2026 20:56:15 +0200
Subject: [PATCH] feat(transcription): add data-test-search-input hook for E2E
 selectors

For issue #380. Adds an explicit Playwright selector attribute on the
mention search input so E2E tests target a stable hook instead of a
fragile CSS class string.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/lib/shared/discussion/MentionDropdown.svelte |  1 +
 .../shared/discussion/MentionDropdown.svelte.spec.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
index 176b144b..07c0f628 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
@@ -149,6 +149,7 @@ function selectItem(item: Person) {
 			<input
 				id="mention-search"
 				type="search"
+				data-test-search-input
 				class="min-h-[44px] w-full bg-transparent font-sans text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset"
 				placeholder={m.person_mention_search_prompt()}
 				bind:value={searchQuery}
diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.spec.ts b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.spec.ts
index 907741f7..d73ff552 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.spec.ts
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.spec.ts
@@ -41,4 +41,16 @@ describe('MentionDropdown — search input', () => {
 
 		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
 	});
+
+	it('exposes a data-test-search-input attribute for E2E selectors', async () => {
+		render(MentionDropdown, {
+			model: makeModel(),
+			initialQuery: '',
+			onSearch: () => {}
+		});
+
+		const input = document.querySelector('[data-test-search-input]');
+		expect(input).not.toBeNull();
+		expect((input as HTMLInputElement).type).toBe('search');
+	});
 });