update search component

src/lib/components/Input/Search.svelte

@@ -2,7 +2,6 @@
 	let {
 		id,
 		value = $bindable(),
-		inputValue = $bindable(),
 		suggestionRequired = false,
 		emptyAllowed = false,
 		searchSuggestionFunc = () => Promise.resolve([]),
@@ -13,8 +12,7 @@
 		onsubmit
 	}: {
 		id?: string;
-		value?: string;
+		value: string;
-		inputValue?: string;
 		suggestionRequired?: boolean;
 		emptyAllowed?: boolean;
 		searchSuggestionFunc?: (input: string) => Promise<{ name: string; value: string }[]>;
@@ -25,10 +23,8 @@
 		onsubmit?: (event: Event & { input: string; value: string }) => void;
 	} = $props();
 
+	let elemValue = $state(value);
 	let searchSuggestions: { name: string; value: string }[] = $state([]);
-	$effect(() => {
-		if (!suggestionRequired) value = inputValue;
-	});
 </script>
 
 <div class="relative">
@@ -45,6 +41,7 @@
 		{/if}
 		<input
 			type="search"
+			autocomplete="off"
 			class="input input-bordered w-full"
 			class:input-xs={size === 'xs'}
 			class:input-sm={size === 'sm'}
@@ -52,33 +49,33 @@
 			class:input-lg={size === 'lg'}
 			{id}
 			{required}
-			bind:value={inputValue}
+			bind:value={elemValue}
-			oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+			oninput={async (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-				value = '';
+				searchSuggestions = await searchSuggestionFunc(elemValue);
-				searchSuggestionFunc(inputValue).then((v) => {
+				const searchSuggestion = searchSuggestions.find((v) => v.name === elemValue);
-					searchSuggestions = v;
-					const searchSuggestion = v.find((v) => v.name === inputValue);
 				if (searchSuggestion !== undefined) {
-						inputValue = searchSuggestion.name;
+					elemValue = searchSuggestion.name;
 					value = searchSuggestion.value;
 					searchSuggestions = [];
-						e.currentTarget.setCustomValidity('');
+					(e.currentTarget || e.target).setCustomValidity('');
-						onsubmit?.(Object.assign(e, { input: inputValue, value: value }));
+					onsubmit?.(Object.assign(e, { input: elemValue, value: value }));
-					} else if (inputValue === '' && emptyAllowed) {
+				} else if (elemValue === '' && emptyAllowed) {
 					onsubmit?.(Object.assign(e, { input: '', value: '' }));
+				} else {
+					value = '';
 				}
-				});
 			}}
 			oninvalid={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
 				if (invalidMessage) e.currentTarget.setCustomValidity(invalidMessage);
 			}}
+			onfocus={() => searchSuggestionFunc(elemValue).then((v) => (searchSuggestions = v))}
 			pattern={suggestionRequired
-				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
+				? `${value ? elemValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
 				: null}
 		/>
 	</div>
 
-	{#if inputValue && searchSuggestions.length !== 0}
+	{#if elemValue && searchSuggestions.length !== 0}
 		<ul class="absolute bg-base-200 w-full z-20 menu menu-sm rounded-box">
 			{#each searchSuggestions as searchSuggestion}
 				<li class="w-full text-left">
@@ -86,10 +83,10 @@
 						class="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
 						title="{searchSuggestion.name} ({searchSuggestion.value})"
 						onclick={(e) => {
-							inputValue = searchSuggestion.name;
+							elemValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
-							onsubmit?.(Object.assign(e, { input: inputValue, value: value }));
+							onsubmit?.(Object.assign(e, { input: elemValue, value: value }));
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@@ -99,7 +96,7 @@
 </div>
 
 <!-- close the search suggestions box when clicking outside -->
-{#if inputValue && searchSuggestions.length !== 0}
+{#if elemValue && searchSuggestions.length !== 0}
 	<button
 		aria-label=" "
 		class="absolute top-0 left-0 z-10 w-full h-full cursor-default"

src/routes/admin/reports/+page.svelte

@@ -262,7 +262,7 @@
 					searchSuggestionFunc={usernameSuggestions}
 					invalidMessage="Es können nur registrierte Spieler reportet werden"
 					label="Reporteter User"
-					inputValue={activeReport.reported?.username || ''}
+					value={activeReport.reported?.username || ''}
 					onsubmit={(e) =>
 						(activeReport.reported = {
 							...activeReport.reported,

src/routes/report/[...url_hash]/+page.svelte

@@ -21,7 +21,7 @@
 			<ReportDraft
 				reason={data.reason}
 				reporterName={data.reporter.name}
-				reportedName={data.reported.name ?? undefined}
+				reportedName={data.reported.name ?? null}
 				users={data.users ?? []}
 				onsubmit={() => (completed = true)}
 			/>