diff --git a/src/lib/components/Input/Search.svelte b/src/lib/components/Input/Search.svelte index e0588d5..12d15c0 100644 --- a/src/lib/components/Input/Search.svelte +++ b/src/lib/components/Input/Search.svelte @@ -5,6 +5,7 @@ export let searchSuggestionFunc: ( input: string ) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]); + export let invalidMessage: string | null = null; export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'; export let label: string | null = null; export let required = false; @@ -32,21 +33,26 @@ class:input-xs={size === 'xs'} class:input-sm={size === 'sm'} class:input-md={size === 'md'} - class:input-lg={size === 'md'} + class:input-lg={size === 'lg'} {id} {required} bind:value={inputValue} - on:input={() => { + on:input={(e) => { value = ''; searchSuggestionFunc(inputValue).then((v) => { searchSuggestions = v; - let searchSuggestionValue = v.find((v) => v.name === inputValue); - if (searchSuggestionValue !== undefined) { - value = searchSuggestionValue.value; + const searchSuggestion = v.find((v) => v.name === inputValue); + if (searchSuggestion !== undefined) { + inputValue = searchSuggestion.name; + value = searchSuggestion.value; searchSuggestions = []; + e.target?.setCustomValidity(''); } }); }} + on:invalid={(e) => { + if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage); + }} pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null} /> diff --git a/src/routes/admin/reports/NewReportModal.svelte b/src/routes/admin/reports/NewReportModal.svelte index 0c91750..8957c09 100644 --- a/src/routes/admin/reports/NewReportModal.svelte +++ b/src/routes/admin/reports/NewReportModal.svelte @@ -58,6 +58,7 @@ size="sm" suggestionRequired={true} searchSuggestionFunc={usernameSuggestions} + invalidMessage="Es können nur registrierte Spieler Report Autoren sein" label="Reporter" required={true} bind:value={reporter} @@ -66,6 +67,7 @@ size="sm" suggestionRequired={true} searchSuggestionFunc={usernameSuggestions} + invalidMessage="Es können nur registrierte Spieler reportet werden" label="Reporteter User" required={true} bind:value={reported}